/* ==========================================================================
   FANTOMTV PREMIUM CONTEXT MENU STYLESHEET (Apple-Grade Spring Feel)
   ========================================================================== */

.custom-ctx-menu {
  opacity: 0;
  transform: scale(0.85);
  transform-origin: top left;
  transition: transform 300ms cubic-bezier(0.34, 1.82, 0.64, 1),
              opacity 200ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
  pointer-events: none;
  box-shadow: 
    0 30px 60px rgba(0, 0, 0, 0.65), 
    0 10px 20px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.08);
}

.custom-ctx-menu.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.ctx-item {
  position: relative;
  outline: none;
  cursor: pointer;
  z-index: 1;
}

.ctx-item:active {
  transform: scale(0.97);
}

.ctx-item:hover .ctx-icon {
  color: #ffffff !important;
  transform: scale(1.05);
}

.ctx-icon {
  transition: color 150ms ease, transform 150ms ease;
}

/* Glassmorphic hover highlights */
.ctx-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.08);
  opacity: 0;
  transition: opacity 120ms ease;
  z-index: -1;
}

.ctx-item:hover::after {
  opacity: 1;
}

/* Touch haptics active state simulation for menus */
@media (pointer: coarse) {
  .custom-ctx-menu {
    transform-origin: center center;
    border-radius: 20px;
    padding: 8px;
    min-w: 240px;
  }
  .ctx-item {
    padding-top: 12px;
    padding-bottom: 12px;
    border-radius: 12px;
    font-size: 13px;
  }
  .ctx-icon {
    width: 16px;
    height: 16px;
  }
}