/*! Voihost client-area theme — brand reskin of Six. Matches voihost.com design system. v2 2026-07-21 */

/* ============ Fonts ============ */
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;600;700&family=Rubik:wght@400;500;600;700&display=swap');

:root{
  --vh-yellow:#fae848;
  --vh-yellow-600:#efd91f;
  --vh-ink:#121212;
  --vh-ink-2:#171717;
  --vh-muted:#737373;
  --vh-bg:#f5f5f4;
  --vh-border:#e3e3e2;
  --vh-green:#00bb7f;
  --vh-amber:#f99c00;
  --vh-radius:14px;
  --vh-radius-sm:10px;
  --vh-shadow:0 1px 2px rgba(18,18,18,.04), 0 4px 16px rgba(18,18,18,.05);
}

/* ============ Base typography ============ */
body{
  font-family:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif !important;
  color:var(--vh-ink-2);
  background:#fff;
  font-size:15px;
  line-height:1.6;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,
.panel-title,.page-header h1{
  font-family:"Rubik",-apple-system,sans-serif !important;
  font-weight:700 !important;
  color:var(--vh-ink) !important;
  letter-spacing:-.015em;
}
a{color:var(--vh-ink-2);transition:color .15s ease;}
a:hover,a:focus{color:#000;text-decoration:none;}
hr{border-top-color:var(--vh-border);}
.text-muted,.text-muted a{color:var(--vh-muted)!important;}

/* ============ Header / top navbar ============ */
#header .navbar,.navbar-default{
  background:#fff !important;border:0 !important;border-bottom:1px solid var(--vh-border) !important;
  box-shadow:0 1px 2px rgba(18,18,18,.03);
}
.navbar-default .navbar-nav>li>a{color:var(--vh-ink-2) !important;font-family:"Rubik",sans-serif;font-weight:500;}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.open>a{color:var(--vh-ink) !important;background:var(--vh-bg) !important;}
.logo img{max-height:42px;width:auto;}

/* ============ Buttons — pill ============ */
.btn{
  border-radius:999px !important;font-family:"Rubik",sans-serif !important;font-weight:500 !important;
  padding:8px 20px;transition:all .15s ease;border-width:1px;
}
.btn-sm{padding:5px 14px;}
.btn-lg{padding:12px 28px;}
.btn-primary,.btn-primary:focus,.btn-primary.focus,
.primary-action .btn-primary,.modal-submit{
  background:var(--vh-yellow) !important;border-color:var(--vh-yellow) !important;color:var(--vh-ink) !important;font-weight:600 !important;
}
.btn-primary:hover,.btn-primary:active,.btn-primary.active,
.open>.dropdown-toggle.btn-primary{
  background:var(--vh-yellow-600) !important;border-color:var(--vh-yellow-600) !important;color:var(--vh-ink) !important;
}
.btn-default{background:var(--vh-ink) !important;border-color:var(--vh-ink) !important;color:#fff !important;}
.btn-default:hover,.btn-default:focus,.btn-default:active{background:#000 !important;border-color:#000 !important;color:#fff !important;}
.btn-success{background:var(--vh-green) !important;border-color:var(--vh-green) !important;color:#fff !important;}
.btn-link{color:var(--vh-ink-2) !important;}
.btn-link:hover{color:#000 !important;}

/* ============ Panels / cards ============ */
.panel{
  border-radius:var(--vh-radius) !important;border:1px solid var(--vh-border) !important;
  box-shadow:var(--vh-shadow);overflow:hidden;
}
.panel-heading{
  background:#fff !important;border-bottom:1px solid var(--vh-border) !important;
  font-family:"Rubik",sans-serif;font-weight:600;color:var(--vh-ink) !important;
}
.panel-primary{border-color:var(--vh-border) !important;}
.panel-primary>.panel-heading{background:var(--vh-ink) !important;color:#fff !important;border-color:var(--vh-ink) !important;}
.panel-primary>.panel-heading .panel-title{color:#fff !important;}
.panel-footer{background:var(--vh-bg) !important;border-top-color:var(--vh-border) !important;}
.card{border-radius:var(--vh-radius) !important;border:1px solid var(--vh-border) !important;box-shadow:var(--vh-shadow);}
.well{background:var(--vh-bg) !important;border:1px solid var(--vh-border) !important;border-radius:var(--vh-radius) !important;box-shadow:none !important;}

/* ============ Client-area home shortcuts ============ */
.home-shortcuts .btn,.home-panels .panel{border-radius:var(--vh-radius) !important;}
.home-shortcuts .btn{background:#fff !important;border:1px solid var(--vh-border) !important;color:var(--vh-ink) !important;}
.home-shortcuts .btn:hover{border-color:var(--vh-yellow) !important;box-shadow:var(--vh-shadow);color:var(--vh-ink) !important;}

/* ============ Forms ============ */
.form-control{
  border-radius:var(--vh-radius-sm) !important;border-color:var(--vh-border) !important;
  box-shadow:none !important;color:var(--vh-ink-2);
}
.form-control:focus{border-color:var(--vh-ink) !important;box-shadow:0 0 0 3px rgba(250,232,72,.45) !important;}
.input-group-addon{border-radius:var(--vh-radius-sm);border-color:var(--vh-border);background:var(--vh-bg);}

/* ============ Hero / jumbotron ============ */
.jumbotron,#main-menu.jumbotron{background:var(--vh-bg) !important;border-radius:var(--vh-radius);}
.jumbotron h1,.jumbotron .h1{color:var(--vh-ink) !important;}

/* ============ Labels / badges / alerts ============ */
.label-primary,.badge{background:var(--vh-ink) !important;}
.label-success{background:var(--vh-green) !important;}
.label-warning{background:var(--vh-amber) !important;color:var(--vh-ink) !important;}
.label-info{background:var(--vh-muted) !important;}
.alert{border-radius:var(--vh-radius-sm);border:1px solid var(--vh-border);}
.alert-success{background:#e6f8f1;border-color:#bfe9db;color:#046c4e;}
.alert-warning{background:#fef7e6;border-color:#f7e2a8;color:#8a6100;}
.alert-info{background:var(--vh-bg);border-color:var(--vh-border);color:var(--vh-ink-2);}

/* ============ Tables ============ */
.table>thead>tr>th{
  border-bottom:2px solid var(--vh-border);color:var(--vh-muted);
  font-family:"Rubik",sans-serif;font-weight:600;
}
.table-hover>tbody>tr:hover{background:var(--vh-bg);}

/* ============ Nav pills / tabs / list groups ============ */
.nav-pills>li.active>a,.nav-pills>li.active>a:hover{background:var(--vh-ink) !important;color:#fff !important;}
.nav-tabs>li.active>a{border-bottom:2px solid var(--vh-yellow) !important;}
a.list-group-item.active,a.list-group-item.active:hover{background:var(--vh-ink) !important;border-color:var(--vh-ink) !important;}
.pagination>.active>a,.pagination>.active>span,.pagination>.active>a:hover{background:var(--vh-ink) !important;border-color:var(--vh-ink) !important;}
.pagination>li>a{color:var(--vh-ink-2);}

/* ============ Progress ============ */
.progress{border-radius:999px;background:var(--vh-border);}
.progress-bar{background:var(--vh-yellow) !important;color:var(--vh-ink);}

/* ============ Footer (dark) ============ */
#footer,footer#footer,.footer,body #footer{
  background:var(--vh-ink) !important;color:#d4d4d4 !important;border-top:0 !important;padding:30px 0 !important;
}
#footer a,.footer a{color:#fafafa !important;}
#footer a:hover,.footer a:hover{color:var(--vh-yellow) !important;}
#footer .text-muted{color:#a3a3a3 !important;}

/* ============ Homepage hero (voihost-style) ============ */
#home-banner.vh-hero{
  background:#fff !important;
  border-bottom:1px solid var(--vh-border) !important;
  padding:72px 0 56px !important;
}
.vh-hero-title{
  font-family:"Rubik",sans-serif !important;font-weight:700 !important;
  font-size:42px !important;line-height:1.1 !important;letter-spacing:-.02em;
  color:var(--vh-ink) !important;margin:0 0 14px !important;
}
.vh-hero-sub{
  font-family:"Karla",sans-serif !important;font-size:19px !important;
  color:var(--vh-muted) !important;max-width:640px;margin:0 auto !important;line-height:1.5;
}
.vh-domain-search{margin-top:30px;}
.vh-domain-search .form-control{height:52px;border-radius:999px 0 0 999px !important;}
.vh-domain-search .btn{border-radius:0 999px 999px 0 !important;}

/* ============ Homepage action cards ============ */
.home-shortcuts.vh-shortcuts{background:var(--vh-bg) !important;padding:48px 0 !important;}
.vh-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px;}
.vh-card{
  display:flex !important;flex-direction:column;align-items:flex-start;gap:14px;
  background:#fff !important;border:1px solid var(--vh-border) !important;border-radius:16px !important;
  padding:26px 24px !important;text-decoration:none !important;box-shadow:var(--vh-shadow);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.vh-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(18,18,18,.10);border-color:var(--vh-yellow) !important;}
.vh-card-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:14px;background:var(--vh-yellow);font-size:22px;
}
.vh-card-ico i{color:var(--vh-ink) !important;}
.vh-card-title{font-family:"Rubik",sans-serif !important;font-weight:600 !important;font-size:18px;color:var(--vh-ink) !important;}
.vh-card-desc{font-family:"Karla",sans-serif !important;font-size:14.5px;color:var(--vh-muted) !important;line-height:1.55;}

/* ============ Header action buttons (View Cart / Logout) -> dark pill ============ */
.primary-action .btn,.primary-action a.btn{
  background:var(--vh-ink) !important;border-color:var(--vh-ink) !important;color:#fff !important;
  border-radius:999px !important;font-family:"Rubik",sans-serif !important;font-weight:500 !important;padding:8px 20px !important;
}
.primary-action .btn:hover,.primary-action a.btn:hover{background:#000 !important;border-color:#000 !important;color:#fff !important;}

/* ============ Login / register ============ */
.login-box .panel,.verification-container .panel{box-shadow:var(--vh-shadow);}

/* ============ Hero feature badges ============ */
.vh-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;margin-top:30px;}
.vh-badge{
  display:inline-flex;align-items:center;gap:8px;font-family:"Karla",sans-serif;
  font-size:14px;font-weight:600;color:var(--vh-ink-2) !important;
  background:var(--vh-bg);border:1px solid var(--vh-border);border-radius:999px;padding:8px 16px;
}
.vh-badge i{color:var(--vh-ink) !important;}

/* ============ CTA band ============ */
.vh-cta{background:var(--vh-yellow) !important;padding:58px 0 !important;}
.vh-cta-title{font-family:"Rubik",sans-serif !important;font-weight:700 !important;font-size:32px !important;color:var(--vh-ink) !important;letter-spacing:-.02em;margin:0 0 10px !important;}
.vh-cta-sub{font-family:"Karla",sans-serif !important;font-size:17px !important;color:#3a3720 !important;max-width:580px;margin:0 auto 24px !important;line-height:1.5;}
.vh-cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.vh-cta .btn{border-radius:999px !important;font-family:"Rubik",sans-serif !important;font-weight:600 !important;padding:11px 26px !important;}
.vh-cta-primary,.vh-cta-primary:focus{background:var(--vh-ink) !important;border-color:var(--vh-ink) !important;color:#fff !important;}
.vh-cta-primary:hover{background:#000 !important;border-color:#000 !important;color:#fff !important;}
.vh-cta-ghost,.vh-cta-ghost:focus{background:transparent !important;border:1px solid var(--vh-ink) !important;color:var(--vh-ink) !important;}
.vh-cta-ghost:hover{background:var(--vh-ink) !important;color:#fff !important;}

/* ============ Website-style footer (exact voihost.com colors) ============ */
#footer.vh-footer{background:#121212 !important;color:rgba(250,250,250,.7) !important;padding:56px 0 22px !important;border-top:0 !important;}
.vh-footer-top{display:grid;grid-template-columns:1.4fr 3.2fr;gap:44px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.10);}
.vh-footer-logo{height:34px;width:auto;margin-bottom:16px;}
.vh-footer-tagline{font-family:"Karla",sans-serif;font-size:14px !important;color:rgba(250,250,250,.7) !important;line-height:1.6;max-width:330px;margin:0 0 18px;}
.vh-footer-badges{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
.vh-footer-badges li{font-family:"Karla",sans-serif;font-size:14px;color:#fafafa !important;display:flex;align-items:center;gap:10px;}
.vh-footer-badges li i{color:var(--vh-yellow) !important;width:16px;text-align:center;}
.vh-footer-cols{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;}
#footer.vh-footer .vh-footer-col h4{font-family:"Rubik",sans-serif !important;font-size:14px !important;font-weight:600 !important;color:#fafafa !important;text-transform:none !important;letter-spacing:-.35px !important;margin:0 0 14px !important;}
.vh-footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;}
#footer.vh-footer .vh-footer-col a{font-family:"Karla",sans-serif !important;font-size:14px !important;font-weight:400 !important;color:rgba(250,250,250,.7) !important;text-decoration:none;transition:color .12s ease;}
#footer.vh-footer .vh-footer-col a:hover{color:#fafafa !important;}
.vh-footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:20px;}
.vh-footer-bottom p{font-family:"Karla",sans-serif;font-size:13px;color:rgba(250,250,250,.5) !important;margin:0;}
#footer.vh-footer .back-to-top{position:static !important;color:#a3a3a3 !important;background:rgba(255,255,255,.06);width:36px;height:36px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;opacity:1 !important;}
#footer.vh-footer .back-to-top:hover{color:var(--vh-ink) !important;background:var(--vh-yellow);}

@media (max-width:991px){
  .vh-footer-top{grid-template-columns:1fr;gap:28px;}
  .vh-footer-cols{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:600px){
  .vh-footer-cols{grid-template-columns:repeat(2,1fr);}
  .vh-cta-title{font-size:26px !important;}
  .vh-hero-title{font-size:32px !important;}
}

/* ============ Homepage: collapse empty content area (removes gap above footer) ============ */
#main-body.vh-home-main{min-height:0 !important;padding:0 !important;}
.vh-home-main .main-content,.vh-home-main .row,.vh-home-main > .container{
  min-height:0 !important;padding-top:0 !important;padding-bottom:0 !important;margin-top:0 !important;margin-bottom:0 !important;
}

/* ============ Store / order-form product cards (match voihost.com pricing) ============ */
.product{
  border:1px solid var(--vh-border) !important;border-radius:16px !important;background:#fff !important;
  box-shadow:var(--vh-shadow) !important;padding:28px !important;margin-bottom:26px !important;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.product:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(18,18,18,.09) !important;border-color:var(--vh-yellow) !important;}
.product .name{font-family:"Rubik",sans-serif !important;font-weight:700 !important;font-size:22px !important;color:var(--vh-ink) !important;letter-spacing:-.01em;}
.product .pricing{color:var(--vh-muted) !important;font-family:"Karla",sans-serif !important;font-size:13px !important;}
.product span.pricing{display:inline-block;font-family:"Rubik",sans-serif !important;font-weight:700 !important;font-size:28px !important;color:var(--vh-ink) !important;line-height:1.1;}
.product .description{margin-top:18px !important;}
.product .vh-feat{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
.product .vh-feat li{position:relative;padding-left:27px;font-family:"Karla",sans-serif !important;font-size:14.5px !important;color:var(--vh-ink-2) !important;line-height:1.45;}
.product .vh-feat li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--vh-green);font-weight:700;font-size:14px;}
.product .text-right{margin-top:20px !important;}
.product .btn-success,.product a.btn-success{
  background:var(--vh-ink) !important;border-color:var(--vh-ink) !important;color:#fff !important;
  border-radius:999px !important;font-family:"Rubik",sans-serif !important;font-weight:600 !important;padding:10px 26px !important;
}
.product .btn-success:hover{background:#000 !important;border-color:#000 !important;color:#fff !important;}
.product .btn-success i{color:#fff !important;}