/* ============================================================
   Bitbywebtech — 3D Visual Enhancements
   - 360° rotating logo + 3D animated brand text
   - 360° interactive product viewer (auto-rotate + bounce, drag to spin)
   - Compact single-frame checkout layout with centered branded banner
   ============================================================ */

/* ---------- 360° Brand Logo (header + checkout banner) ---------- */
.brand-3d-stage {
  display: inline-block;
  perspective: 600px;
  perspective-origin: 50% 50%;
  cursor: pointer;
}
.brand-3d-stage .brand-mark {
  transform-style: preserve-3d;
  animation: bw-logo-osc 6s ease-in-out infinite, bw-logo-bounce 3.4s ease-in-out infinite;
  transform-origin: 50% 50%;
  will-change: transform;
  filter: drop-shadow(0 8px 18px rgba(210,110,75,.45)) drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
/* Hover triggers a full 360° spin */
.brand-3d-stage:hover .brand-mark {
  animation: bw-logo-full-spin 1.6s cubic-bezier(.4, 0, .2, 1) 1, bw-logo-bounce 3.4s ease-in-out infinite;
}
@keyframes bw-logo-osc {
  0%   { transform: rotateY(-28deg) rotateX(6deg); }
  50%  { transform: rotateY( 28deg) rotateX(-6deg); }
  100% { transform: rotateY(-28deg) rotateX(6deg); }
}
@keyframes bw-logo-full-spin {
  0%   { transform: rotateY(0deg)   rotateX(6deg); }
  100% { transform: rotateY(360deg) rotateX(6deg); }
}
@keyframes bw-logo-bounce {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -4px; }
}

/* ---------- 3D animated company name ---------- */
.brand-text-3d {
  display: inline-block;
  font-weight: 900;
  letter-spacing: -.02em;
  background: linear-gradient(180deg, #ffffff 0%, #f3cdb9 55%, #d26e4b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 1px 0 rgba(255,255,255,.35),
    0 2px 0 rgba(192,83,47,.45),
    0 3px 0 rgba(156,66,38,.55),
    0 6px 14px rgba(210,110,75,.45);
  animation: bw-text-float 4.5s ease-in-out infinite;
}
[data-bs-theme="dark"] .brand-text-3d {
  background: linear-gradient(180deg, #ffffff 0%, #f3cdb9 60%, #d26e4b 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.brand-text-3d .brand-accent {
  background: linear-gradient(180deg, #ffd9c4 0%, #d26e4b 70%, #9c4226 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@keyframes bw-text-float {
  0%, 100% { transform: translateY(0) rotateX(0deg); }
  50%      { transform: translateY(-3px) rotateX(6deg); }
}

/* Subtle 3D tilt for inline navbar brand text (smaller use) */
.brand-text-3d-sm {
  display: inline-block;
  text-shadow:
    0 1px 0 rgba(192,83,47,.25),
    0 2px 6px rgba(210,110,75,.18);
  animation: bw-text-float 5s ease-in-out infinite;
}

/* ---------- 360° Interactive Product Viewer ---------- */
.product-3d-stage {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1100px;
  perspective-origin: 50% 50%;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: pan-y;
}
/* When placed inside a Bootstrap .ratio container, Bootstrap forces
   `.ratio > * { position: absolute; ... }`. Keep that behavior so the
   stage fills the aspect-ratio box correctly. */
.ratio > .product-3d-stage {
  position: absolute;
  top: 0;
  left: 0;
}
.product-3d-stage.is-dragging { cursor: grabbing; }
.product-3d-stage .product-3d-card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
  /* No auto-rotation — only a gentle bounce/float. Spin is driven by user drag. */
  animation: bw-prod-bounce 3.8s ease-in-out infinite;
  will-change: transform;
}
.product-3d-stage.is-dragging .product-3d-card {
  animation-play-state: paused;
  transition: none;
}
.product-3d-stage.paused .product-3d-card {
  animation-play-state: paused;
}
.product-3d-card .face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.product-3d-card .face img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 22px 30px rgba(2,6,23,.18));
  pointer-events: none;
}
.product-3d-card .face.back { transform: rotateY(180deg); }
.product-3d-card .face.back img { transform: scaleX(-1); }

/* Soft glossy floor shadow under bouncing product */
.product-3d-stage::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 4%;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(2,6,23,.30) 0%, rgba(2,6,23,.0) 70%);
  filter: blur(2px);
  pointer-events: none;
  animation: bw-prod-shadow 3.8s ease-in-out infinite;
}
@keyframes bw-prod-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes bw-prod-shadow {
  0%, 100% { transform: scale(1);    opacity: .55; }
  50%      { transform: scale(.78);  opacity: .35; }
}

/* Detail-page product viewer — taller, more dramatic */
.product-3d-stage.product-3d-hero {
  height: 360px;
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(210,110,75,.16), transparent 60%),
    radial-gradient(80% 60% at 50% 20%, rgba(255,255,255,.7), transparent 70%);
  border-radius: 1.25rem;
}
[data-bs-theme="dark"] .product-3d-stage.product-3d-hero {
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(210,110,75,.22), transparent 60%),
    radial-gradient(80% 60% at 50% 20%, rgba(255,255,255,.08), transparent 70%);
}

/* In compact grid cards, soften the bounce amplitude */
.product-card .product-3d-stage .product-3d-card,
.shop-row .product-3d-stage .product-3d-card {
  animation-duration: 4.4s;
}

/* Accessibility — respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .brand-3d-stage .brand-mark,
  .brand-text-3d, .brand-text-3d-sm,
  .product-3d-card,
  .product-3d-stage::after {
    animation: none !important;
  }
}

/* ---------- 360° spin hint pill ---------- */
.spin-hint {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20,29,39,.85);
  color: #fff;
  font-size: .68rem;
  letter-spacing: .04em;
  padding: .28rem .6rem;
  border-radius: 999px;
  font-weight: 700;
  display: inline-flex;
  gap: .35rem;
  align-items: center;
  pointer-events: none;
  backdrop-filter: blur(4px);
  z-index: 2;
}
.spin-hint i { animation: spin-hint-pulse 1.6s ease-in-out infinite; }
@keyframes spin-hint-pulse { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }

/* ============================================================
   Compact Single-Frame Checkout
   ============================================================ */
.checkout-canvas.checkout-compact {
  background: linear-gradient(180deg, #0f1722 0%, #1c2738 50%, #0f1722 100%);
  min-height: 100vh;
}

/* Centered branded banner replacing the slim header */
.co-brand-banner {
  position: relative;
  text-align: center;
  padding: 1rem 1rem .9rem;
  background: linear-gradient(135deg, #1c2738 0%, #2a3a55 50%, #1c2738 100%);
  border-bottom: 1px solid rgba(232,162,131,.18);
  overflow: hidden;
}
.co-brand-banner::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(40% 60% at 20% 30%, rgba(210,110,75,.18), transparent 70%),
    radial-gradient(40% 60% at 80% 60%, rgba(232,162,131,.14), transparent 70%);
  pointer-events: none;
  animation: bw-banner-shimmer 14s ease-in-out infinite alternate;
}
@keyframes bw-banner-shimmer {
  0%   { transform: translate(-2%, -2%); }
  100% { transform: translate(2%, 2%); }
}
.co-brand-banner .banner-inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  z-index: 1;
}
.co-brand-banner .brand-text-3d {
  font-size: 1.55rem;
  line-height: 1;
}
.co-brand-banner .banner-meta {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: .55rem;
  font-size: .72rem;
  color: rgba(255,255,255,.78);
  z-index: 1;
}
.co-brand-banner .banner-meta .dot { color: #4ade80; }

/* Compact two-column checkout layout */
.checkout-compact .checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 1.1rem;
  padding: 1.1rem 1rem;
  max-width: 1280px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 991px) {
  .checkout-compact .checkout-grid { grid-template-columns: 1fr; }
}
.checkout-compact .co-card {
  background: #fff;
  border-radius: 16px;
  padding: .95rem 1rem;
  box-shadow: 0 18px 44px rgba(2,6,23,.35);
  border: none;
}
[data-bs-theme="dark"] .checkout-compact .co-card {
  background: linear-gradient(180deg, #243040, #1d2835);
}
.checkout-compact .co-card + .co-card { margin-top: .8rem; }

.checkout-compact .co-section-title {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #2c3a4f;
  margin-bottom: .55rem;
}
[data-bs-theme="dark"] .checkout-compact .co-section-title { color: #f3cdb9; }
.checkout-compact .co-section-title .num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--uc-grad);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem;
  flex-shrink: 0;
}
.checkout-compact .co-section-title i.section-ic {
  margin-left: auto;
  color: #d26e4b;
  font-size: 1rem;
}

.checkout-compact .form-control,
.checkout-compact .form-select {
  font-size: .85rem;
  padding: .42rem .6rem;
  border-radius: .55rem;
}
.checkout-compact .form-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6c7585;
  margin-bottom: .15rem;
}
[data-bs-theme="dark"] .checkout-compact .form-label { color: #b9b9c1; }

/* Right summary column — sticky */
.checkout-compact .co-summary {
  position: sticky;
  top: 12px;
}

/* Compact item rows in summary */
.checkout-compact .summary-item {
  display: flex;
  gap: .55rem;
  align-items: center;
  padding: .35rem 0;
}
.checkout-compact .summary-item img {
  width: 38px; height: 38px;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  padding: 3px;
}
.checkout-compact .summary-item .name {
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.15;
  flex: 1;
  min-width: 0;
  color: #2c3a4f;
}
[data-bs-theme="dark"] .checkout-compact .summary-item .name { color: #ececf0; }
.checkout-compact .summary-item .qty {
  font-size: .68rem;
  color: #6c7585;
}
.checkout-compact .summary-item .price {
  font-size: .82rem;
  font-weight: 800;
  color: #c0532f;
}
.checkout-compact .summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .55rem .7rem;
  background: linear-gradient(135deg, rgba(210,110,75,.10), rgba(232,162,131,.06));
  border-radius: 10px;
  margin-top: .5rem;
}
.checkout-compact .summary-total .label { font-weight: 800; font-size: .9rem; }
.checkout-compact .summary-total .amount {
  font-weight: 900;
  font-size: 1.2rem;
  color: #c0532f;
}

/* Pay buttons row */
.checkout-compact .pay-tile-compact {
  border: 1.5px solid rgba(108, 117, 133, .25);
  border-radius: 10px;
  padding: .55rem .65rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 700;
  transition: all .2s ease;
}
.checkout-compact .pay-tile-compact:hover { border-color: #d26e4b; }
.checkout-compact .pay-tile-compact.active {
  border-color: #d26e4b;
  background: rgba(210,110,75,.08);
  box-shadow: 0 0 0 3px rgba(210,110,75,.12);
}
.checkout-compact .pay-tile-compact .pay-icon-sm {
  height: 18px;
}

/* Submit button */
.checkout-compact .pay-submit {
  width: 100%;
  background: var(--uc-grad);
  border: none;
  color: #fff;
  font-weight: 800;
  font-size: .98rem;
  padding: .7rem;
  border-radius: 999px;
  margin-top: .55rem;
  transition: transform .15s ease, box-shadow .25s ease;
  box-shadow: 0 8px 22px rgba(210,110,75,.35);
}
.checkout-compact .pay-submit:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(210,110,75,.45); }

/* Slim trust strip */
.checkout-compact .trust-strip {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .68rem;
  color: #6c7585;
  margin-top: .5rem;
}
[data-bs-theme="dark"] .checkout-compact .trust-strip { color: #b9b9c1; }
.checkout-compact .trust-strip i.text-success { color: #16a34a !important; }