/* ================================================================
   DAV STRAINS WORKROOM — mobile-fixes.css  v3.9
   Upload to: assets/css/mobile-fixes.css
   Then add to functions.php enqueue (already included in v3.9)
   ================================================================ */

/* ── 1. PMPro default table — hide completely ── */
.pmpro_levels_table,
table.pmpro_levels,
.pmpro_level_cost_text,
table.pmpro_checkout,
.pmpro-checkout-table,
.pmpro_level_description,
#pmpro_levels_table {
  display: none !important;
}

/* ── 2. SVG bottom nav icons ── */
.bottom-nav a {
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.68);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  gap: 4px;
  padding: 8px 0;
  position: relative;
}
.bottom-nav a svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
/* Remove old Unicode strong elements */
.bottom-nav a strong {
  display: none;
}
/* Active state */
.bottom-nav a.active,
.bottom-nav a[aria-current="page"] {
  color: #66c7ff;
}
.bottom-nav a.active svg,
.bottom-nav a[aria-current="page"] svg {
  stroke: #66c7ff;
}

/* ── 3. Bottom nav height + safe area ── */
@media (max-width: 720px) {
  .bottom-nav {
    height: auto;
    min-height: 66px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    grid-template-columns: repeat(5, 1fr);
  }
  /* WooCommerce sidebar below store — hide on mobile */
  .woocommerce-page .widget-area,
  .woocommerce-page aside.widget-area,
  .woocommerce .woocommerce-sidebar,
  .site-sidebar { display: none !important; }

  /* Cookie banner — prevent overlap on short screens */
  @media (max-height: 680px) {
    .cookie-banner {
      bottom: calc(var(--dav-bottom-menu) + 8px) !important;
      max-height: 160px;
      overflow-y: auto;
    }
  }

  /* PWA install prompt */
  .dav-install-prompt {
    position: fixed;
    top: calc(var(--dav-top-player) + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 24px);
    max-width: 520px;
    z-index: 9990;
    background: rgba(10,18,32,.97);
    border: 1px solid rgba(102,199,255,.28);
    border-radius: 16px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: rgba(255,255,255,.85);
    backdrop-filter: blur(14px);
    animation: slideDown .3s ease;
  }
  @keyframes slideDown {
    from { transform: translateX(-50%) translateY(-12px); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0);     opacity: 1; }
  }
  .dav-install-prompt svg { width: 28px; height: 28px; flex-shrink: 0; fill: #66c7ff; }
  .dav-install-prompt strong { display: block; color: #fff; margin-bottom: 1px; }
  .dav-install-prompt .dav-install-actions { display: flex; gap: 8px; margin-left: auto; }
  .dav-install-btn {
    padding: 7px 14px; border-radius: 99px; font-size: 12px; font-weight: 700;
    cursor: pointer; border: none; white-space: nowrap;
  }
  .dav-install-btn--yes { background: #66c7ff; color: #071524; }
  .dav-install-btn--no  { background: rgba(255,255,255,.10); color: rgba(255,255,255,.65); }
}

/* ── 4. Music page loading skeleton ── */
.music-grid-skeleton {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  overflow: hidden;
}
.music-grid-skeleton .sk-row {
  height: 66px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.music-grid-skeleton .sk-row:last-child { border-bottom: none; }
.sk-circle { width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0; }
.sk-line   { height: 12px; border-radius: 4px; flex: 1; }
.sk-short  { width: 60px; height: 28px; border-radius: 99px; flex-shrink: 0; }
.sk-circle,.sk-line,.sk-short {
  background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.06) 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}
@keyframes sk-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

body.dav-bottom-hidden .bottom-nav{transform:translateY(110%) !important;}
body.dav-bottom-hidden .dav-strip{transform:translateY(calc(100% + 70px)) !important;}
.bottom-nav,.dav-strip{transition:transform .32s ease;}