/* ValoHosting — shared marketing header/footer for FOSSBilling auth pages
   (login / signup / password-reset). Scoped with vh- prefix so it never
   collides with Bootstrap classes (.btn, .nav, .dropdown-menu, .wrap...)
   used elsewhere on the same page or in the rest of FOSSBilling. */

:root{
  --vh-bg-alt:#EFEFF7;
  --vh-surface:#FFFFFF;
  --vh-line:#E6E5F0;
  --vh-line-strong:#D3D1E5;
  --vh-text:#23222E;
  --vh-muted:#5C5B6E;
  --vh-muted-2:#8D8C9E;
  --vh-accent:#5A45D8;
  --vh-accent-hover:#4936C4;
  --vh-accent-soft:#EEEBFB;
  --vh-header-bg:rgba(247,247,251,0.88);
  --vh-shadow-sm:0 1px 2px rgba(35,34,52,0.06);
  --vh-shadow-md:0 2px 4px rgba(35,34,52,0.04), 0 12px 32px -12px rgba(35,34,52,0.16);
}
[data-bs-theme="dark"]{
  --vh-bg-alt:#171827;
  --vh-surface:#1C1D2E;
  --vh-line:#2C2D44;
  --vh-line-strong:#3B3D5C;
  --vh-text:#EDEDF5;
  --vh-muted:#A7A9BD;
  --vh-muted-2:#7B7D93;
  --vh-accent:#8B7BFF;
  --vh-accent-hover:#A092FF;
  --vh-accent-soft:rgba(139,123,255,0.13);
  --vh-header-bg:rgba(18,19,31,0.85);
  --vh-shadow-sm:0 1px 2px rgba(0,0,0,0.4);
  --vh-shadow-md:0 12px 32px -12px rgba(0,0,0,0.55);
}

/* ---------- header ---------- */
.vh-site-header{
  position:sticky; top:0; z-index:100;
  background:var(--vh-header-bg);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.vh-site-header.vh-scrolled{ border-bottom-color:var(--vh-line); box-shadow:var(--vh-shadow-sm); }
.vh-nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 24px; max-width:1080px; margin:0 auto;
}
.vh-brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; font-family:'Sora', sans-serif; color:var(--vh-text); text-decoration:none; }
.vh-brand svg{ width:30px; height:30px; flex-shrink:0; }
.vh-nav-links{ display:flex; gap:4px; font-size:15px; color:var(--vh-muted); }
.vh-nav-links a{ padding:9px 14px; border-radius:10px; color:inherit; text-decoration:none; transition:color .15s ease, background .15s ease; }
.vh-nav-links a:hover{ color:var(--vh-text); background:var(--vh-accent-soft); }
.vh-nav-actions{ display:flex; align-items:center; gap:10px; }
.vh-log-link{ font-size:15px; color:var(--vh-muted); padding:9px 12px; border-radius:10px; text-decoration:none; }
.vh-log-link:hover{ color:var(--vh-text); background:var(--vh-accent-soft); }

.vh-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:11px; cursor:pointer;
  background:transparent; border:1.5px solid var(--vh-line-strong); color:var(--vh-muted);
  transition:border-color .15s ease, color .15s ease, background .15s ease, transform .12s ease;
  text-decoration:none;
}
.vh-icon-btn:hover{ color:var(--vh-accent); border-color:var(--vh-accent); background:var(--vh-accent-soft); }
.vh-icon-btn:active{ transform:scale(0.92); }
.vh-icon-btn svg{ width:19px; height:19px; }
.vh-menu-btn{ display:none; background:none; }

.vh-dropdown{ position:relative; }
.vh-dropdown summary{
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px; border-radius:10px;
  font-size:15px; color:var(--vh-muted);
  transition:color .15s ease, background .15s ease;
}
.vh-dropdown summary::-webkit-details-marker{ display:none; }
.vh-dropdown summary:hover{ color:var(--vh-text); background:var(--vh-accent-soft); }
.vh-dropdown summary svg{ width:15px; height:15px; transition:transform .2s ease; }
.vh-dropdown[open] summary svg{ transform:rotate(180deg); }
.vh-dropdown-list{
  position:absolute; left:0; top:calc(100% + 8px); z-index:120;
  background:var(--vh-surface); border:1px solid var(--vh-line); border-radius:14px;
  box-shadow:var(--vh-shadow-md); padding:6px; min-width:190px;
}
.vh-dropdown-list a{
  display:block; padding:10px 14px; border-radius:9px; font-size:14.5px; color:var(--vh-text); text-decoration:none;
}
.vh-dropdown-list a:hover{ background:var(--vh-accent-soft); color:var(--vh-accent); }

.vh-mobile-nav{
  display:grid; grid-template-rows:0fr; overflow:hidden;
  background:var(--vh-bg-alt); border-top:1px solid transparent;
  transition:grid-template-rows .3s ease, border-color .3s ease;
}
.vh-mobile-nav > div{ min-height:0; }
.vh-mobile-nav.vh-open{ grid-template-rows:1fr; border-top-color:var(--vh-line); }
.vh-mobile-nav a{
  display:block; padding:15px 24px; font-size:16.5px; font-weight:500; color:var(--vh-text);
  border-bottom:1px solid var(--vh-line); text-decoration:none;
}
.vh-mobile-nav .vh-mobile-cta{ padding:16px 24px 22px; border-bottom:none; }
.vh-mobile-nav .vh-mobile-cta .btn{ width:100%; }

@media(max-width:920px){
  .vh-nav-links, .vh-nav-actions .vh-log-link, .vh-nav-actions .vh-btn-cta{ display:none; }
  .vh-menu-btn{ display:inline-flex; }
}

/* ---------- footer ---------- */
.vh-site-footer{ border-top:1px solid var(--vh-line); padding:56px 0 36px; background:var(--vh-bg-alt); margin-top:40px; }
.vh-site-footer .vh-wrap{ max-width:1080px; margin:0 auto; padding:0 24px; }
.vh-footer-top{ display:flex; justify-content:space-between; gap:44px; margin-bottom:44px; flex-wrap:wrap; }
.vh-footer-brand p{ color:var(--vh-muted); font-size:14.5px; margin-top:14px; max-width:280px; }
.vh-footer-cols{ display:flex; gap:60px; flex-wrap:wrap; }
.vh-footer-heading{ font-size:13.5px; color:var(--vh-text); margin-bottom:14px; font-weight:700; }
.vh-footer-col a{ display:block; padding:7px 0; font-size:14.5px; color:var(--vh-muted); text-decoration:none; transition:color .15s ease; }
.vh-footer-col a:hover{ color:var(--vh-accent); }
.vh-footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  padding-top:28px; border-top:1px solid var(--vh-line); font-size:13.5px; color:var(--vh-muted-2);
}
.vh-footer-bottom .vh-socials a{ color:var(--vh-muted-2); display:inline-flex; padding:8px; border-radius:8px; transition:color .15s ease; }
.vh-footer-bottom .vh-socials a:hover{ color:var(--vh-accent); }

/* fix: compact language selector + prevent nav text wrapping */
.vh-nav-links a,
.vh-log-link,
.vh-nav-actions .btn{
  white-space:nowrap;
}
.vh-nav-actions{ flex-wrap:nowrap; }
.vh-nav-actions select.js-locale-selector{
  width:auto;
  max-width:120px;
  padding:8px 30px 8px 14px;
  border-radius:999px;
  border:1.5px solid var(--vh-line-strong);
  background-color:transparent;
  color:var(--vh-muted);
  font-size:13.5px;
  font-weight:600;
}
.vh-nav-actions select.js-locale-selector:hover{
  border-color:var(--vh-accent);
  color:var(--vh-accent);
}

/* minimal footer for auth pages (login/signup/password-reset) */
.vh-auth-footer{
  display:flex; justify-content:center; align-items:center; gap:18px; flex-wrap:wrap;
  padding:28px 24px; font-size:13.5px; color:var(--vh-muted-2, #8D8C9E);
}
.vh-auth-footer a{ color:var(--vh-muted-2, #8D8C9E); text-decoration:none; }
.vh-auth-footer a:hover{ color:var(--vh-accent, #8B7BFF); }

/* force white background on autofilled inputs (login/signup forms) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  -webkit-text-fill-color: #23222E !important;
  transition: background-color 5000s ease-in-out 0s;
}
[data-bs-theme="dark"] input:-webkit-autofill,
[data-bs-theme="dark"] input:-webkit-autofill:hover,
[data-bs-theme="dark"] input:-webkit-autofill:focus{
  -webkit-box-shadow: 0 0 0px 1000px #1C1D2E inset !important;
  -webkit-text-fill-color: #EDEDF5 !important;
}

/* password visibility toggle */
.vh-password-wrap{ position:relative; }
.vh-password-wrap input{ padding-right:44px; }
.vh-pw-toggle{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; padding:6px;
  color:var(--vh-muted-2, #8D8C9E); display:flex; align-items:center;
}
.vh-pw-toggle:hover{ color:var(--vh-accent, #8B7BFF); }
.vh-pw-toggle svg{ width:18px; height:18px; }

/* trust badges row on auth pages */
.vh-trust-row{
  display:flex; justify-content:center; align-items:center; gap:18px; flex-wrap:wrap;
  margin-top:18px; font-size:12.5px; color:var(--vh-muted-2, #8D8C9E);
}
.vh-trust-item{ display:inline-flex; align-items:center; gap:6px; }
.vh-trust-item svg{ width:14px; height:14px; flex-shrink:0; }

/* payment method badges row */
.vh-payment-row{
  display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:12px; font-size:11.5px; color:var(--vh-muted-2, #8D8C9E);
}
.vh-pay-badge{
  border:1px solid var(--vh-line-strong, #D3D1E5); border-radius:6px;
  padding:3px 9px; font-weight:600; color:var(--vh-muted, #5C5B6E);
  letter-spacing:.2px;
}

/* allow natural page height/scroll on auth pages (login/signup/password-reset)
   the base theme forces body{height:100%} which clips content and causes
   overlap with the footer once the card grows taller than the viewport */
body.page-login, body.page-signup, body.page-password-reset{
  height:auto !important;
  min-height:100vh;
}

/* footer wrapper: support badge + payment badges + copyright, stacked */
.vh-auth-footer-wrap{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:28px 24px 20px;
}
.vh-auth-footer-wrap .vh-trust-row{ margin-top:0; }
.vh-auth-footer-wrap .vh-payment-row{ margin-top:0; }
.vh-auth-footer-wrap .vh-auth-footer{ padding:14px 0 0; border-top:1px solid var(--vh-line, #E6E5F0); width:100%; max-width:420px; justify-content:center; }

/* order page: product selection cards */
.vh-plan-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:20px;
  margin:16px 0 8px;
}
.vh-plan-card{
  position:relative; display:flex; flex-direction:column;
  border:1.5px solid var(--vh-line-strong,#D3D1E5); border-radius:16px;
  padding:24px 20px; background:var(--vh-surface,#fff);
  transition:box-shadow .2s ease, border-color .2s ease;
}
.vh-plan-card:hover{ box-shadow:var(--vh-shadow-md,0 2px 4px rgba(35,34,52,0.04), 0 12px 32px -12px rgba(35,34,52,0.16)); }
.vh-plan-featured{ border-color:var(--vh-accent,#5A45D8); box-shadow:var(--vh-shadow-md,0 2px 4px rgba(35,34,52,0.04), 0 12px 32px -12px rgba(35,34,52,0.16)); }
.vh-plan-badge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--vh-accent,#5A45D8); color:#fff; font-size:11.5px; font-weight:700;
  padding:4px 14px; border-radius:999px; letter-spacing:.3px;
}
.vh-plan-icon{
  width:48px; height:48px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--vh-accent-soft,#EEEBFB); color:var(--vh-accent,#5A45D8);
  margin-bottom:14px;
}
.vh-plan-icon svg{ width:24px; height:24px; }
.vh-plan-title{ font-size:18px; font-weight:700; margin-bottom:6px; }
.vh-plan-price{ margin-bottom:10px; }
.vh-plan-price .amt{ font-size:26px; font-weight:700; }
.vh-plan-price .per{ font-size:13px; color:var(--vh-muted,#5C5B6E); }
.vh-plan-desc{ font-size:13.5px; color:var(--vh-muted,#5C5B6E); margin-bottom:16px; flex-grow:1; }