/* ------------------------------
   MEDUSA POST NAV — Elementor Widget (CSS Variables)
   ------------------------------ */

.medusa-post-nav{
  position: relative;
  isolation: isolate;
  min-height: 220px;

  --mpn-card-w: 540px;
  --mpn-card-h: 120px;
  --mpn-right: 24px;
  --mpn-bottom: 24px;

  --mpn-btn: 42px;
  --mpn-icon: 20px;

  --mpn-portal-w: 540px;
  --mpn-portal-h: 260px;
  --mpn-portal-r: 24px;
  --mpn-portal-overlay: 0.05;
}

.medusa-post-nav .mpn__card{
  position: fixed !important;
  right: var(--mpn-right);
  bottom: var(--mpn-bottom);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid #e8eaef;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  z-index: 9999;
  overflow: hidden;
  width: var(--mpn-card-w);
  height: var(--mpn-card-h);
  max-width: 100%;
  transition: transform .4s ease, opacity .4s ease;
}

.medusa-post-nav .mpn__card:hover{ transform: translateY(-4px); }

.medusa-post-nav .mpn__meta{ min-width:0; width:100%; overflow:hidden; }
.medusa-post-nav .mpn__label{
  display:block;
  font-size:12px;
  color:#7a828a;
  margin-bottom:6px;
}
.medusa-post-nav .mpn__title{
  display:inline-block;
  font-size:18px;
  color:#0b3f39;
  text-decoration:none;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition: color .2s ease;
}

.medusa-post-nav .mpn__arrows{ display:flex; gap:12px; }
.medusa-post-nav .mpn__btn{
  width: var(--mpn-btn);
  height: var(--mpn-btn);
  display:grid;
  place-items:center;
  color:#0b3f39;
  background:#fff;
  border:1px solid #e8eaef;
  border-radius:999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: transform .2s ease, background .2s ease, opacity .2s ease;
}
.medusa-post-nav .mpn__btn:hover{ background:#f6f7f9; transform: translateY(-1px); }
.medusa-post-nav .mpn__btn.is-disabled{
  opacity:.4;
  pointer-events:none;
  filter: grayscale(.6);
}

.medusa-post-nav .mpn__icon{
  width: var(--mpn-icon);
  height: var(--mpn-icon);
}

/* =========================================================
   Portal (global, but respects closest widget variables via data-mpn-scope)
   ========================================================= */
#mpnRevealPortal{
  position: fixed;
  width: var(--mpn-portal-w);
  height: var(--mpn-portal-h);
  border-radius: var(--mpn-portal-r);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.16);
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  pointer-events:none;
  z-index: 99999;
  opacity:0;
  transform: translateY(18px);
  will-change: transform, opacity;
  transition: opacity .5s ease, transform .6s ease, border-color .4s ease;
}

#mpnRevealPortal.is-visible{ opacity:1; transform: translateY(0); }

#mpnRevealPortal .layer{
  position:absolute;
  inset:0;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  opacity:0;
  transition: opacity .5s ease;
  border-radius: inherit;
  transform: translateZ(0);
  backface-visibility: hidden;
  image-rendering: auto;
}
#mpnRevealPortal .layer.active{ opacity:1; z-index:2; }
#mpnRevealPortal .layer.prev{ z-index:1; }

#mpnRevealPortal::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,var(--mpn-portal-overlay));
  pointer-events:none;
  border-radius:inherit;
}

/* =========================================================
   Hide state
   ========================================================= */
.medusa-post-nav .mpn__card.is-hidden,
.medusa-post-nav .mpn__card.is-hidden *{
  pointer-events:none !important;
  opacity:0 !important;
  transform: translateY(10px) scale(.98);
  transition: opacity .4s ease, transform .4s ease;
}
.medusa-post-nav .mpn__card:not(.is-hidden){
  opacity:1;
  transform: translateY(0) scale(1);
  transition: opacity .4s ease, transform .4s ease;
}

/* Responsive (kept close to your original, but variable-friendly) */
@media (max-width: 992px){
  .medusa-post-nav{ --mpn-card-w: 480px; --mpn-card-h: 110px; --mpn-portal-w: 480px; --mpn-portal-h: 220px; --mpn-portal-r: 22px; }
  .medusa-post-nav .mpn__card{ padding: 16px 20px; }
}
@media (max-width: 768px){
  .medusa-post-nav{ --mpn-card-w: 420px; --mpn-card-h: 100px; --mpn-right: 16px; --mpn-bottom: 16px; --mpn-portal-w: 420px; --mpn-portal-h: 200px; --mpn-portal-r: 20px; }
  .medusa-post-nav .mpn__title{ font-size: 16px; }
}
@media (max-width: 480px){
  .medusa-post-nav{ --mpn-card-w: 100%; --mpn-card-h: 100px; --mpn-right: 0px; --mpn-bottom: 0px; --mpn-portal-w: 100%; --mpn-portal-h: 180px; --mpn-portal-r: 0px; }
  .medusa-post-nav .mpn__card{ border-radius: 0; box-shadow: none; }
  #mpnRevealPortal{ left:0 !important; border-radius:0; box-shadow:none; background:transparent; }
}