/**
 * PCZONE Brand Color Identity - Sales Funnel Optimization
 * ==========================================================
 * Created: 2024-12-26
 * 
 * Color Palette:
 * - Background: Deep Navy (#0B0E14) / Matte Charcoal (#0D0D0D)
 * - Primary CTA: Emerald Turquoise (#00D1B2) - "Go" signal for purchases
 * - Offers/Urgency: Warm Orange (#FF8C00) - Excitement without danger
 * - Branding/Navigation: Vibrant Purple (#8B5CF6) - Logo accent
 * - Typography: Soft White (#F2F2F2) - Better readability
 * 
 * To Revert: Remove this file include from app.blade.php and restore
 * files from /public/build/css/backup-2024-12-26/
 */

/* ========================================================
   LOGO STYLES - Prevent CLS with fixed dimensions
   ======================================================== */
.header-logo {
  height: 40px;
  width: auto;
  object-fit: contain;
}

.sidebar-logo {
  height: 60px;
  width: auto;
  object-fit: contain;
}

.admin-logo {
  height: 55px;
  width: auto;
  object-fit: contain;
}

.footer-logo {
  max-height: 60px;
  width: auto;
  object-fit: contain;
}

.auth-logo {
  width: 120px;
  height: auto;
  margin-bottom: 1rem;
  object-fit: contain;
}

.complete-profile-logo,
.register-logo {
  width: 100px;
  height: auto;
  object-fit: contain;
}

/* ========================================================
   ROOT CSS VARIABLES - CORE BRAND COLORS
   ======================================================== */
:root {
  /* Brand Core Colors - Premium Dark Theme */
  --pcz-bg-dark: #050505;
  --pcz-bg-charcoal: #0a0a0a;
  --pcz-bg-card: #111111;
  --pcz-bg-card-hover: #181818;
  --pcz-bg-elevated: #0f0f0f;
  
  /* CTA Colors - Sales Funnel */
  --pcz-cta-primary: #00D1B2;
  --pcz-cta-primary-hover: #00E5C4;
  --pcz-cta-primary-active: #00B89E;
  --pcz-cta-primary-rgb: 0, 209, 178;
  --pcz-cta-primary-glow: rgba(0, 209, 178, 0.3);
  
  /* Urgency/Offers Colors */
  --pcz-offer: #FF8C00;
  --pcz-offer-hover: #FFA033;
  --pcz-offer-rgb: 255, 140, 0;
  --pcz-offer-glow: rgba(255, 140, 0, 0.25);
  
  /* Branding Colors - Navigation & Links */
  --pcz-brand: #8B5CF6;
  --pcz-brand-hover: #A78BFA;
  --pcz-brand-active: #7C3AED;
  --pcz-brand-rgb: 139, 92, 246;
  --pcz-brand-glow: rgba(139, 92, 246, 0.25);
  
  /* Typography Colors */
  --pcz-text-primary: #F2F2F2;
  --pcz-text-secondary: #B0B8C9;
  --pcz-text-muted: #6B7280;
  --pcz-text-heading: #FFFFFF;
  
  /* Border & Shadow */
  --pcz-border: rgba(255, 255, 255, 0.08);
  --pcz-border-light: rgba(255, 255, 255, 0.12);
  --pcz-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --pcz-shadow-cta: 0 4px 20px var(--pcz-cta-primary-glow);
  
  /* Consistent Border Radius */
  --pcz-radius-sm: 8px;
  --pcz-radius-md: 12px;
  --pcz-radius-lg: 16px;
  --pcz-radius-xl: 20px;
}

/* ========================================================
   OVERRIDE BOOTSTRAP THEME VARIABLES
   ======================================================== */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
  /* Override primary with our CTA color */
  --bs-primary: var(--pcz-cta-primary);
  --bs-primary-rgb: var(--pcz-cta-primary-rgb);
  
  /* Override link colors with brand purple */
  --bs-link-color: var(--pcz-brand);
  --bs-link-color-rgb: var(--pcz-brand-rgb);
  --bs-link-hover-color: var(--pcz-brand-hover);
  
  /* Override success with our CTA */
  --bs-success: var(--pcz-cta-primary);
  --bs-success-rgb: var(--pcz-cta-primary-rgb);
  
  /* Override warning with our offer color */
  --bs-warning: var(--pcz-offer);
  --bs-warning-rgb: var(--pcz-offer-rgb);
  
  /* Typography */
  --bs-body-color: var(--pcz-text-primary);
  --bs-heading-color: var(--pcz-text-heading);
  
  /* Backgrounds */
  --bs-body-bg: var(--pcz-bg-dark);
  --bs-body-bg-rgb: 11, 14, 20;
  
  /* Border radius consistency */
  --bs-border-radius: var(--pcz-radius-md);
  --bs-border-radius-sm: var(--pcz-radius-sm);
  --bs-border-radius-lg: var(--pcz-radius-lg);
  --bs-border-radius-xl: var(--pcz-radius-xl);
  
  /* Card shadows */
  --pc-card-box-shadow: var(--pcz-shadow);
}

/* Override preset colors for consistency */
[data-pc-preset] {
  --pc-sidebar-active-color: var(--pcz-brand) !important;
  --bs-primary: var(--pcz-cta-primary) !important;
  --bs-primary-rgb: var(--pcz-cta-primary-rgb) !important;
}

/* ========================================================
   BODY & BACKGROUND STYLES - PREMIUM DARK
   ======================================================== */
html, 
body {
  background: linear-gradient(180deg, #050505 0%, #0a0a0a 50%, #050505 100%) !important;
  color: var(--pcz-text-primary);
  min-height: 100vh;
}

body::before {
  background: 
    radial-gradient(ellipse at 20% 10%, rgba(139, 92, 246, 0.04) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 85%, rgba(0, 209, 178, 0.03) 0%, transparent 45%) !important;
}

/* Floating background shapes */
.pcz-bg-shape-1 {
  background: linear-gradient(135deg, rgba(0, 209, 178, 0.25), rgba(0, 209, 178, 0.05)) !important;
}

.pcz-bg-shape-2 {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(139, 92, 246, 0.08)) !important;
}

.pcz-bg-shape-3 {
  background: linear-gradient(135deg, rgba(255, 140, 0, 0.15), rgba(255, 140, 0, 0.03)) !important;
}

/* ========================================================
   HEADER & SIDEBAR STYLING - PURE BLACK GLASSMORPHISM
   ======================================================== */
.pc-header,
.pc-sidebar,
.pc-sidebar .navbar-wrapper,
.pc-sidebar .navbar-content,
.navbar-wrapper {
  background: rgba(0, 0, 0, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.04) !important;
}

/* Logo - NO BACKGROUND - Transparent - CLS OPTIMIZED */
.pc-sidebar .m-header,
.m-header,
.m-header a,
.pc-sidebar .m-header a {
  background: transparent !important;
  background-color: transparent !important;
}

/* Navbar wrapper - CLS prevention */
.navbar-wrapper {
  contain: layout style !important;
  min-height: 70px !important;
}

.m-header {
  contain: layout !important;
  min-width: 100px !important;
  min-height: 45px !important;
}

.pc-header {
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(5, 5, 5, 0.9) 100%) !important;
  border-bottom: 1px solid rgba(139, 92, 246, 0.08) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  contain: layout style !important;
  min-height: 70px !important;
  max-height: 70px !important;
}

/* Navigation links - Brand Purple */
.pc-navbar .pc-link,
.pc-sidebar .pc-link {
  color: var(--pcz-text-secondary) !important;
  transition: all 0.2s ease;
}

.pc-navbar .pc-link:hover,
.pc-sidebar .pc-link:hover,
.pc-navbar .pc-item.active > .pc-link,
.pc-sidebar .pc-item.active > .pc-link {
  color: var(--pcz-brand) !important;
}

.pc-sidebar .pc-item.active > .pc-link {
  background: rgba(139, 92, 246, 0.12) !important;
  border-radius: var(--pcz-radius-md);
}

/* ========================================================
   TYPOGRAPHY - SOFT WHITE
   ======================================================== */
body,
.pc-container,
.pc-content {
  background: #050505 !important;
  background-color: #050505 !important;
  color: var(--pcz-text-primary);
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Light mode containers */
[data-pc-theme="light"] .pc-container,
[data-pc-theme="light"] .pc-content {
  background: #F5F7FA !important;
  background-color: #F5F7FA !important;
}

/* Hero card - full width no margins */
.hero-card.card {
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--pcz-text-heading) !important;
}

p,
.text-muted {
  color: var(--pcz-text-secondary) !important;
}

a {
  color: var(--pcz-brand);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--pcz-brand-hover);
}

/* ========================================================
   CARDS - PREMIUM GLASSMORPHISM
   ======================================================== */
.card {
  background: linear-gradient(145deg, rgba(18, 18, 18, 0.9) 0%, rgba(10, 10, 10, 0.95) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: var(--pcz-radius-lg) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
}

.card:hover {
  border-color: rgba(139, 92, 246, 0.15) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(139, 92, 246, 0.05);
  transform: translateY(-3px);
}

.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--pcz-border) !important;
}

.card-footer {
  background: transparent !important;
  border-top: 1px solid var(--pcz-border) !important;
}

/* Product cards - DARK THEME - CLS OPTIMIZED */
.product-card,
.card.product-card,
.product-card-wrapper .product-card {
  border-radius: var(--pcz-radius-lg) !important;
  overflow: hidden !important;
  background: #0d0d0d !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  min-height: 420px !important;
  contain: layout style !important;
}

.product-card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
  border-color: rgba(139, 92, 246, 0.15) !important;
}

/* Product card image container - BEAUTIFUL PURPLE GRADIENT - CLS OPTIMIZED */
.product-card .card-img-top,
.card.product-card .card-img-top,
.product-card-wrapper .card-img-top {
  background: linear-gradient(145deg, #2d1f4e 0%, #1a1235 50%, #0f0a1f 100%) !important;
  padding: 15px !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px 12px 0 0 !important;
  min-height: 220px !important;
  aspect-ratio: 4/3 !important;
  contain: layout !important;
  min-height: 280px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Product images - BIGGER SIZE */
.product-card .card-img-top img,
.product-card .img-prod,
.product-card img.img-fluid,
.card-img-top img {
  width: 100% !important;
  height: 250px !important;
  object-fit: contain !important;
  background: transparent !important;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.4)) !important;
}

/* Product card body - DARK */
.product-card .card-body,
.card.product-card .card-body {
  background: #0a0a0a !important;
  padding: 16px !important;
}

/* Product title */
.product-card .card-body a,
.product-card .card-body p {
  color: var(--pcz-text-primary) !important;
}

/* Product price */
.product-card .card-body h4,
.product-card .card-body .h4 {
  color: var(--pcz-text-heading) !important;
}

/* Favorite heart icon */
.product-card .prod-likes,
.product-card .form-check.prod-likes {
  background: rgba(0, 0, 0, 0.5) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* Heart container - remove grey background */
.product-card .card-img-top > .card-body.position-absolute {
  background: none !important;
  background-color: transparent !important;
  padding: 10px !important;
}

/* ========================================================
   E-COMMERCE LAYOUT FIX
   ======================================================== */
.ecom-wrapper,
.ecom-content {
  width: 100% !important;
  max-width: 100% !important;
}

.ecom-wrapper .row {
  justify-content: center !important;
}

/* ========================================================
   BUNDLE CARDS - PREMIUM DESIGN
   ======================================================== */
.product-card.bundle-card,
.product-card:has(.badge-prod-card.bg-info) {
  border: 1px solid rgba(139, 92, 246, 0.25) !important;
  background: linear-gradient(145deg, #12101f 0%, #0d0d0d 100%) !important;
  position: relative !important;
  overflow: visible !important;
}

/* Bundle card glow effect */
.product-card.bundle-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, transparent 50%, rgba(139, 92, 246, 0.1) 100%);
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.product-card.bundle-card:hover::before {
  opacity: 1;
}

.product-card.bundle-card:hover {
  border-color: rgba(139, 92, 246, 0.4) !important;
  box-shadow: 0 15px 50px rgba(139, 92, 246, 0.2), 0 0 30px rgba(139, 92, 246, 0.1) !important;
  transform: translateY(-5px) !important;
}

/* Bundle badge styling - Wide RECTANGLE */
.badge-prod-card.bg-info,
.badge.bg-info.badge-prod-card {
  background: linear-gradient(135deg, #00D1B2 0%, #00B89C 100%) !important;
  color: #000 !important;
  font-weight: 700 !important;
  padding: 10px 20px !important;
  border-radius: 6px !important;
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  box-shadow: 0 4px 15px rgba(0, 209, 178, 0.4) !important;
  border: none !important;
  min-width: 100px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

/* Bundle image container - Special gradient */
.product-card.bundle-card .card-img-top,
.product-card:has(.badge-prod-card.bg-info) .card-img-top {
  background: linear-gradient(145deg, #3d2a6e 0%, #2d1f4e 40%, #1a1235 100%) !important;
  min-height: 300px !important;
  border-bottom: 1px solid rgba(139, 92, 246, 0.2) !important;
}

/* Bundle card body */
.product-card.bundle-card .card-body {
  background: linear-gradient(180deg, #0f0d15 0%, #0a0a0a 100%) !important;
}

/* Bundle "from" price text */
.product-card.bundle-card h4 small {
  font-size: 0.65rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  opacity: 0.7 !important;
  display: block !important;
  margin-bottom: 2px !important;
}

/* Bundle Start Build button - Premium CTA */
.product-card.bundle-card .btn-primary.btn-lg,
.product-card .btn-primary:has(.ph-cpu) {
  background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 50%, #6D28D9 100%) !important;
  border: none !important;
  font-weight: 700 !important;
  padding: 14px 24px !important;
  border-radius: 12px !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 6px 25px rgba(139, 92, 246, 0.4) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.product-card.bundle-card .btn-primary.btn-lg::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.product-card.bundle-card .btn-primary.btn-lg:hover::before {
  left: 100%;
}

.product-card.bundle-card .btn-primary.btn-lg:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 10px 35px rgba(139, 92, 246, 0.5) !important;
}

/* Category cards - DARK BACKGROUND - CLS OPTIMIZED */
.category-card,
a[href*="/category/"] > div,
.col-auto a img,
.categories-scroll img,
.category img,
img.category-img {
  background: #151515 !important;
  border-radius: 12px !important;
}

/* Category Icon Wrapper - Purple SVG Icons */
.category-icon-wrapper {
  width: 80px !important;
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(145deg, #2d1f4e 0%, #1a1235 50%, #0f0a1f 100%) !important;
  border-radius: 16px !important;
  margin: 0 auto !important;
  transition: all 0.3s ease !important;
}

.category-icon-wrapper i {
  font-size: 40px !important;
  color: #8B5CF6 !important;
  transition: all 0.3s ease !important;
}

.category-card:hover .category-icon-wrapper {
  background: linear-gradient(145deg, #3d2a6e 0%, #2d1f4e 50%, #1a1235 100%) !important;
  transform: scale(1.05) !important;
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3) !important;
}

.category-card:hover .category-icon-wrapper i {
  color: #A78BFA !important;
  transform: scale(1.1) !important;
}

/* Category Scroll Cards (horizontal scroll section) */
.card-body.user-story-block {
  padding: 5px 0 !important;
  background: transparent !important;
  border: none !important;
}

.user-story-block .horizontal-scroll {
  gap: 12px !important;
  padding: 10px 20px !important;
  /* justify-content: flex-start for scroll to work from beginning */
  justify-content: flex-start !important;
  display: flex !important;
}

.d-flex.justify-content-center > .horizontal-scroll {
  /* Don't use center - causes first items to be inaccessible when content overflows */
  justify-content: flex-start !important;
}

/* Force center the category scroll */
.horizontal-scroll.drag-scroll {
  margin: 0 auto !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.horizontal-scroll.drag-scroll::-webkit-scrollbar {
  display: none !important;
}

.user-story-block .user-story {
  margin-right: 0 !important;
  background: transparent !important;
}

.user-story-block .user-story .card-img {
  display: none !important;
}

/* Remove any gray/white backgrounds from category cards */
.category-scroll-card,
.category-scroll-card *,
.user-story.category-scroll-card,
.user-story.category-scroll-card * {
  background-color: transparent !important;
}

.category-scroll-card {
  background: linear-gradient(145deg, #1a1235 0%, #0f0a1f 100%) !important;
}

.user-story-block .user-story .card-img-overlay {
  position: relative !important;
  backdrop-filter: none !important;
}

/* Drag to scroll */
.drag-scroll {
  cursor: grab !important;
  user-select: none !important;
  display: flex !important;
  /* flex-start ensures scroll starts from beginning, not center */
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 10px 20px !important;
  flex-wrap: nowrap !important;
}

.drag-scroll.dragging {
  cursor: grabbing !important;
}

/* Horizontal scroll container - DO NOT use justify-content: center */
.user-story-block .horizontal-scroll {
  justify-content: flex-start !important;
}

.category-scroll-card {
  position: relative !important;
  overflow: hidden !important;
  min-height: 85px !important;
  height: 85px !important;
  min-width: 80px !important;
  width: 80px !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, #1a1235 0%, #0f0a1f 100%) !important;
  border: 1px solid rgba(139, 92, 246, 0.3) !important;
  transition: all 0.3s ease !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.category-scroll-card:hover {
  border-color: rgba(139, 92, 246, 0.6) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3) !important;
}

/* Old category-scroll-icon styles removed - consolidated below */

.category-scroll-card:hover .category-scroll-icon i {
  color: #A78BFA !important;
  transform: translate(-50%, -50%) scale(1.15) !important;
}

.category-scroll-card .card-img-overlay {
  background: transparent !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 6px !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  height: auto !important;
}

.category-scroll-card .card-img-overlay h6 {
  color: #fff !important;
  margin: 0 !important;
  font-size: 0.65rem !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* ========================================
   Horizontal Scroll Categories Strip
   ======================================== */
.categories-horizontal-scroll {
  display: flex !important;
  gap: 16px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 20px 40px !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  scrollbar-color: #8B5CF6 #1a1a1a !important;
}

.categories-horizontal-scroll::-webkit-scrollbar {
  height: 6px !important;
}

.categories-horizontal-scroll::-webkit-scrollbar-track {
  background: #1a1a1a !important;
  border-radius: 3px !important;
}

.categories-horizontal-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #8B5CF6, #6D28D9) !important;
  border-radius: 3px !important;
}

.category-scroll-item {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-decoration: none !important;
  padding: 16px !important;
  background: linear-gradient(145deg, #151515 0%, #0a0a0a 100%) !important;
  border: 1px solid rgba(139, 92, 246, 0.15) !important;
  border-radius: 16px !important;
  min-width: 120px !important;
  transition: all 0.3s ease !important;
}

.category-scroll-item:hover {
  background: linear-gradient(145deg, #1f1f1f 0%, #0f0f0f 100%) !important;
  border-color: rgba(139, 92, 246, 0.4) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.2) !important;
}

.category-scroll-icon {
  width: 70px !important;
  height: 70px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(145deg, #2d1f4e 0%, #1a1235 100%) !important;
  border-radius: 14px !important;
  margin-bottom: 12px !important;
  transition: all 0.3s ease !important;
  position: relative !important;
}

.category-scroll-icon i {
  font-size: 32px !important;
  color: #8B5CF6 !important;
  transition: all 0.3s ease !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
}

.category-scroll-item:hover .category-scroll-icon {
  background: linear-gradient(145deg, #3d2a6e 0%, #2d1f4e 100%) !important;
  transform: scale(1.05) !important;
}

.category-scroll-item:hover .category-scroll-icon i {
  color: #A78BFA !important;
  transform: translate(-50%, -50%) scale(1.1) !important;
}

.category-scroll-img {
  width: 70px !important;
  height: 70px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(145deg, #2d1f4e 0%, #1a1235 100%) !important;
  border-radius: 14px !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
}

.category-scroll-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 14px !important;
}

.category-scroll-name {
  color: #f2f2f2 !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  text-align: center !important;
  max-width: 100px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.category-scroll-item:hover .category-scroll-name {
  color: #A78BFA !important;
}

/* Category section cards - fixed dimensions */
.product-cards-block .card {
  min-height: 160px !important;
  contain: layout style !important;
}

.product-cards-block .card img {
  width: 80px !important;
  height: 80px !important;
  object-fit: contain !important;
}

/* Footer - CLS prevention */
footer.footer,
.footer {
  min-height: 180px !important;
  contain: layout !important;
}

/* Category scroll section */
.categories-scroll,
.row > .col-auto {
  background: transparent !important;
}

/* Category card wrapper with image */
.col-auto > a,
.d-flex > a {
  background: transparent !important;
}

/* Placeholder images - subtle on purple bg */
img[src*="placeholder"] {
  filter: brightness(0.8) !important;
  opacity: 0.4 !important;
}

/* ========================================================
   CTA BUTTONS - EMERALD TURQUOISE (#00D1B2)
   High contrast for sales funnel optimization
   ======================================================== */

/* Primary CTA - Add to Cart, Buy Now, Purchase */
.btn-primary,
.btn-success,
a.btn.btn-primary,
button.btn.btn-primary {
  background: #00D1B2 !important;
  background-color: #00D1B2 !important;
  border-color: #00D1B2 !important;
  color: #000000 !important;
  font-weight: 600 !important;
  border-radius: var(--pcz-radius-md) !important;
  box-shadow: 0 4px 15px rgba(0, 209, 178, 0.3);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-shadow: none;
}

/* Cart page specific button fix */
.card-footer .btn-primary,
.card-footer a.btn-primary {
  background: #00D1B2 !important;
  background-color: #00D1B2 !important;
  border-color: #00D1B2 !important;
  color: #000000 !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
  background: var(--pcz-cta-primary-hover) !important;
  border-color: var(--pcz-cta-primary-hover) !important;
  color: #000000 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 25px var(--pcz-cta-primary-glow);
}

.btn-primary:active,
.btn-success:active {
  background: var(--pcz-cta-primary-active) !important;
  border-color: var(--pcz-cta-primary-active) !important;
  transform: translateY(0);
}

/* Light variants for subtle CTAs */
.btn-light-primary,
.btn-light-success {
  background: rgba(0, 209, 178, 0.12) !important;
  color: var(--pcz-cta-primary) !important;
  border: 1px solid rgba(0, 209, 178, 0.25) !important;
  border-radius: var(--pcz-radius-md) !important;
}

.btn-light-primary:hover,
.btn-light-success:hover {
  background: var(--pcz-cta-primary) !important;
  color: #000000 !important;
}

/* Outline CTA buttons */
.btn-outline-primary,
.btn-outline-success {
  color: var(--pcz-cta-primary) !important;
  border-color: var(--pcz-cta-primary) !important;
  border-radius: var(--pcz-radius-md) !important;
  background: transparent;
}

.btn-outline-primary:hover,
.btn-outline-success:hover {
  background: var(--pcz-cta-primary) !important;
  color: #000000 !important;
}

/* Product card buttons */
.btn-prod-card {
  background: rgba(0, 209, 178, 0.1) !important;
  color: var(--pcz-cta-primary) !important;
  border: 1px solid rgba(0, 209, 178, 0.3) !important;
  border-radius: var(--pcz-radius-md) !important;
  font-weight: 500;
  transition: all 0.25s ease;
}

.btn-prod-card:hover {
  background: var(--pcz-cta-primary) !important;
  color: #000000 !important;
  border-color: var(--pcz-cta-primary) !important;
  transform: translateY(-1px);
}

/* ========================================================
   OFFER/URGENCY STYLING - WARM ORANGE (#FF8C00)
   ======================================================== */
.btn-warning {
  background: var(--pcz-offer) !important;
  border-color: var(--pcz-offer) !important;
  color: #000000 !important;
  font-weight: 600 !important;
  border-radius: var(--pcz-radius-md) !important;
}

.btn-warning:hover,
.btn-warning:focus {
  background: var(--pcz-offer-hover) !important;
  border-color: var(--pcz-offer-hover) !important;
}

/* Sale/Discount badges */
.badge-sale,
.badge-discount,
.badge-offer,
.badge.bg-warning {
  background: var(--pcz-offer) !important;
  color: #000000 !important;
  font-weight: 600;
  border-radius: var(--pcz-radius-sm);
  padding: 0.4em 0.8em;
}

/* Offer cards and sections */
.offer-card,
.sale-banner,
.discount-section {
  border: 2px solid var(--pcz-offer) !important;
  background: rgba(255, 140, 0, 0.08) !important;
  border-radius: var(--pcz-radius-lg) !important;
}

/* Price styling for offers */
.price-original {
  color: var(--pcz-text-muted);
  text-decoration: line-through;
}

.price-sale,
.price-discount {
  color: var(--pcz-offer) !important;
  font-weight: 700;
}

/* ========================================================
   BRANDING - NAVIGATION & LINKS (VIBRANT PURPLE #8B5CF6)
   ======================================================== */
.btn-link,
.nav-link {
  color: var(--pcz-brand) !important;
}

.btn-link:hover,
.nav-link:hover {
  color: var(--pcz-brand-hover) !important;
}

/* Navigation active states */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--pcz-brand) !important;
  color: #FFFFFF !important;
  border-radius: var(--pcz-radius-md);
}

/* Tabs */
.nav-tabs .nav-link.active {
  border-color: var(--pcz-brand) !important;
  color: var(--pcz-brand) !important;
}

/* Pagination */
.pagination .page-link {
  color: var(--pcz-brand);
  border-radius: var(--pcz-radius-sm) !important;
  margin: 0 2px;
}

.pagination .page-item.active .page-link {
  background: var(--pcz-brand) !important;
  border-color: var(--pcz-brand) !important;
  color: #FFFFFF !important;
}

/* Category/Story links */
.user-story,
.category-card {
  border-radius: var(--pcz-radius-lg) !important;
  transition: all 0.3s ease;
}

.user-story:hover,
.category-card:hover {
  border-color: var(--pcz-brand) !important;
  box-shadow: 0 0 20px var(--pcz-brand-glow);
}

/* ========================================================
   SECONDARY & UTILITY BUTTONS
   ======================================================== */
.btn-secondary,
.btn-outline-secondary {
  background: var(--pcz-bg-elevated) !important;
  border-color: var(--pcz-border-light) !important;
  color: var(--pcz-text-primary) !important;
  border-radius: var(--pcz-radius-md) !important;
}

.btn-secondary:hover,
.btn-outline-secondary:hover {
  background: rgba(139, 92, 246, 0.15) !important;
  border-color: var(--pcz-brand) !important;
  color: var(--pcz-brand) !important;
}

.btn-link-secondary {
  color: var(--pcz-text-secondary) !important;
}

.btn-link-secondary:hover {
  color: var(--pcz-brand) !important;
}

/* All buttons - consistent radius */
.btn {
  border-radius: var(--pcz-radius-md) !important;
  font-weight: 500;
  transition: all 0.25s ease;
}

.btn-sm {
  border-radius: var(--pcz-radius-sm) !important;
}

.btn-lg {
  border-radius: var(--pcz-radius-lg) !important;
}

/* ========================================================
   FORM ELEMENTS
   ======================================================== */
.form-control,
.form-select {
  background: var(--pcz-bg-card) !important;
  border: 1px solid var(--pcz-border-light) !important;
  color: var(--pcz-text-primary) !important;
  border-radius: var(--pcz-radius-md) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--pcz-brand) !important;
  box-shadow: 0 0 0 3px var(--pcz-brand-glow) !important;
}

.form-control::placeholder {
  color: var(--pcz-text-muted) !important;
}

/* Checkboxes and radios with CTA color */
.form-check-input:checked {
  background-color: var(--pcz-cta-primary) !important;
  border-color: var(--pcz-cta-primary) !important;
}

/* ========================================================
   BADGES & LABELS
   ======================================================== */
.badge {
  border-radius: var(--pcz-radius-sm) !important;
  font-weight: 500;
}

.badge.bg-primary,
.badge.bg-success {
  background: var(--pcz-cta-primary) !important;
  color: #000000 !important;
}

.badge.bg-info {
  background: var(--pcz-brand) !important;
  color: #FFFFFF !important;
}

.badge-prod-card {
  border-radius: var(--pcz-radius-sm) !important;
}

/* ========================================================
   ALERTS & NOTIFICATIONS
   ======================================================== */
.alert {
  border-radius: var(--pcz-radius-lg) !important;
  border: none;
}

.alert-success {
  background: rgba(0, 209, 178, 0.15) !important;
  color: var(--pcz-cta-primary) !important;
  border-left: 4px solid var(--pcz-cta-primary) !important;
}

.alert-warning {
  background: rgba(255, 140, 0, 0.15) !important;
  color: var(--pcz-offer) !important;
  border-left: 4px solid var(--pcz-offer) !important;
}

.alert-info {
  background: rgba(139, 92, 246, 0.15) !important;
  color: var(--pcz-brand) !important;
  border-left: 4px solid var(--pcz-brand) !important;
}

/* ========================================================
   DROPDOWNS & MODALS
   ======================================================== */
.dropdown-menu {
  background: var(--pcz-bg-elevated) !important;
  border: 1px solid var(--pcz-border) !important;
  border-radius: var(--pcz-radius-lg) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.dropdown-item {
  color: var(--pcz-text-primary) !important;
  border-radius: var(--pcz-radius-sm);
  margin: 2px 4px;
  transition: all 0.2s ease;
}

.dropdown-item:hover {
  background: rgba(139, 92, 246, 0.12) !important;
  color: var(--pcz-brand) !important;
}

.modal-content {
  background: var(--pcz-bg-card) !important;
  border: 1px solid var(--pcz-border) !important;
  border-radius: var(--pcz-radius-xl) !important;
}

.modal-header,
.modal-footer {
  border-color: var(--pcz-border) !important;
}

/* ========================================================
   TABLES
   ======================================================== */
.table {
  color: var(--pcz-text-primary);
}

.table > thead {
  background: var(--pcz-bg-elevated);
}

.table > tbody > tr {
  border-color: var(--pcz-border);
}

.table > tbody > tr:hover {
  background: rgba(139, 92, 246, 0.05);
}

/* ========================================================
   PROGRESS BARS
   ======================================================== */
.progress {
  background: var(--pcz-bg-elevated) !important;
  border-radius: var(--pcz-radius-sm) !important;
}

.progress-bar {
  background: var(--pcz-cta-primary) !important;
}

/* ========================================================
   HERO SLIDER & BANNERS
   ======================================================== */
.hero-card {
  border-radius: var(--pcz-radius-xl) !important;
  overflow: hidden;
}

.hero-arrows .btn {
  background: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: var(--pcz-text-primary) !important;
  backdrop-filter: blur(8px);
}

.hero-arrows .btn:hover {
  background: var(--pcz-brand) !important;
  border-color: var(--pcz-brand) !important;
}

/* ========================================================
   FOOTER
   ======================================================== */
.pc-footer,
footer {
  background: var(--pcz-bg-charcoal) !important;
  border-top: 1px solid var(--pcz-border) !important;
  color: var(--pcz-text-secondary);
}

/* ========================================================
   SCROLLBAR STYLING
   ======================================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--pcz-bg-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--pcz-bg-elevated);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--pcz-brand);
}

/* ========================================================
   AVATAR & ICONS
   ======================================================== */
.avtar {
  border-radius: var(--pcz-radius-md) !important;
}

.avtar.avtar-s {
  border-radius: var(--pcz-radius-sm) !important;
}

/* ========================================================
   ICON FONTS PROTECTION - Prevent icons from breaking
   ======================================================== */
/* Ensure icon fonts are not affected by global styles */
i[class*="ti-"],
i[class*="ph-"],
i[class*="fe-"],
i[class*="fa-"],
i[class*="material-"],
.ti,
.ph,
.ph-duotone,
.feather,
.material-icons-two-tone {
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: normal !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tabler Icons */
i[class*="ti-"] {
  font-family: 'tabler-icons' !important;
}

/* Phosphor Icons */
i[class*="ph-"],
.ph,
.ph-duotone {
  font-family: 'Phosphor-Duotone' !important;
}

/* Feather Icons */
i[class*="fe-"],
.feather {
  font-family: 'feather' !important;
}

/* Font Awesome 5 & 6 Compatibility */
i[class*="fa-"],
.fa,
.fas,
.far,
.fab,
.fal {
  font-family: 'Font Awesome 5 Free' !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Font Awesome 6 syntax compatibility (fa-solid, fa-regular, fa-brands) */
.fa-solid,
i.fa-solid {
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
  font-style: normal !important;
}

.fa-regular,
i.fa-regular {
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

.fa-brands,
i.fa-brands {
  font-family: 'Font Awesome 5 Brands' !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* Ensure solid weight for fas and fa classes */
.fas,
.fa,
i.fas,
i.fa {
  font-weight: 900 !important;
}

.far,
i.far {
  font-weight: 400 !important;
}

.fab,
i.fab {
  font-family: 'Font Awesome 5 Brands' !important;
}

/* Material Icons */
.material-icons-two-tone {
  font-family: 'Material Icons Two Tone' !important;
}

/* Header icons specific fix */
.pc-head-link i,
.pc-header i,
.header-user-list i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ========================================================
   SPECIAL EFFECTS - GLOW & PULSE
   ======================================================== */
@keyframes ctaPulse {
  0%, 100% {
    box-shadow: 0 4px 20px var(--pcz-cta-primary-glow);
  }
  50% {
    box-shadow: 0 4px 30px rgba(0, 209, 178, 0.45);
  }
}

/* Apply pulse to important CTAs */
.btn-primary.btn-lg,
.btn-buy-now,
.btn-checkout {
  animation: ctaPulse 2s ease-in-out infinite;
}

.btn-primary.btn-lg:hover,
.btn-buy-now:hover,
.btn-checkout:hover {
  animation: none;
  box-shadow: 0 6px 35px rgba(0, 209, 178, 0.5);
}

/* ========================================================
   RESPONSIVE ADJUSTMENTS
   ======================================================== */
@media (max-width: 768px) {
  :root {
    --pcz-radius-lg: 12px;
    --pcz-radius-xl: 16px;
  }
  
  .btn-primary,
  .btn-success {
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
  }
}

/* ========================================================
   LIGHT THEME OVERRIDES (if light mode is used)
   ======================================================== */
[data-pc-theme="light"] {
  --pcz-bg-dark: #F5F7FA;
  --pcz-bg-card: #FFFFFF;
  --pcz-bg-elevated: #FFFFFF;
  --pcz-text-primary: #1a1a2e;
  --pcz-text-secondary: #4a5568;
  --pcz-border: rgba(0, 0, 0, 0.08);
}

[data-pc-theme="light"] body::before {
  background: 
    radial-gradient(ellipse at 0% 0%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 0%, rgba(0, 209, 178, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(255, 140, 0, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 0% 100%, rgba(139, 92, 246, 0.03) 0%, transparent 50%) !important;
}

[data-pc-theme="light"] .card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* ========================================================
   PAGINATION - DARK THEME STYLING
   ======================================================== */
.pagination {
  gap: 5px !important;
}

.pagination .page-item .page-link {
  background: rgba(20, 20, 20, 0.9) !important;
  border: 1px solid rgba(139, 92, 246, 0.2) !important;
  color: var(--pcz-text-primary) !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.pagination .page-item .page-link:hover {
  background: rgba(139, 92, 246, 0.2) !important;
  border-color: var(--pcz-brand) !important;
  color: var(--pcz-brand) !important;
  transform: translateY(-2px);
}

.pagination .page-item.active .page-link {
  background: var(--pcz-brand) !important;
  border-color: var(--pcz-brand) !important;
  color: #fff !important;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4) !important;
}

.pagination .page-item.disabled .page-link {
  background: rgba(20, 20, 20, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.3) !important;
  cursor: not-allowed;
}

/* Light theme pagination */
[data-pc-theme="light"] .pagination .page-item .page-link {
  background: #fff !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #1a1a2e !important;
}

[data-pc-theme="light"] .pagination .page-item .page-link:hover {
  background: rgba(139, 92, 246, 0.1) !important;
}

/* ========================================================
   MOBILE FIXES - COMPREHENSIVE
   ======================================================== */

/* 1. Toast Notifications - Below Navbar */
.pcz-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  z-index: 999999;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  max-width: 90%;
  width: auto;
}

.pcz-toast.pcz-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.pcz-toast.pcz-toast-hide {
  opacity: 0;
  transform: translateX(-50%) translateY(-20px);
}

.pcz-toast-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: 14px;
  backdrop-filter: blur(20px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
}

.pcz-toast-success .pcz-toast-content {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.95) 0%, rgba(5, 150, 105, 0.95) 100%);
  color: white;
}

.pcz-toast-error .pcz-toast-content {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.95) 0%, rgba(220, 38, 38, 0.95) 100%);
  color: white;
}

.pcz-toast-content i {
  font-size: 20px;
}

.pcz-toast-content button {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  transition: background 0.2s;
}

.pcz-toast-content button:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 2. Profile Dropdown - Fix overflow on mobile - Start from right */
@media (max-width: 767.98px) {
  #userProfileDropdown {
    position: fixed !important;
    top: 65px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    width: 280px !important;
    max-width: calc(100vw - 20px) !important;
    min-width: auto !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 1060 !important;
    border-radius: 12px !important;
  }
  
  /* Cart Dropdown - Fix overflow on mobile */
  #cartDropdownMenu {
    position: fixed !important;
    top: 65px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    width: 300px !important;
    max-width: calc(100vw - 20px) !important;
    min-width: auto !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 1060 !important;
    border-radius: 12px !important;
  }
}

/* Admin page - Mobile hamburger always visible */
@media (max-width: 767.98px) {
  .pc-sidebar-popup {
    display: inline-flex !important;
  }
  
  .pc-sidebar-popup .pc-head-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
  }
  
  .pc-sidebar-popup .ti-menu-2 {
    font-size: 24px !important;
    color: var(--pcz-violet) !important;
  }
}

/* 3. Mobile Navbar Layout - Logo center, hamburger left, icons right */
@media (max-width: 767.98px) {
  /* Hide sidebar on mobile (we show it as slide menu) */
  .pc-sidebar:not(.mob-sidebar-active) {
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border: none !important;
    padding: 0 !important;
  }
  
  .pc-sidebar .m-header,
  .pc-sidebar .navbar-content {
    display: none !important;
  }
  
  /* Header - full width navbar */
  .pc-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 60px !important;
    min-height: 60px !important;
    padding: 0 12px !important;
    background: rgba(5, 5, 5, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.15) !important;
    z-index: 1025 !important;
  }
  
  .pc-header .header-wrapper {
    width: 100% !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  
  /* Hamburger - LEFT */
  .pc-header .me-auto.pc-mob-drp {
    display: flex !important;
    flex: 0 0 auto !important;
  }
  
  .pc-header .pc-mob-drp,
  .pc-header .pc-sidebar-popup {
    display: block !important;
  }
  
  /* Mobile Logo - CENTER */
  .pc-header .mobile-logo {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .pc-header .mobile-logo img {
    height: 36px !important;
    width: auto !important;
  }
  
  /* Icons - RIGHT */
  .pc-header .ms-auto {
    display: flex !important;
    flex: 0 0 auto !important;
  }
  
  /* Container - starts right after navbar */
  .pc-container {
    padding-top: 60px !important;
    margin-top: 0 !important;
  }
}

/* Desktop - hide mobile logo */
@media (min-width: 768px) {
  .pc-header .mobile-logo {
    display: none !important;
  }
}

/* 4. Cart Page - No horizontal scroll */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  /* Cart table - vertical layout on mobile */
  .table-body .table th,
  .table-body .table td {
    padding: 8px !important;
    font-size: 13px !important;
  }
  
  .table-body .table th:nth-child(3),
  .table-body .table th:nth-child(4),
  .table-body .table td:nth-child(3),
  .table-body .table td:nth-child(4) {
    display: none;
  }
  
  .table-body .wid-50 {
    width: 40px !important;
    height: 40px !important;
  }
  
  .table-body .flex-grow-1 h5 {
    font-size: 13px !important;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Quantity buttons */
  .btn-group-sm .btn {
    padding: 4px 8px !important;
  }
  
  .wid-35 {
    width: 30px !important;
  }
  
  /* Cart footer */
  .card-footer .d-flex {
    flex-direction: column;
    gap: 10px;
  }
  
  .card-footer .btn {
    width: 100%;
  }
}

/* Cart page - Mobile responsive */
@media (max-width: 767.98px) {
  /* Hide table header on mobile */
  .table-body .table thead {
    display: none;
  }
  
  /* Convert table rows to cards */
  .table-body .table tbody tr {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
    margin-bottom: 10px;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
  
  .table-body .table tbody td {
    border: none !important;
    padding: 8px 0 !important;
  }
  
  /* Product info - full width */
  .table-body .table tbody td:first-child {
    width: 100%;
    flex: 0 0 100%;
  }
  
  .table-body .table tbody td:first-child .d-flex {
    flex-direction: row;
    align-items: flex-start;
  }
  
  .table-body .table tbody td:first-child .wid-50 {
    width: 70px !important;
    height: 70px !important;
    object-fit: contain;
  }
  
  .table-body .table tbody td:first-child h5 {
    font-size: 13px;
    margin-bottom: 4px;
  }
  
  /* Price - half width */
  .table-body .table tbody td:nth-child(2) {
    width: 50%;
    flex: 0 0 50%;
    text-align: left !important;
  }
  
  .table-body .table tbody td:nth-child(2)::before {
    content: 'السعر: ';
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    display: block;
  }
  
  /* Quantity - half width */
  .table-body .table tbody td:nth-child(3) {
    width: 50%;
    flex: 0 0 50%;
    text-align: right !important;
  }
  
  .table-body .table tbody td:nth-child(3) .btn-group {
    transform: scale(0.9);
  }
  
  /* Total - half width */
  .table-body .table tbody td:nth-child(4) {
    width: 50%;
    flex: 0 0 50%;
    text-align: left !important;
  }
  
  .table-body .table tbody td:nth-child(4)::before {
    content: 'المجموع: ';
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    display: block;
  }
  
  /* Delete button - half width */
  .table-body .table tbody td:nth-child(5) {
    width: 50%;
    flex: 0 0 50%;
    text-align: right !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  
  /* Footer totals */
  .table-body .table tfoot tr {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px 15px;
  }
  
  .table-body .table tfoot td {
    border: none !important;
    padding: 5px 0 !important;
  }
  
  .table-body .table tfoot td[colspan="3"] {
    flex: 0 0 50%;
  }
  
  .table-body .table tfoot td[colspan="2"] {
    flex: 0 0 50%;
    text-align: right;
  }
  
  /* Remove horizontal scroll */
  .table-responsive {
    overflow-x: visible !important;
  }
  
  .table-body .table {
    width: 100% !important;
    display: block;
  }
  
  .table-body .table tbody {
    display: block;
  }
}

/* 5. Category Page - 2 products per row on mobile - Better design */
@media (max-width: 767.98px) {
  .product-card-wrapper {
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-bottom: 12px !important;
  }
  
  .product-card-wrapper .product-card {
    min-height: auto !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, #111111, #0a0a0a) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
  }
  
  .product-card-wrapper .card-img-top {
    min-height: 140px !important;
    height: 140px !important;
    padding: 10px !important;
    border-radius: 16px 16px 0 0 !important;
  }
  
  .product-card-wrapper .card-img-top img,
  .product-card-wrapper .img-prod {
    height: 120px !important;
    width: 100% !important;
    object-fit: contain !important;
  }
  
  .product-card-wrapper .card-body {
    padding: 12px !important;
  }
  
  .product-card-wrapper .prod-content {
    font-size: 12px !important;
    line-height: 1.3 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px !important;
    color: rgba(255, 255, 255, 0.85) !important;
  }
  
  .product-card-wrapper h4 {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 8px !important;
  }
  
  /* Hide favorites button on mobile */
  .product-card-wrapper .prod-likes {
    display: none !important;
  }
  
  .product-card-wrapper .btn-prod-card {
    padding: 8px 12px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
  }
  
  /* Hide extra buttons on mobile */
  .product-card-wrapper .card-body > .d-flex.flex-shrink-0 {
    display: none !important;
  }
}

/* Sidebar Overlay - Click outside to close */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1049;
  cursor: pointer;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 6. Mobile sidebar menu with close button */
@media (max-width: 992px) {
  /* Ensure hamburger button is visible */
  .pc-header .pc-mob-drp {
    display: block !important;
  }
  
  .pc-header #mobile-collapse,
  .pc-header .pc-sidebar-popup {
    display: inline-flex !important;
  }
  
  /* Mobile sidebar - slide from left */
  .pc-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 280px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    z-index: 1050 !important;
    background: rgba(10, 10, 10, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    overflow-y: auto !important;
    border-right: 1px solid rgba(139, 92, 246, 0.2) !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    visibility: hidden;
  }
  
  .pc-sidebar.mob-sidebar-active {
    transform: translateX(0) !important;
    visibility: visible;
  }
  
  .pc-sidebar.mob-sidebar-active .navbar-wrapper {
    flex-direction: column !important;
    align-items: flex-start !important;
    height: auto !important;
    min-height: 100vh !important;
    padding: 20px !important;
  }
  
  /* Mobile Sidebar Header - Logo CENTER + Close Button RIGHT */
  .mobile-sidebar-header {
    display: none;
  }
  
  .pc-sidebar.mob-sidebar-active .mobile-sidebar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 100% !important;
    padding: 15px 0 20px 0 !important;
    margin-bottom: 15px !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.2) !important;
  }
  
  /* Logo - CENTER */
  .mobile-sidebar-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .mobile-sidebar-logo img {
    height: 45px !important;
    width: auto !important;
  }
  
  /* Close button - absolute RIGHT */
  .pc-sidebar.mob-sidebar-active .btn-close-sidebar {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  
  .btn-close-sidebar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    border-radius: 10px !important;
    color: #ef4444 !important;
    font-size: 20px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
  }
  
  .btn-close-sidebar:hover {
    background: rgba(239, 68, 68, 0.3) !important;
    border-color: #ef4444 !important;
    color: #fff !important;
  }
  
  .btn-close-sidebar i {
    font-size: 20px !important;
  }
  
  /* Hide desktop m-header on mobile sidebar */
  .pc-sidebar.mob-sidebar-active .m-header {
    display: none !important;
  }
  
  .pc-sidebar.mob-sidebar-active .navbar-content {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
  }
  
  .pc-sidebar.mob-sidebar-active .pc-navbar {
    flex-direction: column !important;
    width: 100% !important;
    gap: 5px !important;
  }
  
  .pc-sidebar.mob-sidebar-active .pc-item {
    width: 100% !important;
    display: block !important;
  }
  
  .pc-sidebar.mob-sidebar-active .pc-link {
    width: 100% !important;
    padding: 12px 15px !important;
    border-radius: 10px !important;
  }
  
  .pc-sidebar.mob-sidebar-active .pc-link:hover {
    background: rgba(139, 92, 246, 0.15) !important;
  }
  
  .pc-sidebar.mob-sidebar-active .pc-submenu {
    position: static !important;
    display: none;
    width: 100% !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border: none !important;
    border-radius: 10px !important;
    margin-top: 5px !important;
    padding: 5px !important;
  }
  
  .pc-sidebar.mob-sidebar-active .pc-item.pc-trigger > .pc-submenu {
    display: block !important;
  }
}

/* 7. Hero Banner - No gap from navbar */
.hero-card {
  margin: 0 !important;
  border-radius: 0 !important;
}

@media (max-width: 767.98px) {
  /* Content - No spacing between navbar and content */
  .pc-content {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Banner - full width, no margins */
  .hero-card,
  .card.hero-card,
  .pc-content > .hero-card:first-child,
  .pc-content > .card:first-child {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
  }
  
  .hero-card .card-body {
    padding: 0 !important;
  }
  
  /* Core Components - small padding */
  .row.justify-content-center.my-1,
  .row.justify-content-center.my-2 {
    margin-top: 10px !important;
    padding: 0 10px !important;
  }
}

@media (min-width: 768px) {
  .pc-content {
    padding-top: 0 !important;
  }
  
  .pc-content > .hero-card:first-child {
    margin-top: -20px !important;
    margin-left: -24px !important;
    margin-right: -24px !important;
    width: calc(100% + 48px) !important;
    border-radius: 0 !important;
  }
}

/* 8. Profile Address Card Background Fix */
.profile-address-card,
.address-card,
[class*="address"] .card {
  background: rgba(20, 20, 20, 0.9) !important;
  border: 1px solid rgba(139, 92, 246, 0.15) !important;
}

[data-pc-theme="light"] .profile-address-card,
[data-pc-theme="light"] .address-card,
[data-pc-theme="light"] [class*="address"] .card {
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* 9. Phone change form - remove overlay */
.phone-change-overlay,
.phone-update-block .overlay,
#phone-change-section .disabled-overlay {
  display: none !important;
}

#phone-change-section input,
#phone-change-section button,
.phone-update-block input,
.phone-update-block button {
  pointer-events: auto !important;
  opacity: 1 !important;
}