/* =========================================================
   YADHIEL BOOST — VIDEO MATCH POLISH V8
   Keeps the original BlackWhite VideoMatch layout.
   Only refines quality, motion, product/cart/status surfaces.
   ========================================================= */

:root {
  --yb-polish-bg: #050505;
  --yb-polish-panel: rgba(12,12,12,.92);
  --yb-polish-panel-2: rgba(16,16,16,.88);
  --yb-polish-line: rgba(255,255,255,.09);
  --yb-polish-line-strong: rgba(255,255,255,.18);
  --yb-polish-text: #f6f6f6;
  --yb-polish-muted: #929297;
  --yb-polish-soft: rgba(255,255,255,.045);
  --yb-polish-shadow: 0 22px 70px rgba(0,0,0,.45);
}

/* ---------- Safety: content must never stay invisible ---------- */
.yb-reveal,
.scroll-reveal,
.product-card-reveal {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

/* Existing reveal classes can still animate via JS, but never hide content. */
.yb-reveal,
.scroll-reveal,
.product-card-reveal {
  transform: none !important;
}

html, body {
  background: #050505 !important;
}

body {
  color: var(--yb-polish-text);
  overflow-x: hidden;
}

/* ---------- Navbar: same compact shape, higher quality ---------- */
.yb-nav-shell {
  border-color: rgba(255,255,255,.085) !important;
  background: linear-gradient(180deg, rgba(14,14,14,.94), rgba(7,7,7,.93)) !important;
  box-shadow: 0 14px 45px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.yb-nav-shell:hover {
  border-color: rgba(255,255,255,.15) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.52), 0 0 32px rgba(255,255,255,.02) !important;
}

.yb-brand img {
  filter: drop-shadow(0 0 10px rgba(255,255,255,.10));
}

.yb-nav-links a,
.yb-icon-btn,
.yb-login,
.yb-usd {
  transition: transform .24s ease, color .24s ease, background .24s ease, border-color .24s ease !important;
}

.yb-nav-links a:hover,
.yb-icon-btn:hover,
.yb-login:hover,
.yb-usd:hover {
  transform: translateY(-1px);
}

/* ---------- Hero: preserve exact layout, improve depth ---------- */
.yb-hero {
  background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,.055), transparent 27%),
    #050505 !important;
}

.yb-hero-grid {
  opacity: .75;
}

.yb-hero h1 {
  text-shadow: 0 8px 34px rgba(0,0,0,.55);
}

.yb-hero p {
  color: #98989d !important;
}

.yb-pill {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 30px rgba(0,0,0,.20);
}

.yb-orb {
  opacity: .10 !important;
  filter: blur(92px) !important;
  animation: ybV8Orb 10s ease-in-out infinite !important;
}

@keyframes ybV8Orb {
  0%,100% { scale: 1; opacity: .08; }
  50% { scale: 1.10; opacity: .13; }
}

.yb-btn {
  position: relative;
  overflow: hidden;
}

.yb-btn::after {
  content: '';
  position: absolute;
  top: -120%;
  left: -55%;
  width: 34%;
  height: 340%;
  background: rgba(255,255,255,.22);
  transform: rotate(18deg);
  transition: left .72s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}

.yb-btn:hover::after { left: 125%; }

/* ---------- Home cards: same design, cleaner borders and motion ---------- */
.yb-product-card,
.yb-bento-card,
.yb-review-card,
.yb-help-grid > *,
.yb-why-grid > *,
.yb-how-grid > * {
  border-color: var(--yb-polish-line) !important;
  box-shadow: 0 14px 44px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.018);
}

.yb-product-card:hover,
.yb-bento-card:hover,
.yb-review-card:hover,
.yb-help-grid > *:hover,
.yb-why-grid > *:hover,
.yb-how-grid > *:hover {
  border-color: var(--yb-polish-line-strong) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.48), 0 0 34px rgba(255,255,255,.025) !important;
}

.yb-product-card {
  isolation: isolate;
}

.yb-product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 24%, rgba(255,255,255,.055) 50%, transparent 76%);
  transform: translateX(-130%);
  transition: transform .85s ease;
  pointer-events: none;
  z-index: 5;
}

.yb-product-card:hover::after { transform: translateX(130%); }

.yb-section-head h2,
.yb-section-head h1 {
  text-shadow: 0 10px 34px rgba(0,0,0,.35);
}

/* =========================================================
   STATUS PAGE — same structure, now premium monochrome
   ========================================================= */
.status-page-wrapper {
  background:
    radial-gradient(circle at 14% 26%, rgba(255,255,255,.04), transparent 24%),
    radial-gradient(circle at 88% 68%, rgba(255,255,255,.035), transparent 26%),
    #050505 !important;
}

.status-gradient-bg {
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.055), transparent 38%) !important;
  filter: blur(70px) !important;
  opacity: .82 !important;
  animation: ybV8StatusGlow 8s ease-in-out infinite !important;
}

@keyframes ybV8StatusGlow {
  0%,100% { transform: scale(1); opacity: .55; }
  50% { transform: scale(1.05); opacity: .9; }
}

.status-shape {
  object-fit: contain !important;
  width: auto !important;
  height: auto !important;
  opacity: .18 !important;
  filter: grayscale(1) brightness(1.28) drop-shadow(0 18px 28px rgba(0,0,0,.45));
  animation: ybV8LogoFloat 7.5s ease-in-out infinite !important;
}

.status-shape-1 { width: clamp(72px, 8vw, 132px) !important; left: 3% !important; top: 20% !important; }
.status-shape-2 { width: clamp(82px, 9vw, 150px) !important; right: 4% !important; top: 67% !important; }
.status-shape-3 { width: clamp(54px, 6vw, 98px) !important; left: 12% !important; bottom: 8% !important; opacity: .10 !important; }

@keyframes ybV8LogoFloat {
  0%,100% { translate: 0 0; rotate: -3deg; }
  50% { translate: 0 -12px; rotate: 3deg; }
}

.status-section .hero-badge {
  border-color: rgba(255,255,255,.13) !important;
  background: rgba(255,255,255,.035) !important;
}

.status-content { max-width: 930px !important; }

.status-group-header h2 {
  color: #a7a7ac !important;
  border-color: rgba(255,255,255,.075) !important;
}

.status-item {
  min-height: 58px;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.018)) !important;
  border-color: rgba(255,255,255,.075) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.24);
}

.status-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 28%, rgba(255,255,255,.05), transparent 72%);
  transform: translateX(-130%);
  transition: transform .75s ease;
  pointer-events: none;
}

.status-item:hover {
  transform: translateY(-3px) !important;
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.38), 0 0 25px rgba(255,255,255,.02) !important;
}

.status-item:hover::after { transform: translateX(130%); }
.status-item:hover::before { width: 3px !important; background: rgba(255,255,255,.55) !important; }
.status-item-name { font-weight: 650 !important; }
.status-text { color: #d8d8db !important; }
.status-dot { box-shadow: 0 0 12px currentColor; }

/* =========================================================
   PRODUCT PAGE — preserve layout, refine like a premium shop
   ========================================================= */
.product-wrapper {
  background:
    radial-gradient(circle at 72% 20%, rgba(255,255,255,.035), transparent 25%),
    #050505 !important;
}

.product-gradient-bg {
  background: radial-gradient(circle at 50% 18%, rgba(255,255,255,.045), transparent 42%) !important;
  opacity: .85 !important;
}

.product-shape::before,
.product-shape-1::before,
.product-shape-2::before,
.product-shape-3::before {
  background: linear-gradient(90deg, rgba(255,255,255,.05), transparent) !important;
  border-color: rgba(255,255,255,.08) !important;
}

.product-image-section,
.product-tabs-section,
.product-info-section,
.upsells-section {
  opacity: 1 !important;
}

.product-image-wrapper {
  border-radius: 18px !important;
  border-color: rgba(255,255,255,.09) !important;
  background: #090909 !important;
  box-shadow: var(--yb-polish-shadow), inset 0 1px 0 rgba(255,255,255,.025);
}

.product-image-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 26%, rgba(255,255,255,.075) 48%, transparent 70%);
  transform: translateX(-135%);
  transition: transform .9s ease;
}

.product-image-wrapper:hover::after { transform: translateX(135%); }
.product-image-wrapper:hover img { transform: scale(1.025) !important; }

.product-info-section {
  position: sticky;
  top: 82px;
  padding: 26px !important;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(15,15,15,.96), rgba(8,8,8,.96));
  box-shadow: 0 24px 70px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.02);
}

.product-title {
  font-size: clamp(1.75rem, 3.5vw, 2.45rem) !important;
  letter-spacing: -.035em !important;
  margin-bottom: .85rem !important;
}

.product-price-section {
  padding: 16px 0 18px;
  margin: 6px 0 16px;
  border-top: 1px solid rgba(255,255,255,.075);
  border-bottom: 1px solid rgba(255,255,255,.075);
}

.product-price {
  font-size: clamp(1.55rem, 3vw, 2.05rem) !important;
  font-weight: 760 !important;
}

.product-status,
.stock-badge,
.product-badge {
  border-radius: 999px !important;
  box-shadow: none !important;
}

.product-status {
  background: rgba(255,255,255,.035) !important;
  border-color: rgba(255,255,255,.09) !important;
}

.live-stats-section {
  background: rgba(255,255,255,.035) !important;
  color: #d9d9dc !important;
  border-color: rgba(255,255,255,.08) !important;
}

.product-tab-buttons {
  gap: 7px !important;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 13px;
  background: #090909;
}

.product-tab-btn {
  flex: 1;
  min-width: 110px;
  border-radius: 9px !important;
  border-color: transparent !important;
  background: transparent !important;
  padding: .68rem .9rem !important;
}

.product-tab-btn.active {
  background: #f1f1f1 !important;
  color: #080808 !important;
  box-shadow: 0 7px 22px rgba(255,255,255,.08);
}

.product-tab-content,
.upsells-section {
  border-radius: 18px !important;
  border-color: rgba(255,255,255,.085) !important;
  background: linear-gradient(180deg, rgba(15,15,15,.94), rgba(8,8,8,.94)) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.32) !important;
}

.product-tab-content .editor a { color: #fff !important; }

/* Product form: keep function/markup, make premium monochrome */
.product-form .variants .variant {
  border-radius: 11px !important;
  background: #0b0b0b !important;
  border-color: rgba(255,255,255,.085) !important;
}

.product-form .variants .variant:hover:not(:disabled) {
  background: #121212 !important;
  border-color: rgba(255,255,255,.18) !important;
  transform: translateY(-2px);
}

.product-form .variants .variant.active {
  background: #171717 !important;
  border-color: rgba(255,255,255,.34) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
}

.product-form .form-control.text-center,
.product-form .input-group .form-control {
  background: #0b0b0b !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: none !important;
}

.product-form .invoice-discount {
  background: rgba(255,255,255,.035) !important;
  border-left-color: rgba(255,255,255,.25) !important;
}

.product-form .invoice-discount .invoice-label,
.product-form .invoice-discount .invoice-value {
  color: #dedee1 !important;
}

.product-form .buy-buttons {
  gap: 10px !important;
}

.product-form .buy-buttons .btn {
  min-height: 44px;
  border-radius: 10px !important;
  transition: transform .23s ease, background .23s ease, border-color .23s ease, box-shadow .23s ease !important;
}

.product-form .buy-buttons .btn-primary {
  background: #f3f3f3 !important;
  color: #080808 !important;
  border-color: #fff !important;
  box-shadow: 0 10px 30px rgba(255,255,255,.08) !important;
}

.product-form .buy-buttons .btn-primary svg { color: #080808 !important; }

.product-form .buy-buttons .btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  background: #fff !important;
  box-shadow: 0 14px 38px rgba(255,255,255,.13) !important;
}

.product-form .buy-buttons .btn-outline-primary {
  background: #0a0a0a !important;
  border-color: rgba(255,255,255,.12) !important;
}

.product-form .buy-buttons .btn-outline-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  background: #151515 !important;
  border-color: rgba(255,255,255,.23) !important;
}

/* =========================================================
   CART / PRE-CHECKOUT — same functionality, matching product page
   ========================================================= */
.cart {
  max-width: 1160px;
  margin: 0 auto;
}

.cart .section-title h1 {
  font-size: clamp(2rem, 4vw, 3rem) !important;
  letter-spacing: -.04em;
}

.cart-item-bg {
  background: linear-gradient(180deg, rgba(15,15,15,.96), rgba(8,8,8,.96)) !important;
  border-color: rgba(255,255,255,.085) !important;
  border-radius: 16px !important;
  box-shadow: 0 15px 44px rgba(0,0,0,.28);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.cart-item-bg:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.15) !important;
  box-shadow: 0 22px 58px rgba(0,0,0,.38);
}

.cart-product-image {
  border-radius: 11px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.32);
}

.cart-quantity-controls {
  border: 1px solid rgba(255,255,255,.08);
  background: #080808;
}

.cart-qty-btn,
.cart-qty-input {
  background: #0b0b0b !important;
  color: #fff !important;
}

.cart > .row > .col-12.col-lg-4 .form,
.cart .form {
  position: sticky;
  top: 82px;
  border-color: rgba(255,255,255,.09) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(15,15,15,.97), rgba(8,8,8,.97)) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.38);
}

.cart .form .btn-outline-primary {
  min-height: 44px;
  border-radius: 10px !important;
  background: #f3f3f3 !important;
  color: #080808 !important;
  border-color: #fff !important;
  font-weight: 750;
  transition: transform .23s ease, box-shadow .23s ease !important;
}

.cart .form .btn-outline-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  background: #fff !important;
  box-shadow: 0 14px 38px rgba(255,255,255,.12) !important;
}

.cart .form .btn-outline-primary svg { color: #080808 !important; }

/* =========================================================
   QUALITY / FAQ / PAYMENTS — preserve section layouts, remove cheap colors
   ========================================================= */
.quality,
.payments-section,
.faq-section {
  background: #050505 !important;
}

.quality .comparison-column,
.payment-card,
.faq-card {
  border-color: rgba(255,255,255,.085) !important;
  background: linear-gradient(180deg, rgba(15,15,15,.92), rgba(8,8,8,.92)) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.28);
}

.quality .comparison-column:hover,
.payment-card:hover,
.faq-card:hover {
  border-color: rgba(255,255,255,.17) !important;
  box-shadow: 0 24px 68px rgba(0,0,0,.42), 0 0 30px rgba(255,255,255,.02) !important;
}

.quality .premium-badge,
.quality .standard-badge,
.payment-badge {
  background: rgba(255,255,255,.05) !important;
  color: #e7e7e9 !important;
  border-color: rgba(255,255,255,.12) !important;
}

.quality .comparison-column.premium {
  border-color: rgba(255,255,255,.14) !important;
}

.quality .feature-icon.available,
.quality .feature-icon.unavailable {
  background: rgba(255,255,255,.07) !important;
  color: #d8d8db !important;
}

.payment-gradient-overlay,
.faq-gradient-overlay {
  background: radial-gradient(circle, rgba(255,255,255,.055), transparent 65%) !important;
}

/* ---------- Modals / login / customer UI ---------- */
.modal-content,
.customer-card,
.card:not(.yb-product-card) {
  border-color: rgba(255,255,255,.085);
}

.modal-content {
  background: linear-gradient(180deg, rgba(15,15,15,.98), rgba(7,7,7,.98)) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.58) !important;
}

.form-control,
.form-select,
.choices__inner {
  border-color: rgba(255,255,255,.09) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(255,255,255,.24) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.035) !important;
}

/* ---------- Motion — premium and safe ---------- */
@keyframes ybV8CardIdle {
  0%,100% { translate: 0 0; }
  50% { translate: 0 -2px; }
}

.yb-product-card:nth-child(3n+1) { animation: ybV8CardIdle 8s ease-in-out infinite; }
.yb-product-card:nth-child(3n+2) { animation: ybV8CardIdle 8s ease-in-out 1.4s infinite; }
.yb-product-card:nth-child(3n+3) { animation: ybV8CardIdle 8s ease-in-out 2.8s infinite; }

@media (max-width: 991.98px) {
  .product-info-section,
  .cart .form { position: relative !important; top: auto !important; }
  .status-shape-3 { display: none !important; }
}

@media (max-width: 767.98px) {
  .yb-product-card { animation: none !important; }
  .status-shape { opacity: .10 !important; }
  .product-info-section { padding: 18px !important; }
  .product-tab-buttons { overflow-x: auto; flex-wrap: nowrap !important; }
  .product-tab-btn { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}