/* 
    Premium Store Enhancement CSS 
    Design: Glassmorphism, Modern Typography, Vibrant Accents 
*/

:root {
   /* Brand Colors (Matched with CRM) */
   --store-primary: #4f46e5;
   --store-primary-hover: #4338ca;
   --store-secondary: #64748b;
   --store-accent: #f59e0b;
   --store-info: #0ea5e9;
   --store-success: #10b981;
   --store-danger: #ef4444;

   /* Spacing & Radii */
   --store-radius-lg: 1.25rem;
   --store-radius-xl: 2rem;
   --store-radius-full: 50rem;

   /* Glass Effects */
   --store-glass-bg: rgba(255, 255, 255, 0.7);
   --store-glass-border: rgba(255, 255, 255, 0.5);
   --store-glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);

   /* Gradients */
   --store-accent-gradient: linear-gradient(135deg, var(--store-primary) 0%, var(--store-info) 100%);
   --store-success-gradient: linear-gradient(135deg, #22c55e 0%, #10b981 100%);

   /* Fonts */
   --store-font-primary: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;

   /* Transitions */
   --store-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"],
.store-theme-dark {
   --store-glass-bg: rgba(24, 24, 27, 0.8);
   --store-glass-border: rgba(255, 255, 255, 0.08);
   --store-glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);

   /* Surface base for dark mode */
   --store-bg-base: #09090b;
   --store-surface: #18181b;
}

body.store-front {
   font-family: var(--store-font-primary);
   background-color: #f8fafc;
   color: #1e293b;
   transition: background-color 0.3s ease;
}

.store-theme-dark body.store-front,
[data-theme="dark"] body.store-front {
   background-color: var(--store-bg-base);
   color: #f8fafc;
}

/* Premium Surface Overrides */
.card,
.store-product-card,
.store-card-gloss,
.store-cat-card,
.store-tech-deal-card {
   background: var(--store-glass-bg) !important;
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid var(--store-glass-border) !important;
   box-shadow: var(--store-glass-shadow) !important;
   border-radius: var(--store-radius-lg) !important;
   transition: var(--store-transition);
}

.store-product-card:hover,
.store-card-gloss:hover,
.store-cat-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}

/* Hero Section Enhancement */
.store-hero-addox {
   background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('https://images.unsplash.com/photo-1593305841991-05c297ba4575?q=80&w=2000&auto=format&fit=crop') center/cover;
   padding: 120px 0;
   border-radius: 0 0 var(--store-radius-xl) var(--store-radius-xl);
   margin-bottom: 4rem;
   color: white;
   text-align: center;
}

.store-hero-badge {
   background: var(--store-accent-gradient);
   padding: 0.5rem 1.25rem;
   border-radius: var(--store-radius-full);
   font-weight: 600;
   text-transform: uppercase;
   font-size: 0.75rem;
   letter-spacing: 1px;
   margin-bottom: 1.5rem;
   display: inline-block;
   box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
}

.store-logo-minimal,
.store-logo {
   font-weight: 800;
   letter-spacing: -1px;
   background: var(--store-accent-gradient);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

/* Category Cards */
.store-cat-icon {
   width: 64px;
   height: 64px;
   background: var(--store-accent-gradient);
   color: white;
   border-radius: 1.25rem;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.75rem;
   margin-bottom: 1.25rem;
   box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3);
}

/* Product Cards */
.store-product-card {
   overflow: hidden;
   height: 100%;
   display: flex;
   flex-direction: column;
}

.store-product-image-wrap {
   position: relative;
   padding-top: 100%;
   overflow: hidden;
}

.store-product-image-wrap img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.5s ease;
}

.store-product-card:hover .store-product-image-wrap img {
   transform: scale(1.1);
}

/* Buttons & Premium Interactors */
.btn-addox-primary,
.btn-premium {
   background: var(--store-accent-gradient);
   border: none;
   color: white !important;
   padding: 0.8rem 2.2rem;
   border-radius: 1rem;
   font-weight: 700;
   transition: var(--store-transition);
   box-shadow: 0 10px 25px rgba(79, 70, 229, 0.2);
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

.btn-addox-primary:hover,
.btn-premium:hover {
   transform: translateY(-3px) scale(1.02);
   box-shadow: 0 15px 35px rgba(79, 70, 229, 0.3);
}

.btn-addox-outline,
.btn-premium-outline {
   background: transparent;
   border: 2px solid var(--store-primary);
   color: var(--store-primary) !important;
   padding: 0.8rem 2.2rem;
   border-radius: 1rem;
   font-weight: 700;
   transition: var(--store-transition);
}

.btn-addox-outline:hover,
.btn-premium-outline:hover {
   background: var(--store-primary);
   color: white !important;
   transform: translateY(-3px);
   box-shadow: 0 12px 25px rgba(79, 70, 229, 0.2);
}

.store-product-badge {
   position: absolute;
   top: 1rem;
   right: 1rem;
   background: var(--store-accent-gradient);
   color: white;
   padding: 0.25rem 0.75rem;
   border-radius: var(--store-radius-full);
   font-size: 0.7rem;
   font-weight: 700;
   z-index: 2;
}

/* Premium Utilities */
.rounded-4 {
   border-radius: 2rem !important;
}

.rounded-5 {
   border-radius: 3.5rem !important;
}

.fs-7 {
   font-size: 0.82rem !important;
}

.extra-small {
   font-size: 0.72rem !important;
}

.tracking-wider {
   letter-spacing: 0.05em !important;
}

.tracking-widest {
   letter-spacing: 0.18em !important;
}

.shadow-premium {
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06) !important;
}

.shadow-accent {
   box-shadow: 0 10px 30px rgba(99, 102, 241, 0.12) !important;
}

/* Status Indicators */
.bg-new {
   background-color: #94a3b8 !important;
   color: white !important;
}

.bg-pending {
   background-color: #f59e0b !important;
   color: white !important;
}

.bg-confirmed {
   background-color: #38bdf8 !important;
   color: white !important;
}

.bg-processing {
   background-color: #6366f1 !important;
   color: white !important;
}

.bg-shipped {
   background-color: #8b5cf6 !important;
   color: white !important;
}

.bg-delivered {
   background-color: #10b981 !important;
   color: white !important;
}

.bg-cancelled {
   background-color: #ef4444 !important;
   color: white !important;
}

.bg-refunded {
   background-color: #ec4899 !important;
   color: white !important;
}

/* Navbar Enhancements */
.store-navbar-minimal {
   background: var(--store-glass-bg);
   backdrop-filter: blur(15px);
   -webkit-backdrop-filter: blur(15px);
   border-bottom: 1px solid var(--store-glass-border);
   padding: 1rem 0;
   position: sticky;
   top: 0;
   z-index: 1000;
}

.store-logo-minimal {
   font-size: 1.5rem;
   font-weight: 800;
   background: var(--store-accent-gradient);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   text-decoration: none;
}

.store-nav-links-minimal a {
   font-weight: 600;
   color: #475569;
   padding: 0.5rem 1rem;
   border-radius: 0.5rem;
   transition: all 0.2s ease;
}

.store-nav-links-minimal a:hover,
.store-nav-links-minimal a.active {
   color: #6366f1;
   background: rgba(99, 102, 241, 0.05);
}

/* Animations */
@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(20px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.animate-fade-up {
   animation: fadeInUp 0.6s ease forwards;
}

/* Cart & Checkout Specifics */
.cart-summary-card {
   background: var(--store-glass-bg) !important;
   border: 1px solid var(--store-glass-border);
   border-radius: var(--store-radius-lg);
   padding: 2rem;
   position: sticky;
   top: 100px;
   box-shadow: var(--store-glass-shadow) !important;
}

.cart-item {
   background: var(--store-glass-bg);
   border-radius: var(--store-radius-lg);
   padding: 1.25rem;
   margin-bottom: 1rem;
   border: 1px solid var(--store-glass-border);
   transition: var(--store-transition);
}

.cart-item:hover {
   box-shadow: var(--shadow-md);
   border-color: var(--store-primary);
   transform: translateX(5px);
}

/* Payment selection card */
.payment-selection-card,
.payment-method-card {
   background: var(--store-glass-bg);
   border: 2px solid var(--store-glass-border);
   border-radius: var(--store-radius-lg);
   transition: var(--store-transition);
   cursor: pointer;
   padding: 1.5rem;
}

.btn-check:checked+.payment-selection-card,
.btn-check:checked+.payment-method-card {
   border-color: var(--store-primary);
   background: rgba(79, 70, 229, 0.05);
   box-shadow: 0 12px 30px rgba(79, 70, 229, 0.1);
}

.btn-check:checked+.payment-selection-card .icon-orb,
.btn-check:checked+.payment-method-card .payment-icon-orb {
   background: var(--store-primary) !important;
   color: white !important;
}

/* Breadcrumb */
.breadcrumb-item a {
   color: var(--store-primary);
   font-weight: 500;
}

/* Global Performance & Smoothness */
:root {
   scroll-behavior: smooth;
   --store-preloader-bg: rgba(255, 255, 255, 0.98);
}

body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
}

/* Premium Page Preloader */
#store-preloader {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--store-bg-base, white);
   z-index: 9999;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader-orb {
   width: 50px;
   height: 50px;
   border: 3px solid rgba(79, 70, 229, 0.1);
   border-top: 3px solid var(--store-primary);
   border-radius: 50%;
   animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes spin {
   0% {
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(360deg);
   }
}

/* Ultra Smooth Interactions */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
   box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1) !important;
   border-color: var(--store-primary) !important;
   transform: translateY(-1px);
}

/* Scroll Polish */
::-webkit-scrollbar {
   width: 8px;
}

::-webkit-scrollbar-track {
   background: var(--store-bg-base, #f8fafc);
}

::-webkit-scrollbar-thumb {
   background: var(--store-secondary);
   border-radius: 10px;
   border: 2px solid var(--store-bg-base, #f8fafc);
}

::-webkit-scrollbar-thumb:hover {
   background: var(--store-primary);
}