/* ===================================================================
   NavStyle Pro — Footer Bar  (fb-pro.css v2.0)
   =================================================================== */

/* ── CSS Variables (จะถูก override ผ่าน inline style จาก PHP) ── */
#nspro-bar {
  --ns-bg: #1d1e22;
  --ns-border: #ff00aa;
}

/* ── Fixed bar wrapper ── */
#nspro-bar {
  position: fixed;
  left: 0; right: 0;
  bottom: env(safe-area-inset-bottom, 0);
  z-index: 9999;
  background: transparent;
}

@media (min-width: 768px) {
  #nspro-bar { display: none; }
}

/* ── Nav container (shared by frontend + admin preview) ── */
.nspro-nav {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: clamp(8px,2vw,12px) clamp(10px,3.5vw,20px) 4px;
  gap: clamp(3px,1.2vw,6px);
  position: relative;
  overflow: visible;
}

/* ═══════════════════════════════════════════════════════
   STYLE 1 — Classic Rounded (default)
═══════════════════════════════════════════════════════ */
.nspro-nav[data-style="1"] {
  background: linear-gradient(180deg, var(--ns-bg) 0%, #0d0d0d 100%);
  border-top: 2px solid var(--ns-border);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -4px 20px rgba(0,0,0,.78);
}

/* ═══════════════════════════════════════════════════════
   STYLE 2 — Flat Minimal
═══════════════════════════════════════════════════════ */
.nspro-nav[data-style="2"] {
  background: var(--ns-bg);
  border-top: 3px solid var(--ns-border);
  border-radius: 0;
  box-shadow: 0 -2px 10px rgba(0,0,0,.6);
}

/* ═══════════════════════════════════════════════════════
   STYLE 3 — Glassmorphism
═══════════════════════════════════════════════════════ */
.nspro-nav[data-style="3"] {
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(22px) saturate(200%);
  -webkit-backdrop-filter: blur(22px) saturate(200%);
  border-top: 1px solid rgba(255,255,255,0.18);
  border-left: 1px solid rgba(255,255,255,0.1);
  border-right: 1px solid rgba(255,255,255,0.1);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -8px 32px rgba(0,0,0,.35);
}

/* ═══════════════════════════════════════════════════════
   STYLE 4 — Neon Cyberpunk
═══════════════════════════════════════════════════════ */
.nspro-nav[data-style="4"] {
  background: #050508;
  border-top: 2px solid var(--ns-border);
  border-radius: 0;
  box-shadow:
    0 -2px 18px var(--ns-border),
    0 -12px 52px rgba(255,0,170,0.22),
    inset 0 1px 0 rgba(255,0,170,0.18);
}
.nspro-nav[data-style="4"]::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 1px;
  background: var(--ns-border);
  box-shadow: 0 0 14px 3px var(--ns-border);
  animation: nsNeonFlicker 4s ease-in-out infinite;
}
@keyframes nsNeonFlicker {
  0%,100%{opacity:1} 91%{opacity:1} 92%{opacity:.35} 93%{opacity:1} 95%{opacity:.55} 96%{opacity:1}
}

/* ═══════════════════════════════════════════════════════
   STYLE 5 — Metallic Gradient
═══════════════════════════════════════════════════════ */
.nspro-nav[data-style="5"] {
  background: linear-gradient(180deg,
    rgba(160,160,160,0.15) 0%,
    var(--ns-bg) 35%,
    rgba(0,0,0,0.35) 100%);
  border-top: 2px solid var(--ns-border);
  border-radius: 18px 18px 0 0;
  box-shadow:
    0 -4px 24px rgba(0,0,0,.82),
    inset 0 1px 0 rgba(255,255,255,.1);
}

/* ═══════════════════════════════════════════════════════
   STYLE 6 — Dark Card with Border
═══════════════════════════════════════════════════════ */
.nspro-nav[data-style="6"] {
  background: var(--ns-bg);
  border: 1.5px solid var(--ns-border);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  box-shadow:
    0 -8px 40px rgba(0,0,0,.9),
    0 -2px 14px rgba(255,0,170,0.22);
}

/* ═══════════════════════════════════════════════════════
   STYLE 7 — Vivid Gradient Background
═══════════════════════════════════════════════════════ */
.nspro-nav[data-style="7"] {
  background: linear-gradient(135deg,
    var(--ns-border) 0%,
    var(--ns-bg) 48%,
    var(--ns-border) 100%);
  border-top: none;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -6px 30px rgba(0,0,0,.72);
  opacity: .96;
}

/* ═══════════════════════════════════════════════════════
   STYLE 8 — Floating Islands
═══════════════════════════════════════════════════════ */
.nspro-nav[data-style="8"] {
  background: transparent;
  border: none;
  padding: 0 6px 10px;
  gap: 5px;
  align-items: flex-end;
}
.nspro-nav[data-style="8"] .nspro-item .nspro-inner {
  background: var(--ns-bg) !important;
  border: 1px solid var(--ns-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.68) !important;
  margin: 0 !important;
}

/* ════════════════════════════════
   ITEM
════════════════════════════════ */
.nspro-item {
  flex: 1;
  text-decoration: none;
  color: inherit;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.nspro-inner {
  width: 100%;
  height: clamp(52px,13.5vw,60px);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2px,.8vw,5px);
  background: transparent;
  transition: transform .2s ease;
}

.nspro-icon img {
  width: clamp(24px,6.5vw,30px);
  height: auto;
  display: block;
  transition: transform .2s ease;
}

.nspro-label {
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* ════════════════════════════════
   ACTIVE / CENTER BUTTON
════════════════════════════════ */
.nspro-item.is-active {
  position: relative;
  z-index: 10;
}

.nspro-item.is-active .nspro-inner {
  background: var(--ns-bg);
  border: 2px solid var(--ns-border);
  border-radius: 18px;
  transform: translateY(clamp(-22px,-5.5vw,-14px));
  height: clamp(70px,18.5vw,84px);
  width: clamp(90px,23.5vw,112px);
  box-shadow:
    0 0 14px rgba(255,0,170,.55),
    0 0 36px rgba(255,0,170,.28),
    0 -6px 18px rgba(0,0,0,.88);
  animation: nsActivePulse 2.5s ease-in-out infinite;
}

.nspro-item.is-active .nspro-icon img {
  width: clamp(36px,9.5vw,46px);
  transform: scale(1.08);
}
.nspro-item.is-active:hover .nspro-icon img {
  transform: scale(1.2);
}

.nspro-item.is-active::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 6px;
  width: 130%; height: 88%;
  transform: translateX(-50%);
  border-radius: 20px;
  background: radial-gradient(circle, rgba(255,0,170,.38) 0%, transparent 72%);
  filter: blur(14px);
  z-index: -1;
  animation: nsActiveGlow 2.5s ease-in-out infinite;
}

@keyframes nsActivePulse {
  0%,100% { transform: translateY(clamp(-22px,-5.5vw,-14px)) scale(1); }
  50%     { transform: translateY(clamp(-26px,-6.2vw,-18px)) scale(1.05); }
}
@keyframes nsActiveGlow {
  0%,100% { opacity:.45; filter:blur(14px); }
  50%     { opacity:.88; filter:blur(17px); }
}

.nspro-item.is-active:active .nspro-inner {
  transform: translateY(clamp(-18px,-4.5vw,-11px)) scale(.97);
}

/* ══════════════════════════════════════════════════════
   ANIMATION EFFECTS
══════════════════════════════════════════════════════ */

/* ── pulse ── ขยับขึ้นลง */
.nspro-item:not(.is-active).ns-fx-pulse .nspro-inner {
  animation: nsFxPulseNorm 2s ease-in-out infinite;
}
@keyframes nsFxPulseNorm {
  0%,100% { transform:translateY(0) scale(1); }
  50%     { transform:translateY(-5px) scale(1.05); }
}
.nspro-item.is-active.ns-fx-pulse .nspro-inner {
  animation: nsActivePulse 1.8s ease-in-out infinite !important;
}

/* ── bounce ── เด้ง */
.nspro-item:not(.is-active).ns-fx-bounce .nspro-inner {
  animation: nsFxBounce 1.3s cubic-bezier(.28,.84,.42,1) infinite;
}
@keyframes nsFxBounce {
  0%,100%{ transform:translateY(0); }
  40%    { transform:translateY(-11px); }
  60%    { transform:translateY(-5px); }
}
.nspro-item.is-active.ns-fx-bounce .nspro-inner {
  animation: nsFxBounceActive 1.3s cubic-bezier(.28,.84,.42,1) infinite;
}
@keyframes nsFxBounceActive {
  0%,100%{ transform:translateY(clamp(-22px,-5.5vw,-14px)) scale(1); }
  40%    { transform:translateY(clamp(-34px,-8vw,-25px)) scale(1.05); }
  60%    { transform:translateY(clamp(-27px,-6.2vw,-19px)) scale(1.02); }
}

/* ── shake ── สั่น */
.nspro-item:not(.is-active).ns-fx-shake .nspro-inner {
  animation: nsFxShake 1.8s ease infinite;
}
@keyframes nsFxShake {
  0%,100%{ transform:translateX(0); }
  20%    { transform:translateX(-4px) rotate(-3deg); }
  40%    { transform:translateX(4px)  rotate(3deg);  }
  60%    { transform:translateX(-3px) rotate(-2deg); }
  80%    { transform:translateX(3px)  rotate(2deg);  }
}
.nspro-item.is-active.ns-fx-shake .nspro-inner {
  animation: nsFxShakeActive 1.8s ease infinite;
}
@keyframes nsFxShakeActive {
  0%,100%{ transform:translateY(clamp(-22px,-5.5vw,-14px)) translateX(0); }
  20%    { transform:translateY(clamp(-22px,-5.5vw,-14px)) translateX(-4px) rotate(-3deg); }
  40%    { transform:translateY(clamp(-22px,-5.5vw,-14px)) translateX(4px)  rotate(3deg);  }
  60%    { transform:translateY(clamp(-22px,-5.5vw,-14px)) translateX(-3px) rotate(-2deg); }
  80%    { transform:translateY(clamp(-22px,-5.5vw,-14px)) translateX(3px)  rotate(2deg);  }
}

/* ── glow ── เรืองแสง */
.ns-fx-glow .nspro-inner {
  animation: nsFxGlow 2s ease-in-out infinite;
}
@keyframes nsFxGlow {
  0%,100%{ box-shadow:0 0 5px rgba(255,0,170,.3); }
  50%    { box-shadow:0 0 24px rgba(255,0,170,.9),0 0 48px rgba(255,0,170,.45); }
}

/* ── swing ── แกว่ง */
.ns-fx-swing .nspro-icon {
  animation: nsFxSwing 2.2s ease-in-out infinite;
  transform-origin: center top;
  display: inline-block;
}
@keyframes nsFxSwing {
  0%,100%{ transform:rotate(0); }
  25%    { transform:rotate(11deg); }
  75%    { transform:rotate(-11deg); }
}

/* ── tada ── ดึงดูด */
.nspro-item:not(.is-active).ns-fx-tada .nspro-inner {
  animation: nsFxTada 2.2s ease infinite;
}
@keyframes nsFxTada {
  0%,100%          { transform:scale(1) rotate(0); }
  10%,20%          { transform:scale(.93) rotate(-4deg); }
  30%,50%,70%,90%  { transform:scale(1.06) rotate(4deg); }
  40%,60%,80%      { transform:scale(1.06) rotate(-4deg); }
}
.nspro-item.is-active.ns-fx-tada .nspro-inner {
  animation: nsFxTadaActive 2.2s ease infinite;
}
@keyframes nsFxTadaActive {
  0%,100%          { transform:translateY(clamp(-22px,-5.5vw,-14px)) scale(1) rotate(0); }
  10%,20%          { transform:translateY(clamp(-22px,-5.5vw,-14px)) scale(.94) rotate(-4deg); }
  30%,50%,70%,90%  { transform:translateY(clamp(-26px,-6vw,-18px))  scale(1.06) rotate(4deg); }
  40%,60%,80%      { transform:translateY(clamp(-26px,-6vw,-18px))  scale(1.06) rotate(-4deg); }
}

/* ── wobble ── โยกเยก */
.nspro-item:not(.is-active).ns-fx-wobble .nspro-inner {
  animation: nsFxWobble 2s ease infinite;
}
@keyframes nsFxWobble {
  0%,100%{ transform:translateX(0) rotate(0); }
  15%    { transform:translateX(-6px) rotate(-4deg); }
  30%    { transform:translateX(5px)  rotate(3deg);  }
  45%    { transform:translateX(-4px) rotate(-2deg); }
  60%    { transform:translateX(3px)  rotate(1.5deg);}
  75%    { transform:translateX(-1px) rotate(-1deg); }
}
.nspro-item.is-active.ns-fx-wobble .nspro-inner {
  animation: nsFxWobbleActive 2s ease infinite;
}
@keyframes nsFxWobbleActive {
  0%,100%{ transform:translateY(clamp(-22px,-5.5vw,-14px)) translateX(0) rotate(0); }
  15%    { transform:translateY(clamp(-22px,-5.5vw,-14px)) translateX(-6px) rotate(-4deg); }
  30%    { transform:translateY(clamp(-22px,-5.5vw,-14px)) translateX(5px)  rotate(3deg);  }
  45%    { transform:translateY(clamp(-22px,-5.5vw,-14px)) translateX(-4px) rotate(-2deg); }
  60%    { transform:translateY(clamp(-22px,-5.5vw,-14px)) translateX(3px)  rotate(1.5deg);}
  75%    { transform:translateY(clamp(-22px,-5.5vw,-14px)) translateX(-1px) rotate(-1deg); }
}

/* ── flash ── กระพริบ */
.ns-fx-flash .nspro-icon img {
  animation: nsFxFlash 1.6s ease-in-out infinite;
}
@keyframes nsFxFlash {
  0%,100%{opacity:1}  25%{opacity:.2}  50%{opacity:1}  75%{opacity:.2}
}