/* Shared footer presets for Visual Studio and Visual Pulse. */
@font-face{font-family:"VS Footer Brands";font-style:normal;font-weight:400;font-display:block;src:url("../x2panel-assets/webfonts/fa-brands-400.woff2") format("woff2")}
body.vs-site,.vs-editor-canvas.vs-site{display:flex;flex-direction:column;min-height:100vh}
.vs-site>#vs-page-main,.vs-editor-canvas>.vs-rendered-page{display:flow-root;flex:1 0 auto}
.vs-page-bottom{padding:24px clamp(16px,3vw,32px) 32px;min-width:0}
body.vs-site:has(>.vs-footer[data-vs-footer-style]){background:var(--vs-footer-page-outer,var(--vs-surface-background,#fff))}
.vs-site>.vs-footer{margin-top:auto}
.vs-footer[data-vs-footer-style]{display:block;min-height:0;padding:0;color:inherit;font-family:inherit}
.vs-footer[data-vs-footer-style] *{box-sizing:border-box}
.vs-footer-shell{width:100%;margin-inline:auto}
.vs-footer-main{min-width:0}
.vs-footer-brand{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-size:clamp(22px,2.2vw,31px);font-weight:900;line-height:1.1;white-space:nowrap}
.vs-footer-brand img{display:block;max-width:190px;max-height:58px;width:auto;height:auto;object-fit:contain}
.vs-footer-brand.has-logo .vs-footer-brand-name{display:none}
.vs-footer-nav{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:13px 24px}
.vs-footer-nav a,.vs-footer-column a,.vs-footer-bottom a{color:inherit;text-decoration:none}
.vs-footer-nav a:hover,.vs-footer-column a:hover,.vs-footer-bottom a:hover{text-decoration:underline}
.vs-footer-tagline,.vs-footer-description{margin:0}
.vs-footer-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.vs-footer-column{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.vs-footer-column h3{margin:0 0 7px;color:inherit;font-size:18px;line-height:1.2}
.vs-footer-column a{color:#c4c4c4;font-size:14px;line-height:1.45}
.vs-footer-cta{display:inline-flex;align-items:center;justify-content:center;gap:15px;padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:800;white-space:nowrap}
.vs-footer-cta-icon{font-size:20px;line-height:1}
.vs-footer-social{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px}
.vs-footer-social a{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:50%;background:var(--vs-footer-icon-bg,#eee);color:var(--vs-footer-icon-color,#000);text-decoration:none;font-size:21px;font-weight:800;line-height:1;transition:transform .2s ease,background .2s ease}
.vs-footer-social a:hover{transform:translateY(-3px)}
.vs-footer-icon{display:inline-block;font-family:"VS Footer Brands";font-style:normal;font-weight:400;font-size:20px;line-height:1}
.vs-footer-icon::before{display:block}
.vs-footer-icon-tiktok::before{content:"\e07b"}
.vs-footer-icon-youtube::before{content:"\f167"}
.vs-footer-icon-x{width:18px;height:18px}
.vs-footer-icon-x svg{display:block;width:100%;height:100%;fill:currentColor}
.vs-footer-icon-telegram::before{content:"\f2c6"}
.vs-footer-icon-instagram::before{content:"\f16d"}
.vs-footer-icon-facebook::before{content:"\f39e"}
.vs-footer-icon-whatsapp::before{content:"\f232"}
.vs-footer-icon-linkedin::before{content:"\f0e1"}
.vs-footer-icon-snapchat::before{content:"\f2ac"}
.vs-footer-icon-pinterest::before{content:"\f231"}
.vs-footer-icon-discord::before{content:"\f392"}
.vs-footer-icon-twitch::before{content:"\f1e8"}
.vs-footer-icon-spotify::before{content:"\f1bc"}
.vs-footer-icon-reddit::before{content:"\f281"}
.vs-footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px}
.vs-footer-slot:empty{display:none}
.vs-editor-canvas .vs-footer-slot .vs-block-list:empty{display:none}
.vs-editor-canvas .vs-footer.vs-footer-editing .vs-footer-slot .vs-block-list:empty{display:flex}

/* The original minimal footer remains the default for existing sites. */
.vs-footer[data-vs-footer-style="classic"]{background:var(--vs-footer-outer,#fff);color:#6c7895}
.vs-footer[data-vs-footer-style="classic"] .vs-footer-shell{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:16px;padding:22px}
.vs-footer[data-vs-footer-style="classic"] .vs-footer-main{display:flex;align-items:center}
.vs-footer[data-vs-footer-style="classic"] .vs-footer-brand{font-size:14px;font-weight:400}
.vs-footer[data-vs-footer-style="classic"] .vs-footer-brand img{display:none}
.vs-footer[data-vs-footer-style="classic"] .vs-footer-brand-name{display:inline}
.vs-footer[data-vs-footer-style="classic"] .vs-footer-tagline,.vs-footer[data-vs-footer-style="classic"] .vs-footer-description,.vs-footer[data-vs-footer-style="classic"] .vs-footer-nav,.vs-footer[data-vs-footer-style="classic"] .vs-footer-columns,.vs-footer[data-vs-footer-style="classic"] .vs-footer-cta,.vs-footer[data-vs-footer-style="classic"] .vs-footer-social,.vs-footer[data-vs-footer-style="classic"] .vs-footer-bottom{display:none}

/* 1. Compact navigation bar. */
.vs-footer[data-vs-footer-style="bar"]{background:var(--vs-footer-outer,#171717);color:#fff}
.vs-footer[data-vs-footer-style="bar"] .vs-footer-shell{max-width:1500px;padding:0 28px}
.vs-footer[data-vs-footer-style="bar"] .vs-footer-main{display:grid;grid-template-columns:minmax(160px,1fr) minmax(0,2fr) minmax(100px,1fr);align-items:center;gap:22px;min-height:92px}
.vs-footer[data-vs-footer-style="bar"] .vs-footer-brand{justify-self:start;color:var(--vs-footer-accent,#ff7939)}
.vs-footer[data-vs-footer-style="bar"] .vs-footer-nav{font-size:14px;font-weight:600}
.vs-footer[data-vs-footer-style="bar"] .vs-footer-cta{justify-self:end;background:var(--vs-footer-icon-bg,#16dd3c);color:var(--vs-footer-icon-color,#fff);border-radius:10px;padding:12px 17px}
.vs-footer[data-vs-footer-style="bar"] .vs-footer-cta-icon,.vs-footer[data-vs-footer-style="bar"] .vs-footer-tagline,.vs-footer[data-vs-footer-style="bar"] .vs-footer-description,.vs-footer[data-vs-footer-style="bar"] .vs-footer-columns,.vs-footer[data-vs-footer-style="bar"] .vs-footer-social,.vs-footer[data-vs-footer-style="bar"] .vs-footer-bottom{display:none}
.vs-footer[data-vs-footer-style="bar"] .vs-footer-slot:not(:empty){padding:0 0 16px}

/* 2. Gradient headline with social circles. */
.vs-footer[data-vs-footer-style="neon"]{background:var(--vs-footer-outer,#08021e);color:#fff;text-align:center}
.vs-footer[data-vs-footer-style="neon"] .vs-footer-shell{padding:24px 20px 58px}
.vs-footer[data-vs-footer-style="neon"] .vs-footer-main{display:flex;flex-direction:column;align-items:center;gap:21px}
.vs-footer[data-vs-footer-style="neon"] .vs-footer-tagline{max-width:950px;background:linear-gradient(90deg,var(--vs-footer-accent,#f52aa6) 0%,var(--vs-footer-accent-2,#ff9a35) 100%);background-clip:text;-webkit-background-clip:text;color:transparent;font-size:clamp(28px,4.3vw,50px);font-weight:900;line-height:1.15}
.vs-footer[data-vs-footer-style="neon"] .vs-footer-social a{border:1px solid var(--vs-footer-card-end,#403952);background:var(--vs-footer-icon-bg,#1b1631);color:var(--vs-footer-icon-color,#e1dfe9);box-shadow:0 4px 14px #0003}
.vs-footer[data-vs-footer-style="neon"] .vs-footer-social a:hover{background:var(--vs-footer-card-end,#35274b)}
.vs-footer[data-vs-footer-style="neon"] .vs-footer-social [data-vs-network="instagram"],.vs-footer[data-vs-footer-style="neon"] .vs-footer-social [data-vs-network="facebook"]{display:none}
.vs-footer[data-vs-footer-style="neon"] .vs-footer-brand,.vs-footer[data-vs-footer-style="neon"] .vs-footer-description,.vs-footer[data-vs-footer-style="neon"] .vs-footer-nav,.vs-footer[data-vs-footer-style="neon"] .vs-footer-columns,.vs-footer[data-vs-footer-style="neon"] .vs-footer-cta,.vs-footer[data-vs-footer-style="neon"] .vs-footer-bottom{display:none}

/* 3. Rounded dark card with service and site links. */
.vs-footer[data-vs-footer-style="columns"]{background:var(--vs-footer-outer,#faf7eb);color:#fff;padding:24px clamp(12px,4vw,60px)}
.vs-footer[data-vs-footer-style="columns"] .vs-footer-shell{max-width:1200px;overflow:hidden;padding:57px clamp(22px,3vw,48px) 28px;border:10px solid #000;border-radius:43px;background:linear-gradient(175deg,var(--vs-footer-card,#404040) 0%,var(--vs-footer-card-end,#020202) 100%);box-shadow:0 20px 40px #241f1433}
.vs-footer[data-vs-footer-style="columns"] .vs-footer-main{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,1fr);grid-template-areas:"columns brand" "columns description" "columns cta" "social social";align-items:start;gap:18px 35px}
.vs-footer[data-vs-footer-style="columns"] .vs-footer-columns{grid-area:columns;gap:16px}
.vs-footer[data-vs-footer-style="columns"] .vs-footer-brand{grid-area:brand;justify-self:end;color:var(--vs-footer-accent,#ff783a)}
.vs-footer[data-vs-footer-style="columns"] .vs-footer-description{grid-area:description;text-align:end;font-size:14px;font-weight:600;line-height:1.6}
.vs-footer[data-vs-footer-style="columns"] .vs-footer-cta{grid-area:cta;justify-self:stretch;min-height:60px;background:#fff;color:#111;border-radius:12px}
.vs-footer[data-vs-footer-style="columns"] .vs-footer-cta-icon{margin-inline-start:auto}
.vs-footer[data-vs-footer-style="columns"] .vs-footer-social{grid-area:social;margin-top:30px;padding-top:25px;border-top:1px solid #666;justify-content:center}
.vs-footer[data-vs-footer-style="columns"] .vs-footer-social [data-vs-network="tiktok"],.vs-footer[data-vs-footer-style="columns"] .vs-footer-social [data-vs-network="x"],.vs-footer[data-vs-footer-style="columns"] .vs-footer-social [data-vs-network="facebook"]{display:none}
.vs-footer[data-vs-footer-style="columns"] .vs-footer-social a{background:var(--vs-footer-icon-bg,#ffe900);color:var(--vs-footer-icon-color,#000);width:43px;height:43px;font-size:19px}
.vs-footer[data-vs-footer-style="columns"] .vs-footer-bottom{margin-top:18px;font-size:12px;font-weight:700}
.vs-footer[data-vs-footer-style="columns"] .vs-footer-top{border:1px solid var(--vs-footer-accent-2,#ffdf00);border-radius:17px;padding:11px 28px}
.vs-footer[data-vs-footer-style="columns"] .vs-footer-tagline,.vs-footer[data-vs-footer-style="columns"] .vs-footer-nav{display:none}
.vs-footer[data-vs-footer-style="columns"] .vs-footer-slot:not(:empty){margin-top:24px}

/* 4. Centered black footer with vivid social buttons. */
.vs-footer[data-vs-footer-style="centered"]{background:var(--vs-footer-outer,#020202);color:#fff;text-align:center}
.vs-footer[data-vs-footer-style="centered"] .vs-footer-shell{max-width:1500px;margin:auto;padding:42px clamp(20px,4vw,64px) 20px}
.vs-footer[data-vs-footer-style="centered"] .vs-footer-main{display:flex;flex-direction:column;align-items:center;gap:18px;min-height:220px}
.vs-footer[data-vs-footer-style="centered"] .vs-footer-brand{color:var(--vs-footer-accent,#ff783a)}
.vs-footer[data-vs-footer-style="centered"] .vs-footer-description{max-width:950px;font-size:13px;line-height:1.7}
.vs-footer[data-vs-footer-style="centered"] .vs-footer-social{margin-top:8px}
.vs-footer[data-vs-footer-style="centered"] .vs-footer-social a{background:var(--vs-footer-icon-bg,#fff000);color:var(--vs-footer-icon-color,#000)}
.vs-footer[data-vs-footer-style="centered"] .vs-footer-social [data-vs-network="tiktok"]{display:none}
.vs-footer[data-vs-footer-style="centered"] .vs-footer-bottom{margin-top:25px;padding-top:23px;border-top:1px solid #5a5a5a;font-size:12px;text-align:start}
.vs-footer[data-vs-footer-style="centered"] .vs-footer-top,.vs-footer[data-vs-footer-style="centered"] .vs-footer-tagline,.vs-footer[data-vs-footer-style="centered"] .vs-footer-nav,.vs-footer[data-vs-footer-style="centered"] .vs-footer-columns,.vs-footer[data-vs-footer-style="centered"] .vs-footer-cta{display:none}
.vs-footer[data-vs-footer-style="centered"] .vs-footer-slot:not(:empty){margin-top:22px}

.vs-footer[data-vs-footer-style] .vs-footer-social[data-vs-social-custom="1"]{display:flex}
.vs-footer[data-vs-footer-style] .vs-footer-social[data-vs-social-custom="1"] a[data-vs-network]{display:grid}
.vs-footer[data-vs-footer-style="classic"] .vs-footer-social[data-vs-social-custom="1"]{margin-inline-start:20px}
.vs-footer[data-vs-footer-style="bar"] .vs-footer-social[data-vs-social-custom="1"]{grid-column:1/-1;padding-bottom:18px}
.vs-footer[data-vs-footer-style] .vs-footer-social[data-vs-social-empty="1"]{display:none!important}

@media(max-width:900px){
  .vs-footer[data-vs-footer-style="bar"] .vs-footer-main{grid-template-columns:1fr auto;gap:12px;padding:15px 0}
  .vs-footer[data-vs-footer-style="bar"] .vs-footer-nav{grid-column:1/-1;grid-row:2;justify-content:flex-start}
  .vs-footer[data-vs-footer-style="bar"] .vs-footer-cta{grid-column:2;grid-row:1}
  .vs-footer[data-vs-footer-style="columns"] .vs-footer-main{grid-template-columns:1fr;grid-template-areas:"brand" "description" "cta" "columns" "social"}
  .vs-footer[data-vs-footer-style="columns"] .vs-footer-brand,.vs-footer[data-vs-footer-style="columns"] .vs-footer-cta{justify-self:start}
  .vs-footer[data-vs-footer-style="columns"] .vs-footer-description{text-align:start}
  .vs-footer[data-vs-footer-style="columns"] .vs-footer-cta{justify-self:stretch}
  .vs-footer[data-vs-footer-style="columns"] .vs-footer-columns{margin-top:20px}
}
@media(max-width:600px){
  .vs-footer[data-vs-footer-style="bar"] .vs-footer-shell{padding:0 18px}
  .vs-footer[data-vs-footer-style="bar"] .vs-footer-brand img{max-width:140px}
  .vs-footer[data-vs-footer-style="bar"] .vs-footer-nav{gap:10px 15px;font-size:12px}
  .vs-footer[data-vs-footer-style="bar"] .vs-footer-cta{padding:10px 12px;font-size:12px}
  .vs-footer[data-vs-footer-style="columns"]{padding:14px}
  .vs-footer[data-vs-footer-style="columns"] .vs-footer-shell{border-width:6px;border-radius:28px;padding:34px 18px 22px}
  .vs-footer[data-vs-footer-style="columns"] .vs-footer-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .vs-footer[data-vs-footer-style="columns"] .vs-footer-bottom{flex-wrap:wrap;justify-content:center;text-align:center}
  .vs-footer[data-vs-footer-style="centered"] .vs-footer-bottom{flex-direction:column;text-align:center}
  .vs-footer-social a{width:40px;height:40px}
}
