/* Green Pi Interactive City V6.16
   Micro UI sync, favorite/quick-view cards, prestige intro animation. */

.gp-map-app{
  --gp-sync-ease:cubic-bezier(.18,.88,.22,1);
  --gp-premium-glow:rgba(99,236,205,.22);
}

/* 1) Micro animation sync between top menu and side panel */
.gp-topbar-main-shell,
.gp-map-dock--products{
  position:relative;
  overflow:hidden;
  transition:transform .42s var(--gp-sync-ease), box-shadow .42s var(--gp-sync-ease), border-color .42s var(--gp-sync-ease);
}
.gp-topbar-main-shell::after,
.gp-map-dock--products::after{
  content:'';
  position:absolute;
  inset:-22% -34%;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(115deg, rgba(255,255,255,0) 18%, rgba(255,255,255,.18) 46%, rgba(92,240,201,.16) 52%, rgba(255,255,255,0) 72%);
  transform:translate3d(-120%,0,0) rotate(7deg);
}
.gp-map-app.is-panel-linked .gp-topbar-main-shell,
.gp-map-app.is-panel-linked .gp-map-dock--products{
  border-color:rgba(160,245,226,.24) !important;
  box-shadow:0 18px 46px rgba(5,22,29,.16), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.gp-topbar-main-shell.is-sync-pulse::after,
.gp-map-dock--products.is-sync-pulse::after{
  opacity:1;
  animation:gpUiSweep .95s var(--gp-sync-ease) forwards;
}
.gp-map-app.is-panel-linked .gp-group-tab.is-active,
.gp-map-app.is-panel-linked .gp-product-panel-head strong{
  text-shadow:0 0 18px rgba(162,255,232,.16);
}
.gp-map-app.is-panel-linked .gp-map-dock--products .gp-product-result-bar strong{
  color:#dffef3 !important;
}
@keyframes gpUiSweep{
  0%{transform:translate3d(-120%,0,0) rotate(7deg);opacity:0}
  10%{opacity:.65}
  100%{transform:translate3d(115%,0,0) rotate(7deg);opacity:0}
}

/* 2) SaaS cards: favorite + quick view */
.gp-map-dock--products .gp-panel-product-card{
  position:relative;
}
.gp-map-dock--products .gp-panel-product-card__media-wrap{
  position:relative;
}
.gp-map-dock--products .gp-panel-product-card__utility{
  position:absolute;
  top:10px;
  right:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:3;
}
.gp-map-dock--products .gp-card-icon{
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px;
  background:rgba(7,24,30,.48);
  color:#ebfffa;
  display:grid;
  place-items:center;
  font-size:14px;
  cursor:pointer;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
  transition:transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease, color .22s ease;
}
.gp-map-dock--products .gp-card-icon:hover{
  transform:translateY(-2px) scale(1.02);
  border-color:rgba(164,255,234,.45);
  background:rgba(19,69,63,.58);
}
.gp-map-dock--products .gp-product-favorite.is-active{
  color:#0d4036;
  background:linear-gradient(135deg, rgba(255,255,255,.94), rgba(126,240,218,.92));
  border-color:rgba(169,255,238,.88);
  box-shadow:0 10px 20px rgba(73,215,188,.24);
}
.gp-map-dock--products .gp-panel-product-card__meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.gp-map-dock--products .gp-panel-product-card__category{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(232,247,244,.82);
  font-size:10px;
  font-weight:720;
  letter-spacing:.04em;
}
.gp-map-dock--products .gp-panel-inline-button{
  min-height:36px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(164,255,234,.26);
  background:rgba(99,236,205,.10);
  color:#dffcf4;
  font-size:12px;
  font-weight:780;
  cursor:pointer;
  transition:transform .22s ease, border-color .22s ease, background .22s ease;
}
.gp-map-dock--products .gp-panel-inline-button:hover{
  transform:translateY(-1px);
  background:rgba(99,236,205,.18);
  border-color:rgba(164,255,234,.44);
}
.gp-map-dock--products .gp-panel-product-card__actions{
  gap:7px !important;
}
.gp-map-dock--products .gp-panel-product-card__actions a,
.gp-map-dock--products .gp-panel-product-card__actions .gp-panel-inline-button{
  box-shadow:0 8px 18px rgba(1,12,18,.10);
}

/* quick view modal */
.gp-quickview-open{overflow:hidden}
.gp-quickview-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  padding:20px;
}
.gp-quickview-modal[hidden]{display:none}
.gp-quickview-backdrop{
  position:absolute;
  inset:0;
  background:rgba(5,13,18,.48);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  transition:opacity .2s ease;
}
.gp-quickview-dialog{
  position:relative;
  width:min(880px, calc(100vw - 30px));
  border-radius:28px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(8,26,35,.92), rgba(7,25,33,.80));
  color:#fff;
  box-shadow:0 30px 90px rgba(0,18,26,.36);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  opacity:0;
  transform:translateY(18px) scale(.98);
  transition:opacity .22s ease, transform .22s ease;
  overflow:hidden;
}
.gp-quickview-modal.is-open .gp-quickview-backdrop{opacity:1}
.gp-quickview-modal.is-open .gp-quickview-dialog{opacity:1;transform:translateY(0) scale(1)}
.gp-quickview-close{
  position:absolute;
  top:16px;
  right:16px;
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:22px;
  cursor:pointer;
  z-index:3;
}
.gp-quickview-grid{display:grid;grid-template-columns:320px 1fr;gap:0}
.gp-quickview-media{
  min-height:320px;
  display:grid;
  place-items:center;
  padding:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
}
.gp-quickview-media img{max-width:100%;max-height:320px;object-fit:contain;display:block}
.gp-quickview-copy{padding:30px 28px 28px;display:flex;flex-direction:column;gap:14px}
.gp-quickview-kicker{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gp-quickview-brand,
.gp-quickview-category{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font-size:10px;font-weight:820;letter-spacing:.12em;text-transform:uppercase}
.gp-quickview-brand{background:rgba(99,236,205,.12);border:1px solid rgba(164,255,234,.24);color:#a8f4dd}
.gp-quickview-category{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);color:#e4f3ef}
.gp-quickview-copy h3{margin:0;font-size:28px;line-height:1.15;font-weight:850}
.gp-quickview-copy p{margin:0;color:rgba(231,242,240,.76);font-size:15px;line-height:1.7}
.gp-quickview-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.gp-quickview-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:999px;text-decoration:none;font-weight:780}
.gp-quickview-detail{background:#fff;color:#12323a}
.gp-quickview-quote{background:linear-gradient(135deg, rgba(56,223,171,.96), rgba(100,235,204,.88));border:1px solid rgba(142,255,225,.65);color:#083730}

/* 3) More prestigious map intro */
.gp-build-aura,
.gp-build-particles,
.gp-build-wordmark{position:absolute;pointer-events:none}
.gp-build-aura{
  inset:-10%;
  background:radial-gradient(circle at 50% 48%, rgba(111,240,211,.24), rgba(255,255,255,.08) 26%, rgba(255,255,255,0) 60%);
  opacity:0;
  animation:gpBuildAura var(--gp-intro-ms,4200ms) forwards;
}
.gp-build-particles{
  inset:0;
  background:
    radial-gradient(circle at 18% 24%, rgba(255,255,255,.65) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 28%, rgba(120,235,208,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 54% 58%, rgba(255,255,255,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 44%, rgba(120,235,208,.42) 0 2px, transparent 3px),
    radial-gradient(circle at 36% 70%, rgba(255,255,255,.48) 0 2px, transparent 3px);
  opacity:0;
  animation:gpBuildParticles var(--gp-intro-ms,4200ms) forwards;
}
.gp-build-wordmark{
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
  color:#fff;
  z-index:4;
  opacity:0;
  animation:gpBuildWordmark var(--gp-intro-ms,4200ms) forwards;
}
.gp-build-wordmark small{
  font-size:11px;
  font-weight:800;
  letter-spacing:.30em;
  color:rgba(231,251,246,.86);
}
.gp-build-wordmark strong{
  font-size:clamp(24px,2.4vw,40px);
  line-height:1.04;
  font-weight:850;
  letter-spacing:.01em;
  text-shadow:0 10px 30px rgba(0,18,26,.18);
}
.gp-map-viewport.is-building .gp-hotspot-layer{opacity:0}
.gp-hotspot-layer{transition:opacity .6s ease}
.gp-map-viewport.is-building .gp-map-topbar{opacity:0;transform:translateY(-16px);animation:gpTopbarReveal var(--gp-intro-ms,4200ms) forwards}

@keyframes gpBuildAura{
  0%,18%{opacity:0;transform:scale(.92)}
  40%{opacity:.9}
  78%{opacity:.35;transform:scale(1.08)}
  100%{opacity:0;transform:scale(1.14)}
}
@keyframes gpBuildParticles{
  0%,12%{opacity:0;transform:translateY(18px)}
  28%{opacity:.85}
  72%{opacity:.45;transform:translateY(-8px)}
  100%{opacity:0;transform:translateY(-20px)}
}
@keyframes gpBuildWordmark{
  0%,18%{opacity:0;transform:translate(-50%,-42%)}
  34%{opacity:1;transform:translate(-50%,-50%)}
  66%{opacity:.95}
  100%{opacity:0;transform:translate(-50%,-56%)}
}
@keyframes gpTopbarReveal{
  0%,72%{opacity:0;transform:translateY(-16px)}
  100%{opacity:1;transform:translateY(0)}
}

@media (max-width: 900px){
  .gp-quickview-grid{grid-template-columns:1fr}
  .gp-quickview-media{min-height:260px}
}
@media (max-width: 700px){
  .gp-map-dock--products .gp-panel-product-card__actions{flex-wrap:wrap !important}
  .gp-map-dock--products .gp-card-icon{width:32px;height:32px;border-radius:11px}
  .gp-quickview-copy{padding:22px 18px 18px}
  .gp-quickview-copy h3{font-size:22px}
}