/**
 * DS Mobile Menu — Layout: Premium App
 *
 * Native-app feel with a card background on the active item,
 * icon micro-animation, and iPhone notch support.
 *
 * @package DSMobileMenu
 * @since   1.0.0
 */

#dsmm-nav.dsmm-layout-premium-app,
.dsmm-nav.dsmm-layout-premium-app {
  background:     var(--dsmm-bg);
  border-top:     1px solid var(--dsmm-border);
  box-shadow:     0 -4px 24px rgba(0, 0, 0, 0.1);
}

.dsmm-layout-premium-app .dsmm-nav__link {
  border-radius:  14px;
  position:       relative;
  overflow:       hidden;
  transition:     background var(--dsmm-transition), color var(--dsmm-transition), transform var(--dsmm-transition);
  margin:         6px 4px;
}

/* Ripple on tap */
.dsmm-layout-premium-app .dsmm-nav__link::after {
  content:         '';
  position:        absolute;
  inset:           0;
  border-radius:   inherit;
  background:      currentColor;
  opacity:         0;
  transform:       scale(0.8);
  transition:      opacity 0.1s, transform 0.1s;
}

.dsmm-layout-premium-app .dsmm-nav__link:active::after {
  opacity:   0.07;
  transform: scale(1);
}

/* Active card highlight — perfect pill */
.dsmm-layout-premium-app .dsmm-nav__link.dsmm-is-active {
  color:         var(--dsmm-active);
  background:    color-mix(in srgb, var(--dsmm-active) 10%, transparent);
  border-radius: 9999px;
}

/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, white 10%, transparent)) {
  .dsmm-layout-premium-app .dsmm-nav__link.dsmm-is-active {
    background:    rgba(79, 70, 229, 0.08);
    border-radius: 9999px;
  }
}

/* Icon pop on active */
.dsmm-layout-premium-app .dsmm-nav__link.dsmm-is-active .dsmm-nav__icon-wrap {
  transform:  scale(1.15) translateY(-1px);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Active dot below icon */
.dsmm-layout-premium-app .dsmm-nav__link.dsmm-is-active .dsmm-nav__label::before {
  content:         '';
  display:         inline-block;
  width:           4px;
  height:          4px;
  border-radius:   50%;
  background:      var(--dsmm-active);
  vertical-align:  middle;
  margin-right:    3px;
  margin-bottom:   1px;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  #dsmm-nav.dsmm-layout-premium-app,
  .dsmm-nav.dsmm-layout-premium-app {
    background:  var(--dsmm-dark-bg, #1F2937);
    border-color: var(--dsmm-dark-border, #374151);
    box-shadow:  0 -4px 24px rgba(0, 0, 0, 0.3);
  }

  .dsmm-layout-premium-app .dsmm-nav__link.dsmm-is-active {
    background: rgba(99, 102, 241, 0.15);
  }
}