/*
 * SHZSOLUTIONS — Premium Enhancements v2
 * Premium visual additions layered on top of main.css
 */

/* ═══════════════════════════════════════════════════════════════
   ADDITIONAL CSS VARIABLES
   ═══════════════════════════════════════════════════════════════ */
:root {
  --accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --accent-gradient-h: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --transition-smooth: all .28s cubic-bezier(.4,0,.2,1);
}

/* ═══════════════════════════════════════════════════════════════
   1. SCROLLBAR — purple accent
   ═══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar-thumb { background: rgba(99,102,241,.3); }
::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,.5); }

/* ═══════════════════════════════════════════════════════════════
   2. SELECTION COLOR
   ═══════════════════════════════════════════════════════════════ */
::selection { background: rgba(99,102,241,.3); color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   3. FOCUS RING — accent color
   ═══════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid rgba(99,102,241,.5);
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   4. HERO — enhanced floating card particles
   ═══════════════════════════════════════════════════════════════ */
.hero-proof-card {
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

/* ═══════════════════════════════════════════════════════════════
   5. SECTION EYEBROW — glowing dot animation
   ═══════════════════════════════════════════════════════════════ */
.section-eyebrow::before {
  animation: pulseDot 2.5s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════
   6. PRODUCT CARDS — shimmer on load
   ═══════════════════════════════════════════════════════════════ */
.product-card {
  animation: fadeUpIn .5s ease both;
}
.product-card:nth-child(2) { animation-delay: .08s; }
.product-card:nth-child(3) { animation-delay: .16s; }
.product-card:nth-child(4) { animation-delay: .24s; }
.product-card:nth-child(5) { animation-delay: .32s; }
.product-card:nth-child(6) { animation-delay: .40s; }

/* ═══════════════════════════════════════════════════════════════
   7. FEATURE CARDS — stagger animation
   ═══════════════════════════════════════════════════════════════ */
.feature-card {
  animation: fadeUpIn .5s ease both;
}
.feature-card:nth-child(2) { animation-delay: .07s; }
.feature-card:nth-child(3) { animation-delay: .14s; }
.feature-card:nth-child(4) { animation-delay: .21s; }
.feature-card:nth-child(5) { animation-delay: .28s; }
.feature-card:nth-child(6) { animation-delay: .35s; }

/* ═══════════════════════════════════════════════════════════════
   8. STEP CARDS — enhanced border glow on hover
   ═══════════════════════════════════════════════════════════════ */
.step-card:hover .step-number {
  box-shadow: 0 0 24px rgba(99,102,241,.5), 0 4px 12px rgba(0,0,0,.4);
}

/* ═══════════════════════════════════════════════════════════════
   9. TESTIMONIAL STARS — enhanced glow
   ═══════════════════════════════════════════════════════════════ */
.testimonial-stars .star {
  display: inline-block;
  animation: starPop .3s ease both;
}
.testimonial-stars .star:nth-child(2) { animation-delay: .04s; }
.testimonial-stars .star:nth-child(3) { animation-delay: .08s; }
.testimonial-stars .star:nth-child(4) { animation-delay: .12s; }
.testimonial-stars .star:nth-child(5) { animation-delay: .16s; }
@keyframes starPop {
  from { transform: scale(0) rotate(-30deg); opacity: 0; }
  to { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   10. FAQ — enhanced open state
   ═══════════════════════════════════════════════════════════════ */
.faq-item.open .faq-question {
  color: var(--white);
}
.faq-item {
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   11. FORM IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════ */
.form-input,
.form-select,
.form-textarea {
  transition: var(--transition-smooth);
}

/* Input icons (prefix/suffix) */
.input-icon-wrap { position: relative; }
.input-icon-wrap .form-input { padding-left: 40px; }
.input-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--gray-500); pointer-events: none; display: flex; align-items: center;
}

/* ═══════════════════════════════════════════════════════════════
   12. CHECKOUT — enhanced submit button animation
   ═══════════════════════════════════════════════════════════════ */
.checkout-submit-btn::before {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
  pointer-events: none;
}
.checkout-submit-btn:hover::before { left: 160%; }

/* ═══════════════════════════════════════════════════════════════
   13. ADMIN SIDEBAR — accent active state
   ═══════════════════════════════════════════════════════════════ */
.sidebar-nav-item.active {
  position: relative;
}

/* ═══════════════════════════════════════════════════════════════
   14. TABLE — improved row hover
   ═══════════════════════════════════════════════════════════════ */
.table tbody tr { transition: background .15s ease; }
.table tbody tr:hover td { background: rgba(99,102,241,.04); }

/* ═══════════════════════════════════════════════════════════════
   15. BUTTON LOADING STATE
   ═══════════════════════════════════════════════════════════════ */
.btn.loading {
  pointer-events: none; opacity: .7;
}
.btn.loading::after {
  content: '';
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  position: absolute; right: 14px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════
   16. SKELETON LOADING
   ═══════════════════════════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius);
}

/* ═══════════════════════════════════════════════════════════════
   17. TOOLTIP
   ═══════════════════════════════════════════════════════════════ */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) scale(.9);
  background: var(--gray-700); color: var(--white);
  font-size: 11.5px; font-weight: 500; padding: 5px 10px;
  border-radius: 7px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 9999;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
[data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) scale(1); }

/* ═══════════════════════════════════════════════════════════════
   18. NOTIFICATION DOT
   ═══════════════════════════════════════════════════════════════ */
.notif-dot {
  display: inline-flex; width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 8px rgba(239,68,68,.6);
  animation: pulseDot 2s infinite;
}

/* ═══════════════════════════════════════════════════════════════
   19. CARD SHINE EFFECT
   ═══════════════════════════════════════════════════════════════ */
.card-shine {
  position: absolute; inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,.06) 50%,
    transparent 60%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.product-card:hover .card-shine,
.feature-card:hover .card-shine { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   20. IMPROVED DASHBOARD TABS
   ═══════════════════════════════════════════════════════════════ */
.sidebar-nav { padding: 4px 8px; }
.sidebar-nav-item {
  border-radius: 10px;
  padding: 10px 12px;
  margin: 1px 0;
}

/* ═══════════════════════════════════════════════════════════════
   21. GLASS BLUR OVERLAY FOR MODALS
   ═══════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal-box {
  background: var(--gray-800);
  border: 1px solid rgba(99,102,241,.2);
  border-radius: var(--radius-xl);
  padding: 36px;
  max-width: 500px; width: 100%;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-lg), var(--accent-glow-sm);
  animation: fadeUpIn .25s ease;
}
.modal-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--gradient-primary); pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   22. FOOTER GRADIENT GLOW
   ═══════════════════════════════════════════════════════════════ */
.footer {
  background:
    linear-gradient(180deg, rgba(3,3,10,0) 0%, rgba(0,0,0,1) 100%),
    var(--black);
}

/* ═══════════════════════════════════════════════════════════════
   23. BACK TO TOP BUTTON
   ═══════════════════════════════════════════════════════════════ */
#backToTop {
  position: fixed; bottom: 28px; right: 28px; z-index: 900;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--gradient-primary);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff; opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  box-shadow: var(--accent-glow-sm), 0 4px 16px rgba(0,0,0,.5);
}
#backToTop.visible { opacity: 1; pointer-events: all; }
#backToTop:hover { transform: translateY(-3px); box-shadow: var(--accent-glow), 0 8px 24px rgba(0,0,0,.5); }

/* ═══════════════════════════════════════════════════════════════
   24. ENHANCED PAGE TRANSITIONS
   ═══════════════════════════════════════════════════════════════ */
.page-enter {
  animation: fadeUpIn .4s cubic-bezier(.4,0,.2,1);
}

/* ═══════════════════════════════════════════════════════════════
   25. LIVE CHAT WIDGET OVERRIDE
   ═══════════════════════════════════════════════════════════════ */
.lc-widget {
  border-radius: 16px !important;
  box-shadow: var(--shadow-lg), var(--accent-glow-sm) !important;
}
.lc-header {
  background: var(--gradient-primary) !important;
}
.lc-send-btn {
  background: var(--gradient-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   26. ORDER SUCCESS PAGE ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════ */
.success-icon {
  animation: successPop .6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes successPop {
  from { transform: scale(0) rotate(-10deg); opacity: 0; }
  to { transform: scale(1) rotate(0deg); opacity: 1; }
}
.success-card {
  animation: fadeUpIn .5s ease;
}

/* ═══════════════════════════════════════════════════════════════
   27. HERO BADGE — number counter shimmer
   ═══════════════════════════════════════════════════════════════ */
.hero-stat-number {
  position: relative;
}

/* ═══════════════════════════════════════════════════════════════
   28. PRODUCT PAGE — feature list
   ═══════════════════════════════════════════════════════════════ */
.feature-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.feature-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--gray-300);
}
.feature-list li::before {
  content: '';
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2.5'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* ═══════════════════════════════════════════════════════════════
   29. PRICING EMPHASIS
   ═══════════════════════════════════════════════════════════════ */
.price-highlight {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900;
  letter-spacing: -1px;
}

/* ═══════════════════════════════════════════════════════════════
   30. NOTIFICATION TOAST
   ═══════════════════════════════════════════════════════════════ */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: var(--gray-800); border: 1px solid rgba(99,102,241,.2);
  border-radius: var(--radius-lg); padding: 14px 22px;
  font-size: 13.5px; font-weight: 500; color: var(--white);
  box-shadow: var(--shadow-lg), var(--accent-glow-sm);
  z-index: 9999;
  animation: toastIn .35s cubic-bezier(.34,1.56,.64,1);
  display: flex; align-items: center; gap: 10px;
  backdrop-filter: blur(20px);
}
@keyframes toastIn {
  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}