/* Default variables with theme fallbacks */
:root{
  --vf-hp-primary: var(--wp--preset--color--contrast, var(--global-palette9, var(--ast-global-color-2, #0b0f14)));
  --vf-hp-accent:  var(--wp--preset--color--primary,  var(--global-palette1, var(--ast-global-color-0, #3b82f6)));
  --vf-hp-text:    var(--wp--preset--color--base,      var(--global-palette8, var(--ast-global-color-5, #e5e7eb)));
  --vf-hp-overlay: .75;
  --vf-hp-maxw: 1200px;
  --vf-hp-radius: 20px;
}

/* Base visibility */
#vf-hp-root.vf-hp-hidden{display:none}
#vf-hp-root{position:fixed;inset:0;z-index:9999}

/* Overlay */
#vf-hp-root .vf-hp-overlay{position:absolute;inset:0;background:rgba(3,7,18,var(--vf-hp-overlay));opacity:0;transition:opacity .22s ease-out;}
#vf-hp-root.vf-hp-open .vf-hp-overlay{opacity:1;}

/* Dialog wrapper for layout modes */
#vf-hp-root .vf-hp-dialog{position:relative;z-index:1;margin:5vh auto;max-width:min(var(--vf-hp-maxw),95vw);padding:10px}

/* Glass shell with gradient border */
#vf-hp-root .vf-hp-shell{
  position:relative;box-sizing:border-box;border-radius:var(--vf-hp-radius);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  padding:22px;backdrop-filter: blur(8px);
  transform:scale(.96);opacity:0;transition:transform .22s ease-out, opacity .22s ease-out;
}
#vf-hp-root.vf-hp-open .vf-hp-shell{transform:scale(1);opacity:1;}

/* Dark/Light background tint */
#vf-hp-root.vf-hp-dark .vf-hp-shell{background:linear-gradient(180deg, rgba(11,15,20,.85), rgba(11,15,20,.75)); color:var(--vf-hp-text);}
#vf-hp-root:not(.vf-hp-dark) .vf-hp-shell{background:rgba(255,255,255,.9); color:#111827;}

/* Decorative gradient ring */
#vf-hp-root .vf-hp-shell::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:-1;
  background: radial-gradient(1200px 1200px at 10% -20%, rgba(59,130,246,.25), transparent 60%),
              linear-gradient(120deg, rgba(59,130,246,.35), rgba(59,130,246,0) 40%);
  filter: blur(0.5px);
}

/* Header with optional logo */
.vf-hp-header{display:flex; align-items:center; justify-content:flex-start; margin-bottom:8px;}
.vf-hp-brand img{max-height:48px; width:auto; display:block;}

/* Body layout */
.vf-hp-body{display:block; gap:18px;}
.vf-hp-media{width:100%; margin-bottom:12px;}
.vf-hp-media.has-image img{width:100%; height:auto; border-radius:calc(var(--vf-hp-radius) - 6px); box-shadow: 0 10px 30px rgba(0,0,0,.35);}

@media(min-width:768px){
  .vf-hp-dialog.vf-hp-layout-side .vf-hp-body{display:grid; grid-template-columns: 1.1fr 1.4fr; align-items:start;}
  .vf-hp-dialog.vf-hp-layout-side .vf-hp-media{margin-bottom:0;}
}

/* Close button */
.vf-hp-close{
  position:absolute; top:12px; right:14px; border:none; background:transparent;
  color:#cbd5e1; font-size:26px; line-height:1; cursor:pointer;
  transition: transform .12s ease, opacity .12s ease;
}
.vf-hp-close:hover{ transform: scale(1.08); opacity:.85; }

/* Content + actions */
.vf-hp-content{font-size:17px; line-height:1.7}
.vf-hp-content h1,.vf-hp-content h2,.vf-hp-content h3{margin:.2em 0 .3em}
.vf-hp-actions{margin-top:12px}
.vf-hp-btn{
  display:inline-block; padding:12px 16px; border-radius:12px; text-decoration:none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--vf-hp-accent) 90%, #fff 10%), var(--vf-hp-accent));
  color:#fff; box-shadow: 0 8px 24px rgba(59,130,246,.35);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.vf-hp-btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 28px rgba(59,130,246,.45); filter: brightness(1.05); }
.vf-hp-content a{ color: var(--vf-hp-accent); text-decoration: underline; text-underline-offset: 2px; }

/* Mobile fullscreen refinement */
@media (max-width:640px){
  #vf-hp-root .vf-hp-dialog{margin:0 auto; max-width:100vw; padding:10px}
  .vf-hp-shell{border-radius:0}
}