/* =========================================================================
   Nova Elements — Main Frontend Stylesheet
   ========================================================================= */

/* ── CSS Variables ─────────────────────────────────────────────────────── */
:root {
  --nova-primary:   #6366f1;
  --nova-secondary: #ec4899;
  --nova-dark:      #0f172a;
  --nova-light:     #f8fafc;
  --nova-radius:    12px;
  --nova-trans:     0.3s ease;
  --nova-shadow:    0 10px 40px rgba(0,0,0,.12);
}

/* ── Base ──────────────────────────────────────────────────────────────── */
.nova-elements *,
.nova-elements *::before,
.nova-elements *::after { box-sizing: border-box; }

/* =========================================================================
   ACCORDION
   ========================================================================= */
.nova-accordion { width: 100%; }
.nova-accordion__item { border-radius: var(--nova-radius); overflow: hidden; }
.nova-accordion__item + .nova-accordion__item { margin-top: 8px; }
.nova-accordion__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; cursor: pointer; user-select: none;
  background: #f8fafc; transition: background var(--nova-trans), color var(--nova-trans);
}
.nova-accordion__header:hover { background: #f1f5f9; }
.nova-accordion__header.nova-active { background: var(--nova-primary); color: #fff; }
.nova-accordion__title { font-weight: 600; flex: 1; }
.nova-accordion__icon { transition: transform var(--nova-trans); }
.nova-accordion__header.nova-active .nova-accordion__icon { transform: rotate(180deg); }
.nova-accordion__body { background: #fff; }
.nova-accordion__body-inner { padding: 20px 24px; }

/* =========================================================================
   TABS
   ========================================================================= */
.nova-advanced-tabs { width: 100%; }
.nova-tab-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }
.nova-tab-nav__item {
  padding: 10px 20px; cursor: pointer; border-radius: 8px;
  transition: all var(--nova-trans); font-weight: 500; user-select: none;
  display: flex; align-items: center; gap: 8px;
}
.nova-tab-nav__item:hover { background: rgba(99,102,241,.08); }
.nova-tab-nav__item.nova-active { background: var(--nova-primary); color: #fff; }

/* Pills */
.nova-tabs--pills .nova-tab-nav { background: #f1f5f9; padding: 4px; border-radius: 10px; display: inline-flex; }
.nova-tabs--pills .nova-tab-nav__item.nova-active { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.1); color: var(--nova-primary); }

/* Underline */
.nova-tabs--underline .nova-tab-nav { border-bottom: 2px solid #e2e8f0; gap: 0; }
.nova-tabs--underline .nova-tab-nav__item { border-radius: 0; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.nova-tabs--underline .nova-tab-nav__item.nova-active { border-bottom-color: var(--nova-primary); background: transparent; color: var(--nova-primary); }

/* Vertical */
.nova-tabs--vertical { display: flex; gap: 20px; }
.nova-tabs--vertical .nova-tab-nav { flex-direction: column; min-width: 180px; }
.nova-tabs--vertical .nova-tab-content-wrap { flex: 1; }

/* =========================================================================
   HOTSPOT
   ========================================================================= */
.nova-hotspot-wrap { position: relative; display: inline-block; width: 100%; }
.nova-hotspot-image { width: 100%; display: block; }
.nova-hotspot__point { position: absolute; transform: translate(-50%, -50%); z-index: 10; }
.nova-hotspot__dot {
  width: 30px; height: 30px; border-radius: 50%; background: var(--nova-primary);
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; transition: transform var(--nova-trans);
  text-decoration: none; font-size: 14px;
}
.nova-hotspot__dot:hover { transform: scale(1.2); }

/* Pulse */
.nova-pulse .nova-hotspot__dot::before,
.nova-pulse .nova-hotspot__dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: inherit; animation: nova-pulse 2s ease-out infinite;
}
.nova-pulse .nova-hotspot__dot::after { animation-delay: 0.5s; }
@keyframes nova-pulse { 0%{transform:scale(1);opacity:.8} 100%{transform:scale(2.5);opacity:0} }

.nova-hotspot__tooltip {
  position: absolute; background: #1e293b; color: #fff; padding: 10px 14px;
  border-radius: 8px; min-width: 160px; max-width: 260px; pointer-events: none;
  opacity: 0; transition: opacity var(--nova-trans), transform var(--nova-trans);
  z-index: 100; font-size: 13px; box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.nova-hotspot__tooltip::before {
  content: ''; position: absolute; border: 6px solid transparent;
}
.nova-tooltip--top    { bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(6px); }
.nova-tooltip--bottom { top: calc(100% + 12px);    left: 50%; transform: translateX(-50%) translateY(-6px); }
.nova-tooltip--left   { right: calc(100% + 12px);  top: 50%; transform: translateY(-50%) translateX(6px); }
.nova-tooltip--right  { left: calc(100% + 12px);   top: 50%; transform: translateY(-50%) translateX(-6px); }
.nova-tooltip--top::before    { top: 100%;  left:50%;transform:translateX(-50%); border-top-color:#1e293b; }
.nova-tooltip--bottom::before { bottom:100%;left:50%;transform:translateX(-50%); border-bottom-color:#1e293b; }
.nova-hotspot__point:hover .nova-hotspot__tooltip { opacity: 1; transform: translateX(-50%) translateY(0); }
.nova-hotspot__label { font-weight: 600; margin-bottom: 4px; }

/* =========================================================================
   GALLERY
   ========================================================================= */
.nova-gallery-grid { display: grid; }
.nova-gallery-item { position: relative; overflow: hidden; }
.nova-gallery-item img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.5s ease; }
.nova-gallery-overlay {
  position: absolute; inset: 0; background: rgba(99,102,241,.75);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--nova-trans);
  flex-direction: column; gap: 8px; color: #fff;
}
.nova-gallery-item:hover .nova-gallery-overlay { opacity: 1; }
.nova-gallery-zoom { font-size: 32px; font-weight: 300; line-height: 1; }
.nova-hover-zoom-in:hover img { transform: scale(1.08); }
.nova-hover-zoom-out img { transform: scale(1.08); }
.nova-hover-zoom-out:hover img { transform: scale(1); }
.nova-hover-grayscale img { filter: grayscale(1); transition: filter var(--nova-trans); }
.nova-hover-grayscale:hover img { filter: grayscale(0); }
.nova-hover-blur:hover img { filter: blur(4px); }
.nova-hover-sepia:hover img { filter: sepia(1); }
.nova-gallery-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.nova-filter-btn { padding: 6px 16px; border-radius: 50px; border: 2px solid #e2e8f0; background: transparent; cursor: pointer; transition: all var(--nova-trans); font-size: 14px; }
.nova-filter-btn:hover, .nova-filter-btn.nova-active { background: var(--nova-primary); color: #fff; border-color: var(--nova-primary); }
.nova-gallery-loadmore-wrap { text-align: center; margin-top: 32px; }

/* =========================================================================
   CREATIVE BUTTON
   ========================================================================= */
.nova-btn-wrap { display: flex; }
.nova-creative-btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-weight: 600; cursor: pointer; position: relative; overflow: hidden;
  transition: all var(--nova-trans); z-index: 1;
  background: var(--nova-primary); color: #fff; border: 2px solid transparent;
  border-radius: 8px; padding: 12px 28px;
}

/* Sizes */
.nova-btn--xs { padding: 6px 14px; font-size: 12px; }
.nova-btn--sm { padding: 8px 18px; font-size: 13px; }
.nova-btn--md { padding: 12px 28px; font-size: 15px; }
.nova-btn--lg { padding: 16px 36px; font-size: 17px; }
.nova-btn--xl { padding: 20px 48px; font-size: 19px; }

/* Hover BG fill */
.nova-creative-btn .nova-btn-bg {
  position: absolute; inset: 0; z-index: -1;
  transform: translateX(-101%); transition: transform 0.4s cubic-bezier(.77,0,.175,1);
  background: rgba(0,0,0,.15);
}
.nova-btn-hover--fill-slide:hover .nova-btn-bg { transform: translateX(0); }
.nova-btn-hover--fill-diagonal .nova-btn-bg { transform: skewX(-20deg) translateX(-120%); }
.nova-btn-hover--fill-diagonal:hover .nova-btn-bg { transform: skewX(-20deg) translateX(0); }

/* Ripple */
.nova-btn-hover--ripple { overflow: hidden; }
.nova-btn-ripple {
  position: absolute; border-radius: 50%; background: rgba(255,255,255,.4);
  transform: scale(0); pointer-events: none; animation: none;
}
.nova-btn-ripple.nova-ripple-active { animation: nova-ripple 0.6s ease-out; }
@keyframes nova-ripple { 0%{transform:scale(0);opacity:1} 100%{transform:scale(4);opacity:0} }

/* Glow */
.nova-btn-hover--glow:hover { box-shadow: 0 0 20px var(--nova-primary), 0 0 40px rgba(99,102,241,.4); }

/* Border expand */
.nova-btn-hover--border-expand { background: transparent; border-color: var(--nova-primary); color: var(--nova-primary); }
.nova-btn-hover--border-expand:hover { background: var(--nova-primary); color: #fff; }

/* =========================================================================
   IMAGE SWAP
   ========================================================================= */
.nova-image-swap { position: relative; overflow: hidden; display: inline-block; width: 100%; }
.nova-swap-before, .nova-swap-after { width: 100%; }
.nova-swap-before img, .nova-swap-after img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nova-swap--hover .nova-swap-after,
.nova-swap--fade .nova-swap-after { position: absolute; inset: 0; opacity: 0; transition: opacity var(--nova-trans); }
.nova-swap--hover:hover .nova-swap-after,
.nova-swap--fade:hover .nova-swap-after { opacity: 1; }
.nova-swap--zoom-in:hover img { transform: scale(1.06); transition: transform 0.4s ease; }
.nova-swap--slide-up .nova-swap-after { transform: translateY(100%); transition: transform 0.4s ease; position: absolute; inset: 0; }
.nova-swap--slide-up:hover .nova-swap-after { transform: translateY(0); }

/* Slider mode */
.nova-swap--slider .nova-swap-before { position: relative; user-select: none; }
.nova-swap--slider .nova-swap-after { position: absolute; inset: 0; overflow: hidden; width: 50%; }
.nova-swap-handle { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 44px; cursor: ew-resize; display: flex; align-items: center; justify-content: center; z-index: 5; }
.nova-swap-handle-circle { width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; }
.nova-swap-handle-circle svg { width: 20px; height: 20px; stroke: #64748b; stroke-width: 2; fill: none; }
.nova-swap-label { position: absolute; bottom: 12px; background: rgba(0,0,0,.6); color: #fff; padding: 4px 10px; font-size: 12px; border-radius: 4px; }
.nova-swap-before .nova-swap-label { left: 12px; }
.nova-swap-after .nova-swap-label { right: 12px; }

/* 3D Flip */
.nova-swap--flip { perspective: 1000px; }
.nova-swap--flip .nova-swap-before, .nova-swap--flip .nova-swap-after { backface-visibility: hidden; transition: transform 0.6s ease; }
.nova-swap--flip .nova-swap-after { position: absolute; inset: 0; transform: rotateY(180deg); }
.nova-swap--flip:hover .nova-swap-before { transform: rotateY(-180deg); }
.nova-swap--flip:hover .nova-swap-after { transform: rotateY(0); }

/* =========================================================================
   ADVANCED SLIDER
   ========================================================================= */
.nova-slider-wrap { width: 100%; position: relative; overflow: hidden; }
.nova-slide { display: flex; align-items: center; justify-content: center; position: relative; background-size: cover; background-position: center; }
.nova-slide-overlay { position: absolute; inset: 0; }
.nova-slide-content { position: relative; z-index: 2; text-align: center; padding: 40px; max-width: 700px; }
.nova-slide-title { font-size: clamp(28px, 5vw, 64px); font-weight: 800; line-height: 1.15; margin-bottom: 16px; }
.nova-slide-desc { font-size: 18px; margin-bottom: 28px; opacity: .9; }
.nova-slide-btn { display: inline-block; padding: 14px 36px; background: var(--nova-primary); color: #fff; border-radius: 8px; text-decoration: none; font-weight: 600; transition: all var(--nova-trans); }
.nova-slide-btn:hover { background: #4f46e5; transform: translateY(-2px); }

/* Animation classes */
.nova-anim--fadeInUp { animation: nova-fadeInUp 0.7s both; }
.nova-anim--fadeIn   { animation: nova-fadeIn   0.7s both; }
.nova-anim--zoomIn   { animation: nova-zoomIn   0.7s both; }
@keyframes nova-fadeInUp { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
@keyframes nova-fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes nova-zoomIn   { from{opacity:0;transform:scale(.8)} to{opacity:1;transform:scale(1)} }

/* =========================================================================
   IMAGE HOVER EFFECTS
   ========================================================================= */
.nova-img-hover-wrap { position: relative; overflow: hidden; display: block; }
.nova-img-hover-wrap img { width: 100%; display: block; transition: transform 0.5s ease, filter 0.5s ease; }
.nova-img-hover-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 24px; opacity: 0; transition: opacity 0.4s ease, transform 0.4s ease;
  background: rgba(99,102,241,.85); color: #fff;
}
.nova-img-hover-wrap:hover .nova-img-hover-overlay { opacity: 1; }
.nova-img-hover-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.nova-img-hover-desc { font-size: 14px; opacity: .9; }
.nova-hover-zoom-in:hover img { transform: scale(1.1); }
.nova-hover-slide-up .nova-img-hover-overlay { transform: translateY(100%); }
.nova-hover-slide-up:hover .nova-img-hover-overlay { transform: translateY(0); opacity: 1; }
.nova-hover-rotate:hover img { transform: scale(1.1) rotate(3deg); }
.nova-hover-tilt { transform-style: preserve-3d; }

/* =========================================================================
   FANCY ANIMATED TEXT
   ========================================================================= */
.nova-fancy-text-wrap { line-height: 1.3; }
.nova-fancy-rotating { display: inline-block; min-width: 2ch; }
.nova-fancy-cursor { display: inline-block; animation: nova-blink 0.8s step-end infinite; }
@keyframes nova-blink { 50%{opacity:0} }

/* Highlight */
.nova-fancy-highlight { position: relative; display: inline-block; }
.nova-fancy-highlight::after {
  content: ''; position: absolute; left: 0; bottom: -3px; height: 3px;
  width: 0; background: var(--nova-primary); transition: width 0.4s ease;
}
.nova-fancy-highlight.nova-highlight-active::after { width: 100%; }

/* =========================================================================
   IMAGE MORPHING
   ========================================================================= */
.nova-morph-wrap { overflow: hidden; margin: 0 auto; }
.nova-morph-svg { width: 100%; height: auto; display: block; }

/* =========================================================================
   CIRCLE MENU
   ========================================================================= */
.nova-circle-menu { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.nova-circle-trigger {
  border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 22px; border: none; transition: transform var(--nova-trans), background var(--nova-trans);
  position: relative; z-index: 10;
}
.nova-circle-trigger:hover { transform: scale(1.1); }
.nova-circle-trigger.nova-active { transform: rotate(45deg) scale(1.1); }
.nova-circle-items { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.nova-circle-item {
  position: absolute; top: 50%; left: 50%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s cubic-bezier(.77,0,.175,1), opacity 0.3s;
  opacity: 0; pointer-events: none; font-size: 18px; box-shadow: var(--nova-shadow);
}
.nova-circle-item a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; text-decoration: none; color: inherit; }
.nova-circle-menu.nova-open .nova-circle-item { opacity: 1; pointer-events: auto; }
.nova-circle-tooltip { position: absolute; white-space: nowrap; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #1e293b; color: #fff; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity var(--nova-trans); }
.nova-circle-item:hover .nova-circle-tooltip { opacity: 1; }

/* =========================================================================
   PRODUCT FILTER
   ========================================================================= */
.nova-product-filter-wrap { width: 100%; }
.nova-filter-layout--left,
.nova-filter-layout--right { display: flex; gap: 32px; }
.nova-filter-sidebar { min-width: 220px; }
.nova-filter-layout--right .nova-filter-main { order: -1; }
.nova-filter-main { flex: 1; }
.nova-filter-controls { margin-bottom: 20px; }
.nova-products-grid { display: grid; gap: 24px; }
.nova-product-card { background: #fff; border-radius: 12px; overflow: hidden; transition: box-shadow var(--nova-trans), transform var(--nova-trans); }
.nova-product-card:hover { box-shadow: var(--nova-shadow); transform: translateY(-4px); }
.nova-card--shadow { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.nova-card--bordered { border: 1px solid #e2e8f0; }
.nova-product-img { position: relative; overflow: hidden; aspect-ratio: 1; }
.nova-product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.nova-product-card:hover .nova-product-img img { transform: scale(1.05); }
.nova-product-info { padding: 16px; }
.nova-product-title { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.nova-product-title a { text-decoration: none; color: inherit; }
.nova-product-price { font-size: 18px; font-weight: 700; color: var(--nova-primary); margin-bottom: 12px; }
.nova-quickview-btn { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(99,102,241,.9); color: #fff; border: none; padding: 10px; font-weight: 600; cursor: pointer; transform: translateY(100%); transition: transform var(--nova-trans); font-size: 13px; }
.nova-product-card:hover .nova-quickview-btn { transform: translateY(0); }

/* =========================================================================
   VERTICAL TEXT
   ========================================================================= */
.nova-vertical-text-wrap { display: inline-flex; }
.nova-vertical-text { display: block; white-space: nowrap; }

/* =========================================================================
   LIQUID GLASS
   ========================================================================= */
.nova-glass-wrap { position: relative; padding: 60px 40px; overflow: hidden; border-radius: 20px; }
.nova-glass-card {
  position: relative; z-index: 2; border-radius: 20px; border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 8px 32px rgba(0,0,0,.2); text-align: center;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  background: rgba(255,255,255,.15); color: #fff; padding: 40px;
}
.nova-glass-icon { font-size: 40px; margin-bottom: 16px; }
.nova-glass-title { font-size: 26px; font-weight: 700; margin: 0 0 12px; }
.nova-glass-desc { opacity: .9; line-height: 1.6; margin-bottom: 24px; }
.nova-glass-btn { display: inline-block; padding: 12px 28px; border-radius: 50px; border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.2); color: #fff; text-decoration: none; font-weight: 600; transition: all var(--nova-trans); backdrop-filter: blur(8px); }
.nova-glass-btn:hover { background: rgba(255,255,255,.35); transform: translateY(-2px); }
.nova-glass-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5; z-index: 1; }
.nova-glass-blob--1 { width: 300px; height: 300px; background: var(--nova-primary); top: -80px; left: -80px; animation: nova-blob-move 8s ease-in-out infinite alternate; }
.nova-glass-blob--2 { width: 250px; height: 250px; background: var(--nova-secondary); bottom: -60px; right: -60px; animation: nova-blob-move 10s ease-in-out infinite alternate-reverse; }
@keyframes nova-blob-move { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(40px,30px) scale(1.15)} }

/* =========================================================================
   IMAGE MASKING
   ========================================================================= */
.nova-mask-wrap { overflow: hidden; display: inline-block; }
.nova-mask-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.nova-mask-wrap:hover img { transform: scale(1.05); }

/* =========================================================================
   PARTICLE BACKGROUND
   ========================================================================= */
.nova-particles-wrap { position: relative; overflow: hidden; width: 100%; }
.nova-particles-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.nova-particles-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; padding: 40px; color: #fff; }
.nova-particles-title { font-size: clamp(32px, 6vw, 72px); font-weight: 800; margin-bottom: 16px; }
.nova-particles-subtitle { font-size: 18px; opacity: .85; margin-bottom: 32px; max-width: 600px; }

/* =========================================================================
   CONTENT PROTECTION
   ========================================================================= */
.nova-protect-screen { text-align: center; padding: 60px 40px; background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%); border-radius: 16px; }
.nova-protect-icon { font-size: 56px; color: var(--nova-primary); margin-bottom: 20px; }
.nova-protect-title { font-size: 24px; font-weight: 700; margin-bottom: 12px; }
.nova-protect-desc { color: #64748b; margin-bottom: 24px; }
.nova-protect-form { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 320px; margin: 0 auto; }
.nova-protect-input { width: 100%; padding: 12px 16px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 15px; transition: border-color var(--nova-trans); outline: none; }
.nova-protect-input:focus { border-color: var(--nova-primary); }
.nova-protect-submit { width: 100%; }
.nova-protect-error { color: #ef4444; font-size: 14px; font-weight: 500; }

/* =========================================================================
   HOVER INTERACTION
   ========================================================================= */
.nova-hover-interact { display: inline-block; transition: transform 0.15s ease; will-change: transform; }
.nova-hover-interact img { pointer-events: none; display: block; width: 100%; }
.nova-glow-follow { position: absolute; width: 400px; height: 400px; border-radius: 50%; pointer-events: none; transform: translate(-50%,-50%); filter: blur(80px); opacity: 0; transition: opacity var(--nova-trans); z-index: 0; }

/* =========================================================================
   MOTION EFFECTS (Extension)
   ========================================================================= */
.nova-motion-fx { will-change: transform, opacity; }

/* =========================================================================
   PARALLAX (Extension)
   ========================================================================= */
.nova-parallax-section { overflow: hidden; }
.nova-parallax-bg { position: absolute; inset: -30%; z-index: 0; background-size: cover; background-position: center; will-change: transform; }

/* =========================================================================
   STICKY SECTION (Extension)
   ========================================================================= */
.nova-sticky-wrap { transition: box-shadow 0.3s ease; }
.nova-is-sticky { position: fixed; left: 0; right: 0; z-index: 100; }
.nova-is-sticky.nova-sticky-scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.12); }

/* =========================================================================
   SHAPE DIVIDER (Extension)
   ========================================================================= */
.nova-has-shape-divider { position: relative; }
.nova-shape-divider { position: absolute; left: 0; right: 0; overflow: hidden; line-height: 0; z-index: 2; }
.nova-shape-divider--top { top: 0; }
.nova-shape-divider--bottom { bottom: 0; }
.nova-shape-divider svg { width: 100%; display: block; }
.nova-shape-invert svg { transform: scaleX(-1); }
.nova-shape-animated svg { animation: nova-wave-anim 6s ease-in-out infinite alternate; }
@keyframes nova-wave-anim { 0%{transform:scaleX(1)} 100%{transform:scaleX(1.05) scaleY(1.04)} }

/* =========================================================================
   ONE PAGE SCROLL (Extension)
   ========================================================================= */
.nova-ops-slide { height: 100vh; overflow: hidden; }
.nova-ops-dots { position: fixed; right: 24px; top: 50%; transform: translateY(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
.nova-ops-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); cursor: pointer; transition: all var(--nova-trans); }
.nova-ops-dot.nova-active { background: #fff; transform: scale(1.3); }

/* =========================================================================
   CUSTOM CURSOR (Widget)
   ========================================================================= */
.nova-cursor-hidden * { cursor: none !important; }
.nova-cursor {
  position: fixed; pointer-events: none; z-index: 99999;
  border-radius: 50%; transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, opacity 0.2s;
  will-change: left, top;
}
.nova-cursor--circle { border: 2px solid currentColor; background: transparent; }
.nova-cursor--dot { background: currentColor; }
.nova-cursor--ring { border: 3px solid currentColor; background: transparent; width: 36px; height: 36px; }
.nova-cursor-trail { position: fixed; pointer-events: none; z-index: 99998; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0.4; }

/* =========================================================================
   GENERAL UTILITIES
   ========================================================================= */
.nova-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 28px; border-radius: 8px; font-weight: 600; text-decoration: none;
  cursor: pointer; border: none; background: var(--nova-primary); color: #fff;
  transition: all var(--nova-trans); font-size: 15px;
}
.nova-btn:hover { background: #4f46e5; transform: translateY(-2px); box-shadow: 0 4px 20px rgba(99,102,241,.35); }
.nova-notice { padding: 16px 20px; background: #fef3c7; border-left: 4px solid #f59e0b; color: #92400e; border-radius: 4px; font-size: 14px; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
  .nova-filter-layout--left, .nova-filter-layout--right { flex-direction: column; }
  .nova-filter-sidebar { min-width: unset; }
}
@media (max-width: 768px) {
  .nova-accordion__header { padding: 14px 18px; }
  .nova-tab-nav { flex-wrap: wrap; }
  .nova-tabs--vertical { flex-direction: column; }
  .nova-glass-wrap { padding: 40px 20px; }
  .nova-glass-card { padding: 28px 20px; }
  .nova-ops-dots { right: 12px; }
  .nova-circle-menu .nova-circle-tooltip { display: none; }
}