/**
 * YOOAdmin - Popup styles (submenu)
 *
 * @package YOOAdmin
 */

/* Fallback tokens (will be overridden by dynamic vars if injected elsewhere) */
:root{
  --yp-brand:        var(--yooadmin-primary, #eda934);
  --yp-surface:      var(--yooadmin-surface, #f5f5f5);
  --yp-text-600:     var(--yooadmin-text-600, #5e5e5e);
  --yp-text-500:     var(--yooadmin-text-500, #333);
  --yp-border:       var(--yooadmin-border, #e0e0e0);
  --yp-popup-icon:   44px; /* unified icon size in popup */
}

/* Overlay */
#yp-popup{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:100001;
  display:none;
  align-items:center;
  justify-content:center;
  animation:yp-popup-overlay-fade-in 0.2s ease;
}

@keyframes yp-popup-overlay-fade-in{
  from{ opacity:0; }
  to{ opacity:1; }
}

#yp-popup.active{ display:flex; }

/* Dialog wrapper - allows arrows to overflow */
#yp-popup .yp-popup-box-wrapper{
  position:relative;
  padding:0;
  display:flex;
  align-items:stretch;
  max-width:100%;
  width:auto;
  min-width:0;
  justify-content:center;
  overflow:visible;
}

/* Dialog */
#yp-popup .yp-popup-box{
  background:#fff;
  padding:30px 18px 30px 18px;
  border-radius:12px;
  width:670px;
  max-width:90%;
  max-height:90%;
  overflow-y:auto;
  overflow-x:hidden;
  position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.05);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  animation:yp-popup-box-fade-in 0.3s ease;
  transform:translateY(0);
  flex:1;
}

@keyframes yp-popup-box-fade-in{
  from{
    opacity:0;
    transform:translateY(-10px) scale(0.98);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* Popup header */
#yp-popup .yp-popup-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 0 20px 0;
  margin-bottom:20px;
  border-bottom:1px solid var(--yp-border);
}

#yp-popup .yp-popup-header-content{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
}

#yp-popup .yp-popup-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  width:24px;
  height:24px;
  color:var(--yp-brand);
  flex-shrink:0;
}

#yp-popup .yp-popup-icon .dashicons{
  font-size:24px;
  width:24px;
  height:24px;
  line-height:1;
}

#yp-popup .yp-popup-icon img{
  width:24px;
  height:24px;
  object-fit:contain;
}

#yp-popup .yp-popup-box h2{
  margin:0;
  font-size:20px;
  font-weight:600;
  color:var(--yp-text-600);
  line-height:1.2;
}

/* Grid of tiles */
#yp-popup .yoopixel-popup-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,125px);
  gap:20px;
  justify-content:start;
  flex:1;
  position:relative;
}

/* When pagination is used, grid container becomes flex column */
#yp-popup .yoopixel-popup-grid.yp-has-pagination{
  display:flex;
  flex-direction:column;
  gap:0;
}

/* Pagination pages wrapper (contains pages and arrows) */
#yp-popup .yoopixel-popup-grid .yp-popup-pages-wrapper{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  flex-shrink:0;
}

/* Pagination pages container */
#yp-popup .yoopixel-popup-grid .yp-popup-pages{
  position:relative;
  width:100%;
  flex-shrink:0;
  flex:1;
}

/* Navigation arrows - positioned relative to popup-box-wrapper */
#yp-popup .yp-popup-nav-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(255,255,255,0.9);
  border:1px solid var(--yp-border);
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:100002;
  /* ✅ CSS transitions for smooth show/hide */
  opacity:0;
  visibility:hidden;
  transition:background .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease, visibility .2s ease;
  outline:none;
  pointer-events:auto;
  /* ✅ Hardware acceleration */
  will-change:transform, opacity;
}

/* ✅ Show arrow when visible */
#yp-popup .yp-popup-nav-arrow.is-visible{
  display:flex;
  opacity:1;
  visibility:visible;
}

#yp-popup .yp-popup-nav-arrow:hover{
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
  transform:translateY(-50%) scale(1.1);
}

#yp-popup .yp-popup-nav-arrow:focus-visible{
  outline:2px solid var(--yp-brand);
  outline-offset:2px;
}

#yp-popup .yp-popup-nav-arrow .dashicons{
  font-size:20px;
  width:20px;
  height:20px;
  line-height:1;
  color:var(--yp-text-600);
}

#yp-popup .yp-popup-nav-arrow:hover .dashicons{
  color:var(--yp-brand);
}

#yp-popup .yp-popup-nav-prev{
  left:13px;
}

#yp-popup .yp-popup-nav-next{
  right:13px;
}

/* Individual page (hidden by default) */
#yp-popup .yp-popup-page{
  display:none;
  grid-template-columns:repeat(auto-fill,125px);
  gap:20px;
  justify-content:start;
}

/* Active page */
#yp-popup .yp-popup-page.yp-popup-page-active{
  display:grid;
}

/* Pagination dots */
#yp-popup .yoopixel-popup-grid .yp-popup-pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--yp-border);
  width:100%;
  flex-shrink:0;
}

/* Pagination dot */
#yp-popup .yp-popup-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  border:none;
  background:var(--yp-border);
  cursor:pointer;
  padding:0;
  transition:background .2s ease, transform .2s ease;
  outline:none;
}

#yp-popup .yp-popup-dot:hover{
  background:var(--yp-text-600);
  transform:scale(1.2);
}

#yp-popup .yp-popup-dot:focus-visible{
  outline:2px solid var(--yp-brand);
  outline-offset:2px;
}

/* Active dot */
#yp-popup .yp-popup-dot.yp-popup-dot-active{
  background:var(--yp-brand);
  width:10px;
  height:10px;
}

/* Tile (scoped) */
#yp-popup .yp-icon-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:var(--yp-surface);
  padding:15px;
  border-radius:10px;
  text-decoration:none;
  color:var(--yp-text-500);
  border:none;
  outline:none;
  transition:color .2s ease, transform .15s ease;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(0,0,0,.05);
}

#yp-popup .yp-icon-tile:hover{ transform:translateY(-1px); }

/* Icon + label within tile */
#yp-popup .yp-icon-tile .yp-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
}
#yp-popup .yp-icon-tile .yp-icon > .dashicons{
  font-size:var(--yp-popup-icon);
  width:var(--yp-popup-icon);
  height:var(--yp-popup-icon);
  line-height:1;
  color:var(--_yp-primary, var(--yp-primary, #0d6efd));
  transition:color .2s ease;
}

#yp-popup .yp-icon-label{
  font-size:14px;
  text-align:center;
  color:var(--yp-text-600);
  transition:color .2s ease;
}

/* Hover: change icon/label color only (no bg change) */
#yp-popup .yp-icon-tile:hover .dashicons,
#yp-popup .yp-icon-tile:hover .yp-icon-label{
  color:var(--yp-brand);
}

/* Focus visibility (keyboard) */
#yp-popup .yp-icon-tile:focus-visible{
  outline:2px solid var(--yp-brand);
  outline-offset:2px;
  box-shadow:none;
}

/* Active/pressed should not alter background */
#yp-popup .yp-icon-tile:active{
  background:var(--yp-surface);
  color:inherit;
  box-shadow:none;
}

/* Close button (matching notifications modal) */
#yp-popup .yp-popup-close{
  position:relative;
  top:0;
  right:0;
  background:var(--yp-brand, #eda934);
  color:white;
  border:none;
  border-radius:50%;
  width:32px;
  height:32px;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  z-index:10;
  transition:all 0.2s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  padding:0;
}

#yp-popup .yp-popup-close:hover{
  background:var(--yp-brand, #eda934);
  transform:rotate(90deg);
}

#yp-popup .yp-popup-close:focus-visible{
  outline:2px solid var(--yp-brand);
  outline-offset:2px;
}

#yp-popup .yp-popup-close .dashicons{
  font-size:20px;
  width:20px;
  height:20px;
  line-height:1;
  color:white;
}

/* Headings (scoped) */
#yp-popup h2,
#yp-popup h3{
  color:var(--yp-text-600);
}

/* Badges on tiles (top-right, same feel as main cards) */
#yp-popup .yp-icon-tile.has-badge::after{
  content:attr(data-badge);
  position:absolute;
  top:8px;
  right:10px;
  min-width:20px;
  height:20px;
  line-height:20px;
  padding:0 6px;
  border-radius:999px;
  background:var(--yp-brand);
  color:#fff;
  font-weight:700;
  font-size:12px;
  text-align:center;
  box-shadow:0 0 0 2px #fff;
}

/* Hide badge when value is 0 or empty */
#yp-popup .yp-icon-tile.has-badge[data-badge="0"]::after,
#yp-popup .yp-icon-tile.has-badge[data-badge=""]::after{
  display:none;
}

/* Disable any old label-badge implementations inside popup */
#yp-popup .yp-icon-label.has-badge::after{ display:none; }

#yp-popup .yp-card-icon-edit{
  top:8px;
  right:10px;
  width:24px;
  height:24px;
  border:1px solid var(--_yp_primary, var(--yp-primary, #0d6efd));
  border-radius:6px;
  box-shadow:0 6px 14px rgba(13,110,253,0.18);
  color:var(--_yp_primary, var(--yp-primary, #0d6efd));
  background:rgba(255,255,255,0.95);
}
#yp-popup .yp-card-icon-edit .dashicons{
  font-size:20px;
  width:20px;
  height:20px;
  line-height:20px;
}

/* Motion preference */
@media (prefers-reduced-motion: reduce){
  #yp-popup .yp-icon-tile{ transition:none; }
  #yp-popup .yp-icon-tile:hover{ transform:none; }
  #yp-popup .yp-icon-tile .dashicons,
  #yp-popup .yp-icon-label{ transition:none; }
}

/* ========== Mobile Responsive ========== */
@media (max-width: 782px) {
  /* Adjust popup box for mobile */
  #yp-popup .yp-popup-box {
    width: 95%;
    max-width: 95%;
    padding: 24px 16px;
    max-height: 85vh;
  }
  
  /* Smaller heading on mobile */
  #yp-popup .yp-popup-box h2 {
    font-size: 20px;
    margin: 0 0 24px;
  }
  
  /* Show 2 tiles per row on mobile */
  #yp-popup .yoopixel-popup-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  /* Smaller tiles on mobile */
  #yp-popup .yp-icon-tile {
    padding: 12px 8px;
  }
  
  /* Reduce icon size on mobile */
  :root {
    --yp-popup-icon: 36px;
  }
  
  #yp-popup .yp-icon-tile .yp-icon {
    margin-bottom: 8px;
  }
  
  /* Smaller label font on mobile */
  #yp-popup .yp-icon-label {
    font-size: 12px;
  }
  
  /* Adjust close button for mobile */
  #yp-popup .yp-popup-close {
    top: 12px;
    right: 12px;
    font-size: 20px;
  }
}