@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&display=swap');

/* ============================================================
   Webbly base theme for Blesta client area (v3)
   One base, reused across all brands. Recolor per brand with a
   single line in that company's theme Custom CSS:
       :root{ --brand:var(--wh) }   (Webbly)
       :root{ --brand:#e6197d }   (Kraken)
   Optional per-brand logo: :root{ --brand-logo:url('...') }
   ============================================================ */

:root{
  --brand-dark: color-mix(in srgb, var(--wh) 82%, #000);
  --brand-soft: color-mix(in srgb, var(--wh) 11%, #fff);
  --brand-ring: color-mix(in srgb, var(--wh) 20%, transparent);
  --page:#f6f6f9; --card:#ffffff; --ink:#100a1a; --muted:#6c7280; --faint:#9aa0ab;
  --line:#ebecf2; --line-soft:#f2f2f6; --sb:250px; --r:16px; --r-sm:12px;
  --shadow:0 1px 2px rgba(16,10,26,.04), 0 3px 14px rgba(16,10,26,.045);
}

body{
  font-family:'Inter',system-ui,sans-serif !important;
  background:var(--page) !important; color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--wh);}
a:hover{color:var(--wh-dark);}

/* ---------- Layout offset (padding, not margin) + overflow clamp ---------- */
html, body{overflow-x:hidden; max-width:100%;}
body{padding-left:var(--sb);}
body > .title, body > .container-md{margin-left:0 !important;}
body > .container-md{width:auto !important; max-width:100% !important; padding:0 40px 40px !important;}

/* ---------- Sidebar: logo (.header) + nav (.nav-content) fixed left ---------- */
body > .header{
  position:fixed; top:0; left:0; width:var(--sb); height:82px; z-index:40;
  background:var(--card); border-right:1px solid var(--line); border-bottom:1px solid var(--line-soft);
  display:flex; align-items:center; padding:0 22px; margin:0;
}
body > .header .container-md{padding:0 !important; margin:0 !important; max-width:none !important; width:100%;}
body > .header .top-nav{display:none !important;}
body > .header .logo a{
  display:inline-block; width:100%; max-width:170px; height:38px;
  background:var(--brand-logo, url('https://webblyhosting.com/images/webblymediablack.svg')) left center/contain no-repeat;
}
body > .header .logo a img{display:none !important;}

body > .nav-content{
  position:fixed; top:82px; left:0; width:var(--sb); bottom:0; z-index:39;
  background:var(--card); border-right:1px solid var(--line);
  overflow-y:auto; padding:16px 0;
}
body > .nav-content .navbar{padding:0 !important; display:block;}
body > .nav-content .navbar-toggler{display:none;}
body > .nav-content .navbar-collapse{display:block !important;}
body > .nav-content .navbar-collapse > .container-md{
  display:flex !important; flex-direction:column !important; align-items:stretch !important;
  padding:0 14px !important; margin:0 !important; max-width:none !important; height:100%;
}
body > .nav-content .navbar-nav{flex-direction:column !important; width:100%; gap:4px;}
body > .nav-content .navbar-nav + .navbar-nav{margin-top:auto; padding-top:12px; border-top:1px solid var(--line-soft);}
body > .nav-content .nav-item{width:100%; position:relative;}

/* nav links */
body > .nav-content .nav-link,
body > .nav-content .dropdown-item{
  transition:background-color 120ms ease, color 120ms ease, transform 120ms ease;
}
body > .nav-content .nav-link{
  display:flex !important; align-items:center; gap:12px;
  padding:11px 13px !important; border-radius:12px; color:var(--muted) !important;
  font-size:14px; font-weight:500; line-height:1.2;
}
body > .nav-content .nav-link:hover{background:var(--wh-soft); color:var(--wh) !important; transform:translateX(2px);}
body > .nav-content .nav-item.active > .nav-link{background:var(--wh-soft); color:var(--wh) !important; font-weight:600;}

/* hide Blesta's empty <i> placeholders; keep real ones sized */
body > .nav-content .nav-link > i:empty{display:none;}
body > .nav-content .nav-link > i:not(:empty){width:20px; text-align:center; font-size:15px;}

/* premium icons via CSS (main nav, fixed order) */
body > .nav-content .navbar-nav:first-of-type > .nav-item > .nav-link::before{
  font-family:"Font Awesome 5 Free","Font Awesome 6 Free","FontAwesome";
  font-weight:900; width:20px; text-align:center; font-size:15px; color:inherit; flex-shrink:0;
}
body > .nav-content .navbar-nav:first-of-type > .nav-item:nth-of-type(1) > .nav-link::before{content:"\f009";} /* dashboard */
body > .nav-content .navbar-nav:first-of-type > .nav-item:nth-of-type(2) > .nav-link::before{content:"\f1b2";} /* services */
body > .nav-content .navbar-nav:first-of-type > .nav-item:nth-of-type(3) > .nav-link::before{content:"\f0ac";} /* domains */
body > .nav-content .navbar-nav:first-of-type > .nav-item:nth-of-type(4) > .nav-link::before{content:"\f07a";} /* order */
body > .nav-content .navbar-nav:first-of-type > .nav-item:nth-of-type(5) > .nav-link::before{content:"\f1cd";} /* support */
body > .nav-content .navbar-nav:last-of-type > .nav-item > .nav-link::before{
  content:"\f007"; font-family:"Font Awesome 5 Free","Font Awesome 6 Free","FontAwesome";
  font-weight:900; width:20px; text-align:center; font-size:15px; flex-shrink:0;
}

/* one clean chevron on every expandable item (replaces Bootstrap's + Blesta's) */
body > .nav-content .caret{display:none !important;}
body > .nav-content .dropdown-toggle::after{
  display:inline-block !important; content:"\f078" !important;
  font-family:"Font Awesome 5 Free","Font Awesome 6 Free","FontAwesome" !important;
  font-weight:900 !important; font-size:11px !important; color:var(--faint) !important;
  border:none !important; margin-left:auto !important; vertical-align:middle; transition:transform 180ms ease;
}
body > .nav-content .nav-item.show > .nav-link.dropdown-toggle::after{transform:rotate(180deg);}

/* collapsible submenu — smooth expand/collapse */
body > .nav-content .dropdown-menu{
  display:block !important; position:static !important; float:none; border:none !important; box-shadow:none;
  background:transparent; transform:translateY(-4px); margin:2px 0 0 14px !important;
  padding:0 0 0 22px !important; border-left:2px solid var(--line-soft) !important;
  max-height:0; overflow:hidden; visibility:hidden; opacity:0; pointer-events:none;
  transition:max-height 180ms ease, opacity 120ms ease, transform 180ms ease, visibility 0s linear 180ms, padding 180ms ease;
}
body > .nav-content .dropdown-menu.show{
  max-height:600px; visibility:visible; opacity:1; transform:translateY(0); pointer-events:auto;
  padding-top:4px !important; padding-bottom:6px !important;
  transition:max-height 180ms ease, opacity 120ms ease, transform 180ms ease, visibility 0s;
}
body > .nav-content .dropdown-menu .dropdown-item{
  position:relative; padding:8px 12px; border-radius:9px; font-size:13px; color:var(--muted); display:flex; align-items:center; gap:9px;
}
body > .nav-content .dropdown-menu .dropdown-item:hover{background:var(--wh-soft); color:var(--wh); transform:translateX(2px);}
body > .nav-content .dropdown-menu .dropdown-item.active{background:var(--wh-soft) !important; color:var(--wh) !important; font-weight:600 !important;}
body > .nav-content .dropdown-menu .dropdown-item.active::before{
  content:''; position:absolute; top:20%; bottom:20%; left:-2px; width:3px; border-radius:0 3px 3px 0; background:var(--wh);
}

/* parent of the active page: no competing pill, mark sits on the child */
body > .nav-content .nav-item.dropdown.wh-has-active > .nav-link{background:transparent !important;}

/* ---------- Main column title (hidden on dashboard by client_main.pdt) ---------- */
body > .title{background:transparent; border:none; padding:30px 40px 6px;}
body > .title .container-md{padding:0 !important; margin:0 !important; max-width:none !important;}
body > .title h3{font-family:'Plus Jakarta Sans',sans-serif; font-size:27px; font-weight:800; letter-spacing:-.03em; color:var(--ink);}

/* ---------- Cards / panels ---------- */
.card-blesta, .panel, .cards .card{
  background:var(--card) !important; border:1px solid var(--line) !important;
  border-radius:var(--r) !important; box-shadow:var(--shadow) !important; overflow:hidden;
}
.card-blesta > .card-header, .panel .card-blesta > .panel-heading{
  background:#fff !important; color:var(--ink) !important; border-bottom:1px solid var(--line-soft) !important;
  padding:16px 18px !important; font-size:15px; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif;
}
.card-blesta > .card-header a, .panel .card-blesta > .panel-heading a{color:var(--wh) !important;}
.cards .card{border-bottom:3px solid var(--wh) !important;}
.cards .card h1,.cards .card h2,.cards .card .h2{color:var(--wh) !important; font-family:'Plus Jakarta Sans';}

/* ---------- Buttons ---------- */
.btn{border-radius:10px !important; font-weight:600;}
.btn-primary{background:var(--wh) !important; border-color:var(--wh) !important; box-shadow:0 6px 16px color-mix(in srgb, var(--wh) 15%, transparent);}
.btn-primary:hover,.btn-primary:focus{background:var(--wh-dark) !important; border-color:var(--wh-dark) !important;}
.btn-outline-primary{color:var(--wh) !important; border-color:var(--wh) !important; border-radius:10px !important;}
.btn-outline-primary:hover{background:var(--wh) !important; color:#fff !important;}
.btn-light{border-radius:10px !important;}

/* ---------- Forms ---------- */
.form-control,.custom-select,.input-group-text{border-radius:9px !important; border-color:var(--line) !important;}
.form-control:focus,.custom-select:focus{border-color:var(--wh) !important; box-shadow:0 0 0 .2rem color-mix(in srgb, var(--wh) 15%, transparent) !important;}

/* ---------- Alerts / badges / tabs / pagination ---------- */
.alert{border-radius:var(--r) !important; padding:1.05rem 1.2rem !important;}
.badge-primary,.badge-info{background:var(--wh) !important;}
.nav-tabs .nav-link.active{color:var(--wh) !important; border-bottom:2px solid var(--wh) !important;}
.page-link{color:var(--wh);}
.page-item.active .page-link{background:var(--wh); border-color:var(--wh);}

/* ---------- In-page secondary nav ---------- */
.list-group-item.active{background:var(--wh) !important; border-color:var(--wh) !important;}
.list-group-item-action{border-radius:10px !important; margin-bottom:2px; border:none !important;}
.list-group-item-action:hover{background:var(--wh-soft) !important; color:var(--wh) !important;}

/* ---------- Tables ---------- */
.table thead th{border-top:none; color:var(--muted); font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.02em;}
.table td,.table th{border-color:var(--line-soft);}

/* ---------- Footer ---------- */
.footer{color:var(--faint); font-size:12px;}
.footer hr{border-color:var(--line-soft);}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .wh-ov .meters{grid-template-columns:repeat(2,1fr) !important;}
  .wh-ov .addons{grid-template-columns:repeat(2,1fr) !important;}
}
@media (max-width:767px){
  body{padding-left:0;}
  body > .header{position:static; width:auto; height:auto; padding:14px 18px;}
  body > .nav-content{position:static; width:auto; bottom:auto; border-right:none; border-bottom:1px solid var(--line); padding:8px 0;}
  body > .nav-content .navbar-toggler{display:inline-block;}
  body > .nav-content .navbar-nav + .navbar-nav{margin-top:0;}
  body > .container-md{padding:0 18px 30px !important;}
  body > .title{padding:20px 18px 6px;}
  .wh-ov .meters, .wh-ov .addons{grid-template-columns:1fr !important;}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  body > .nav-content .dropdown-menu,
  body > .nav-content .nav-link,
  body > .nav-content .dropdown-item,
  body > .nav-content .dropdown-toggle::after{transition:none !important;}
}

/* hide Blesta's stock page title on every page */
body > .title{display:none !important;}

/* breathing room at the top now that the stock title is hidden */
body > .container-md{padding-top:32px !important;}

/* breathing room at the top now that the stock title is hidden */
body > .container-md{padding-top:34px !important;}

/* ===== Services filter → premium segment pills ===== */
.card-nav .card-links{
  display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 4px; padding:0; align-items:center;
}
.card-nav .card-links > li{margin:0;}
.card-nav .card-links > li > a{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:10px; font-size:13px; font-weight:600;
  color:var(--muted); background:#f1f2f6; border:1px solid transparent; line-height:1;
  transition:background-color 120ms ease, color 120ms ease;
}
.card-nav .card-links > li > a:hover{background:var(--wh-soft); color:var(--wh);}
.card-nav .card-links > li.active > a{background:var(--wh); color:#fff;}
.card-nav .card-links > li > a .badge{
  background:rgba(0,0,0,.08); color:inherit; font-size:11px; font-weight:700;
  padding:2px 7px; border-radius:20px; min-width:20px; text-align:center;
}
.card-nav .card-links > li.active > a .badge{background:rgba(255,255,255,.25); color:#fff;}

/* filter funnel button → match the pills */
.card-nav .btn-filter, .card-nav .filters-toggle, .card-nav a[href*="filter"]{
  border-radius:10px !important;
}

/* filter toggle button → match the segment pills */
.card-nav .btn-light, .card-nav .btn.float-right{
  background:#f1f2f6 !important; border:1px solid transparent !important; color:var(--muted) !important;
  border-radius:10px !important; padding:7px 12px !important; font-size:13px; font-weight:600;
  box-shadow:none !important; transition:background-color 120ms ease, color 120ms ease;
}
.card-nav .btn-light:hover, .card-nav .btn.float-right:hover,
.card-nav .btn-light.active, .card-nav .btn.float-right.active{
  background:var(--wh-soft) !important; color:var(--wh) !important;
}

/* ensure primary submit buttons keep the brand hover everywhere */
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
input[type="submit"].btn-primary:hover, button[type="submit"].btn-primary:hover{
  background:var(--wh-dark) !important; border-color:var(--wh-dark) !important; color:#fff !important;
}

/* filter panel Submit button → brand primary */
.card-content button[type="submit"],
.card-content input[type="submit"],
form button[type="submit"].btn,
.filters button[type="submit"]{
  background:var(--wh) !important; border-color:var(--wh) !important;
  color:#fff !important; border-radius:10px !important; font-weight:600; box-shadow:0 6px 16px color-mix(in srgb, var(--wh) 15%, transparent) !important;
}
.card-content button[type="submit"]:hover,
.card-content input[type="submit"]:hover,
form button[type="submit"].btn:hover,
.filters button[type="submit"]:hover{
  background:var(--wh-dark) !important; border-color:var(--wh-dark) !important; color:#fff !important;
}

/* ===== Premium components (selects, dropdowns, tabs, buttons) ===== */
select.form-control, .custom-select, .card-content select, .card-body select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-color:#fff !important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236c7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") !important;
  background-repeat:no-repeat !important; background-position:right 12px center !important; background-size:12px !important;
  padding-right:36px !important; border-radius:9px !important; border:1px solid var(--line) !important; cursor:pointer;
}
select.form-control:focus, .custom-select:focus{border-color:var(--wh) !important; box-shadow:0 0 0 .2rem color-mix(in srgb, var(--wh) 15%, transparent) !important;}

/* in-page (Bootstrap) dropdowns on account/action pages */
.card-content .dropdown-menu, .card-body .dropdown-menu{
  border:1px solid var(--line) !important; border-radius:13px !important;
  box-shadow:0 10px 34px rgba(16,10,26,.10) !important; padding:6px !important; margin-top:6px;
}
.card-content .dropdown-item, .card-body .dropdown-item{border-radius:9px; padding:9px 12px; font-size:13.5px; color:var(--ink);}
.card-content .dropdown-item:hover, .card-body .dropdown-item:hover{background:var(--wh-soft) !important; color:var(--wh) !important;}
.card-content .dropdown-divider, .card-body .dropdown-divider{border-color:var(--line-soft);}

/* tabs */
.nav-tabs{border-bottom:1px solid var(--line);}
.nav-tabs .nav-link{border:none !important; color:var(--muted); font-weight:600; padding:12px 4px; margin-right:22px; border-radius:0;}
.nav-tabs .nav-link:hover{color:var(--wh);}
.nav-tabs .nav-link.active{color:var(--wh) !important; background:transparent !important; border-bottom:2px solid var(--wh) !important;}

/* secondary / light buttons stay consistent */
.btn-secondary{background:#f1f2f6 !important; border-color:transparent !important; color:var(--ink) !important; border-radius:10px !important;}
.btn-secondary:hover{background:var(--wh-soft) !important; color:var(--wh) !important;}

/* ===== Account/action pages → match dashboard premium ===== */

/* secondary nav (left column) → one cohesive card */
.list-group{background:#fff; border:1px solid var(--line); border-radius:14px; padding:6px; box-shadow:var(--shadow);}
.list-group-item, .list-group-item-action{
  position:relative; border:none !important; background:transparent !important; border-radius:10px !important;
  padding:11px 13px !important; color:var(--muted) !important; font-weight:500; font-size:13.5px; margin:0 !important;
}
.list-group-item + .list-group-item{margin-top:2px !important;}
.list-group-item-action:hover, .list-group-item:hover{background:var(--wh-soft) !important; color:var(--wh) !important;}
.list-group-item.active{background:var(--wh-soft) !important; color:var(--wh) !important; font-weight:600;}
.list-group-item.active::before{content:''; position:absolute; left:0; top:22%; bottom:22%; width:3px; border-radius:0 3px 3px 0; background:var(--wh);}

/* empty-state / info alerts → soft, on-theme */
.alert-info{background:var(--wh-soft) !important; border:1px solid color-mix(in srgb, var(--wh) 22%, #fff) !important; color:var(--wh-dark) !important;}
.alert-success{background:#eafaf1 !important; border:1px solid #bfe9cf !important; color:#1c7a45 !important;}
.alert-warning{background:#fdf5e6 !important; border:1px solid #f5e2b8 !important; color:#8a6416 !important;}
.alert-danger{background:#fdeeee !important; border:1px solid #f6cfcf !important; color:#a12a2a !important;}

/* violet accent on radios/checkboxes; premium sub-headers */
input[type="radio"], input[type="checkbox"]{accent-color:var(--wh);}
.card-content h3, .card-body h3{font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; letter-spacing:-.01em;}

/* ===== Choices.js → Webbly theme ===== */
.choices{margin-bottom:0;}
.choices__inner{
  background:#fff !important; border:1px solid var(--line) !important; border-radius:9px !important;
  min-height:auto !important; padding:7px 30px 7px 12px !important; font-size:14px; font-family:'Inter',sans-serif;
}
.choices.is-focused .choices__inner, .choices.is-open .choices__inner{
  border-color:var(--wh) !important; box-shadow:0 0 0 .2rem color-mix(in srgb, var(--wh) 15%, transparent) !important; border-radius:9px !important;
}
.choices[data-type*=select-one]::after{border-color:var(--muted) transparent transparent !important;}
.choices[data-type*=select-one].is-open::after{border-color:transparent transparent var(--wh) !important;}
.choices__list--single{padding:2px 4px;}
.choices__list--single .choices__item{color:var(--ink);}

/* dropdown panel */
.choices__list--dropdown, .choices__list[aria-expanded]{
  border:1px solid var(--line) !important; border-radius:13px !important; margin-top:6px !important;
  box-shadow:0 10px 34px rgba(16,10,26,.10) !important; overflow:hidden; padding:6px;
}
.is-flipped .choices__list--dropdown, .is-flipped .choices__list[aria-expanded]{margin-bottom:6px !important;}
.choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item{
  border-radius:9px; padding:9px 12px !important; font-size:13.5px; color:var(--ink);
}
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted{
  background:var(--wh-soft) !important; color:var(--wh) !important;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted::after{opacity:0 !important;}

/* search box inside dropdown */
.choices__input{background:#f6f6f9 !important; border-radius:8px !important; padding:9px 11px !important; margin:2px 0 6px; font-size:13.5px;}
.choices__input:focus{outline:none; box-shadow:0 0 0 .15rem color-mix(in srgb, var(--wh) 15%, transparent);}

/* multi-select tags */
.choices__list--multiple .choices__item{background:var(--wh) !important; border-color:var(--wh) !important; border-radius:8px !important; font-weight:600;}
.choices__list--multiple .choices__item.is-highlighted{background:var(--wh-dark) !important; border-color:var(--wh-dark) !important;}

/* when an account sub-page is active, don't also highlight Dashboard */
body:has(.nav-content .dropdown-item.active) > .nav-content .navbar-nav:first-of-type > .nav-item.active > .nav-link{
  background:transparent !important; color:var(--muted) !important; font-weight:500 !important;
}

/* ===== Hostinger feel: DM Sans typography ===== */
body, .btn, .form-control, .custom-select, input, select, textarea{font-family:'DM Sans',system-ui,sans-serif !important;}
h1,h2,h3,h4,h5,.display,.card-blesta>.card-header,.ov-hero h2,.wh-ov .sec h3{font-family:'DM Sans',system-ui,sans-serif !important; letter-spacing:-.01em;}
body{color:#18181a;}


/* ===== Real top bar (account moved here via JS) ===== */
.wh-topbar{
  position:fixed; top:0; left:var(--sb); right:0; height:64px; z-index:45;
  background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:flex-end; padding:0 24px;
}
body > .container-md{padding-top:88px !important;}
.wh-topbar .nav-item{position:relative; list-style:none;}
.wh-topbar .nav-link{
  display:flex !important; align-items:center; gap:10px; padding:7px 12px 7px 8px !important;
  border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer;
  font-weight:600; font-size:13.5px; color:var(--ink) !important; text-decoration:none;
}
.wh-topbar .nav-link:hover{background:var(--wh-soft); border-color:transparent;}
.wh-topbar .nav-link > i{display:none;}
.wh-topbar .nav-link::before{
  content:"\f007"; font-family:"Font Awesome 5 Free","Font Awesome 6 Free","FontAwesome"; font-weight:900;
  width:30px; height:30px; border-radius:50%; background:linear-gradient(145deg,#a45bee,var(--wh));
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0;
}
.wh-topbar .caret, .wh-topbar .dropdown-toggle::after{
  content:"\f078"; font-family:"Font Awesome 5 Free","Font Awesome 6 Free","FontAwesome"; font-weight:900;
  font-size:10px; color:var(--faint); border:none !important; margin-left:4px; display:inline-block !important;
}
.wh-topbar .dropdown-menu{
  display:none; position:absolute; top:calc(100% + 8px); right:0; min-width:230px;
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 34px rgba(16,10,26,.12);
  padding:6px; margin:0; list-style:none;
}
.wh-topbar .nav-item.show .dropdown-menu{display:block;}
.wh-topbar .dropdown-menu .dropdown-item{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px; font-size:13.5px; color:var(--ink); text-decoration:none;}
.wh-topbar .dropdown-menu .dropdown-item:hover{background:var(--wh-soft); color:var(--wh);}
@media (max-width:767px){
  .wh-topbar{position:static; left:0; height:auto; justify-content:flex-start; padding:10px 16px; border-bottom:none;}
  body > .container-md{padding-top:16px !important;}
}

/* ===== Account = avatar circle only (Hostinger style) ===== */
.wh-topbar .nav-link{
  padding:0 !important; border:none !important; background:transparent !important;
  gap:0 !important; font-size:0 !important; border-radius:50% !important;
}
.wh-topbar .nav-link:hover{background:transparent !important;}
.wh-topbar .nav-link::before{
  width:38px !important; height:38px !important; font-size:15px !important;
  box-shadow:0 2px 8px color-mix(in srgb, var(--wh) 15%, transparent); transition:transform .15s, box-shadow .15s;
}
.wh-topbar .nav-link:hover::before{transform:scale(1.05); box-shadow:0 4px 12px color-mix(in srgb, var(--wh) 15%, transparent);}
/* hide the name text + caret, keep only the avatar */
.wh-topbar .nav-link .caret, .wh-topbar .dropdown-toggle::after{display:none !important;}

/* dropdown card → Hostinger feel: header with name, tidy rows */
.wh-topbar .dropdown-menu{min-width:250px !important; padding:8px !important; border-radius:16px !important; box-shadow:0 16px 40px rgba(16,10,26,.14) !important;}
.wh-topbar .dropdown-menu .dropdown-item{padding:11px 12px !important; font-size:13.5px !important; color:var(--ink) !important; gap:12px !important;}
.wh-topbar .dropdown-menu .dropdown-item i{width:18px; text-align:center; color:var(--muted);}
.wh-topbar .dropdown-menu .dropdown-item:hover i{color:var(--wh);}
.wh-topbar .dropdown-menu .dropdown-divider{margin:6px 4px; border-color:var(--line-soft);}

/* keep the account card inside the screen + a little right margin */
.wh-topbar{padding-right:28px !important;}
.wh-topbar .dropdown-menu{right:0 !important; left:auto !important; transform:none !important; max-width:calc(100vw - 40px);}
.wh-topbar .nav-item{position:relative;}

/* account card: header block + divider before logout */
.wh-acct-head{padding:12px 12px 12px; border-bottom:1px solid var(--line-soft); margin-bottom:6px;}
.wh-acct-head .nm{font-weight:700; font-size:14px; color:var(--ink); font-family:'DM Sans',sans-serif;}
.wh-acct-head .em{font-size:12px; color:var(--muted); margin-top:2px; word-break:break-all;}
.wh-topbar .dropdown-menu .dropdown-item[href*="logout"]{border-top:1px solid var(--line-soft); margin-top:6px; padding-top:12px !important;}

/* account card → more premium (Hostinger feel) */
.wh-topbar .dropdown-menu{min-width:270px !important; padding:0 !important; border-radius:16px !important; overflow:hidden;}
.wh-acct-head{
  display:flex; align-items:center; gap:12px; padding:16px 16px !important; margin:0 !important;
  border-bottom:1px solid var(--line-soft);
}
.wh-acct-head::before{
  content:"\f007"; font-family:"Font Awesome 5 Free","Font Awesome 6 Free","FontAwesome"; font-weight:900;
  width:40px; height:40px; border-radius:50%; background:linear-gradient(145deg,#a45bee,var(--wh));
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0;
}
.wh-acct-head .nm{font-weight:700; font-size:14.5px; line-height:1.2;}
.wh-acct-head .em{font-size:12px; color:var(--muted); margin-top:2px;}
.wh-topbar .dropdown-menu .dropdown-item{padding:11px 16px !important; margin:0 !important; border-radius:0 !important; font-size:14px !important;}
.wh-topbar .dropdown-menu .dropdown-item:hover{background:var(--wh-soft) !important;}
.wh-topbar .dropdown-menu .dropdown-item i{width:20px; color:var(--muted);}
.wh-topbar .dropdown-menu .dropdown-item:hover i{color:var(--wh);}
.wh-topbar .dropdown-menu .dropdown-item[href*="logout"]{border-top:1px solid var(--line-soft); margin-top:0 !important; padding-top:12px !important; padding-bottom:12px !important;}
/* wrap the menu links in a little vertical padding */
.wh-topbar .dropdown-menu{padding-bottom:6px !important;}

/* account card grouped like Hostinger (thin dividers between groups) */
.wh-topbar .dropdown-menu .dropdown-item{position:relative;}
.wh-topbar .dropdown-menu .dropdown-item:nth-child(3),
.wh-topbar .dropdown-menu .dropdown-item:nth-child(5){
  border-top:1px solid var(--line-soft); margin-top:6px !important; padding-top:16px !important;
}
.wh-topbar .dropdown-menu .dropdown-item[href*="logout"]{
  border-top:1px solid var(--line-soft); margin-top:6px !important; padding-top:14px !important;
}

/* account header: name + email only, no avatar (cleaner, like Hostinger) */
.wh-acct-head::before{display:none !important;}
.wh-acct-head{display:block !important; padding:16px 18px !important;}
.wh-acct-head .nm{font-size:15px; font-weight:700;}
.wh-topbar .dropdown-menu .dropdown-item{padding:12px 18px !important;}

/* ===== Service manage view → Hostinger style ===== */
/* left submenu ($tabs) as a cohesive card */
#client_services_manage, .content_section#client_services_manage{border:none !important; box-shadow:none !important; background:transparent !important;}
.col-md-3 .list-group, .col-md-3 ul.nav{background:#fff; border:1px solid var(--line); border-radius:16px; padding:6px; box-shadow:var(--shadow);}
.col-md-3 .nav .nav-link, .col-md-3 .list-group-item{
  display:flex; align-items:center; gap:11px; padding:11px 13px !important; border-radius:11px !important;
  color:var(--muted) !important; font-weight:600; font-size:13.5px; border:none !important; background:transparent !important; margin:0 0 2px !important;
}
.col-md-3 .nav .nav-link:hover, .col-md-3 .list-group-item:hover{background:var(--wh-soft) !important; color:var(--wh) !important;}
.col-md-3 .nav .nav-link.active, .col-md-3 .list-group-item.active{background:var(--wh-soft) !important; color:var(--wh) !important; border:none !important;}

/* service info box → clean two-column detail table */
.service-info label{display:block; font-size:12px; font-weight:600; color:var(--faint); text-transform:uppercase; letter-spacing:.03em; margin:14px 0 2px;}
.service-info h4{font-family:'DM Sans',sans-serif; font-size:15px; font-weight:700; color:var(--ink); margin:0;}
.service-info label:first-child{margin-top:0;}
.col-border{border-right:1px solid var(--line-soft);}
.panel-pad{padding:8px 4px;}

/* resource cards (sample now → Plesk data later) */

/* =====================================================================

/* ===== Fullbredds-topbar med logga till vänster (Kraken + Webbly) ===== */
.wh-topbar{left:0 !important; justify-content:space-between !important;}
.wh-topbar::before{
  content:""; flex:0 0 auto; align-self:center;
  width:320px; height:40px;
  background:var(--brand-logo, url('https://webblyhosting.com/images/webblymediablack.svg')) left center/contain no-repeat;
}
body > .header{display:none !important;}
body > .nav-content{top:64px !important; bottom:0 !important; height:auto !important;}

/* ===== Blesta content_section: platt bakgrund överallt (plattan bakom korten bort) ===== */
html body .content_section{background:transparent !important; box-shadow:none !important; border:none !important;}

/* ===== In-page dropdowns (t.ex. ticket OPTIONS) ska ligga ÖVER kort under ===== */
.card .dropdown, .card-content .dropdown, .card-body .dropdown, .btn-group{position:relative;}
.card .dropdown-menu.show,
.card-content .dropdown-menu.show,
.card-body .dropdown-menu.show,
.btn-group .dropdown-menu.show{z-index:1050 !important;}
/* korten runt en öppen meny får inte klippa den */
.card:has(.dropdown-menu.show),
.card-content:has(.dropdown-menu.show),
.card-body:has(.dropdown-menu.show){overflow:visible !important;}

/* ===== Ticket OPTIONS-dropdown över efterföljande rader/kort ===== */
.wo-tickets .btn-group{position:relative;}
.wo-tickets .btn-group.show, .wo-tickets .dropdown.show{z-index:1200 !important;}
.wo-tickets .dropdown-menu.show{z-index:1200 !important;}
/* rad/kort som innehåller en öppen meny får inte klippa eller fångas under nästa */
.wo-tickets tr:has(.dropdown-menu.show),
.wo-tickets li:has(.dropdown-menu.show),
.wo-tickets .card:has(.dropdown-menu.show){position:relative; z-index:1200 !important; overflow:visible !important;}

/* ===== Ticket OPTIONS-dropdown: tvinga nedåt (överstyr Popper-flip) ===== */
.wo-tickets .dropdown-menu.show{
  top:100% !important;
  bottom:auto !important;
  transform:translate3d(0,4px,0) !important;
  will-change:auto !important;
}

/* ===== Ticket OPTIONS: lyft hela raden med öppen meny över efterföljande rader ===== */
.wo-tickets *:has(> .btn-group .dropdown-menu.show),
.wo-tickets tr:has(.dropdown-menu.show),
.wo-tickets li:has(.dropdown-menu.show),
.wo-tickets .wo-ticket-row:has(.dropdown-menu.show){
  position:relative !important; z-index:2000 !important; overflow:visible !important;
}
/* själva menyn högst upp i stacken */
.wo-tickets .dropdown-menu.show{z-index:2001 !important;}
/* alla rader default lägre, så bara den öppna vinner */
.wo-tickets tr, .wo-tickets li, .wo-tickets .wo-ticket-row{position:relative; z-index:1;}

/* ===== Ticket-tabell: sluta klippa OPTIONS-dropdownen ===== */
.wo-tickets .table{overflow:visible !important;}
.wo-tickets .table-responsive{overflow:visible !important;}
/* rundade hörn utan overflow:hidden - klipp bara hörncellerna */
.wo-tickets .table thead th:first-child{border-top-left-radius:14px;}
.wo-tickets .table thead th:last-child{border-top-right-radius:14px;}
.wo-tickets .table tbody tr:last-child td:first-child{border-bottom-left-radius:14px;}
.wo-tickets .table tbody tr:last-child td:last-child{border-bottom-right-radius:14px;}

/* ===== Ticket OPTIONS-dropdown: brand-färgad border istället för ljus ===== */
.wo-tickets .dropdown-menu{border:1px solid var(--wh) !important;}

/* ===== Choices filter-dropdown: solid bakgrund + sluta klippas (Kraken+Webbly) ===== */
.choices__list--dropdown, .choices__list[aria-expanded]{
  background:var(--panel-bg, #fff) !important;
  z-index:1200 !important;
}
.choices__list--dropdown .choices__list, .choices__list[aria-expanded] .choices__list{
  background:var(--panel-bg, #fff) !important;
}
.choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item{
  background:var(--panel-bg, #fff) !important;
}
/* wrappern runt filtret får inte klippa panelen */
.widget_filter_form, .widget_filter_form .card, .widget_filter_form .card-body{overflow:visible !important;}

/* ===== Filter-området (Choices) ska ligga över ticket-tabellen ===== */
.widget_filter_form{position:relative; z-index:3000 !important;}
.widget_filter_form .choices{position:relative; z-index:3000 !important;}
.choices.is-open{position:relative; z-index:3000 !important;}
.choices__list--dropdown, .choices__list[aria-expanded]{z-index:3000 !important;}
/* tabellen och dess wrapper hålls under filtret */
.wo-tickets, .wo-tickets .table, .wo-tickets .table-responsive{position:relative; z-index:1 !important;}

/* ===== Filter över tabell: neutralisera rad-lyft, ge filtret eget högt lager ===== */
/* ticket-raderna ska INTE lyftas (de la sig över den nedhängande panelen) */
.wo-tickets tbody tr, .wo-tickets tr{z-index:auto !important;}
/* hela filter-blocket som ett eget lager ovanpå allt nedanför */
.widget_filter_form{position:relative !important; z-index:5000 !important; isolation:isolate;}
.widget_filter_form .choices.is-open{z-index:5001 !important;}
.choices__list--dropdown, .choices__list[aria-expanded]{z-index:5002 !important;}

/* ===== Ta bort tabellblockets egna stacking-context (fångade panelen) ===== */
.wo-tickets, .wo-tickets .table, .wo-tickets .table-responsive{z-index:auto !important;}

/* ===== Sista utväg: filter-kortet eget lager, tabellen isolerad under ===== */
.col-md-12:has(.widget_filter_form){position:relative; z-index:6000;}
.widget_filter_form{position:relative; z-index:6000 !important;}
.wo-tickets{position:relative; z-index:0 !important; isolation:isolate;}

/* ===== .table-responsive klippte Choices-panelen (overflow-x:auto) ===== */
.table-responsive{overflow:visible !important;}

/* ===== Kort med filter får inte klippa Choices-panelen (overflow:hidden på .card-blesta) ===== */
.card-blesta:has(.widget_filter_form),
.card.content_section:has(.widget_filter_form),
#client_tickets{overflow:visible !important;}
#client_tickets .card-content, #client_tickets .card-body{overflow:visible !important;}

/* ===== Primary buttons on the pages built 2026-07-22 =====
   These were written as '.x--primary, .x--primary:hover' with identical
   values, so they had no hover state at all. Give them the SAME behaviour
   the older pages already use: darken the fill, keep the label. */
.wh-mlbtn--primary:hover:not([disabled]):not(:disabled),
.wh-ftpbtn--primary:hover:not([disabled]):not(:disabled),
.wh-sdbtn--primary:hover:not([disabled]):not(:disabled),
.wh-dzbtn--primary:hover:not([disabled]):not(:disabled),
.wh-pvbtn--primary:hover:not([disabled]):not(:disabled),
.wh-ctbtn--primary:hover:not([disabled]):not(:disabled),
.wh-scbtn--primary:hover:not([disabled]):not(:disabled),
.wh-stbtn--primary:hover:not([disabled]):not(:disabled),
.wh-wpibtn--primary:hover:not([disabled]):not(:disabled),
.wpi-a.is-primary:hover:not([disabled]):not(:disabled),
.st-b--primary:hover:not([disabled]):not(:disabled),
.sc-btn--primary:hover:not([disabled]):not(:disabled),
.wh-ml__new:hover:not([disabled]):not(:disabled),
.wh-ftp__new:hover:not([disabled]):not(:disabled),
.wh-sd__new:hover:not([disabled]):not(:disabled),
.wh-ct__new:hover:not([disabled]):not(:disabled),
.wh-dz__go:hover:not([disabled]):not(:disabled){
  background:var(--wh-dark) !important;
  border-color:var(--wh-dark) !important;
  color:#fff !important;
}
.wh-mlbtn--primary:hover:not([disabled]):not(:disabled) *,
.wh-ftpbtn--primary:hover:not([disabled]):not(:disabled) *,
.wh-sdbtn--primary:hover:not([disabled]):not(:disabled) *,
.wh-dzbtn--primary:hover:not([disabled]):not(:disabled) *,
.wh-pvbtn--primary:hover:not([disabled]):not(:disabled) *,
.wh-ctbtn--primary:hover:not([disabled]):not(:disabled) *,
.wh-scbtn--primary:hover:not([disabled]):not(:disabled) *,
.wh-stbtn--primary:hover:not([disabled]):not(:disabled) *,
.wh-wpibtn--primary:hover:not([disabled]):not(:disabled) *,
.wpi-a.is-primary:hover:not([disabled]):not(:disabled) *,
.st-b--primary:hover:not([disabled]):not(:disabled) *,
.sc-btn--primary:hover:not([disabled]):not(:disabled) *,
.wh-ml__new:hover:not([disabled]):not(:disabled) *,
.wh-ftp__new:hover:not([disabled]):not(:disabled) *,
.wh-sd__new:hover:not([disabled]):not(:disabled) *,
.wh-ct__new:hover:not([disabled]):not(:disabled) *,
.wh-dz__go:hover:not([disabled]):not(:disabled) *{
  color:#fff !important;
}
.wh-mlbtn--primary:hover:not([disabled]):not(:disabled) svg,
.wh-mlbtn--primary:hover:not([disabled]):not(:disabled) svg *,
.wh-ftpbtn--primary:hover:not([disabled]):not(:disabled) svg,
.wh-ftpbtn--primary:hover:not([disabled]):not(:disabled) svg *,
.wh-sdbtn--primary:hover:not([disabled]):not(:disabled) svg,
.wh-sdbtn--primary:hover:not([disabled]):not(:disabled) svg *,
.wh-dzbtn--primary:hover:not([disabled]):not(:disabled) svg,
.wh-dzbtn--primary:hover:not([disabled]):not(:disabled) svg *,
.wh-pvbtn--primary:hover:not([disabled]):not(:disabled) svg,
.wh-pvbtn--primary:hover:not([disabled]):not(:disabled) svg *,
.wh-ctbtn--primary:hover:not([disabled]):not(:disabled) svg,
.wh-ctbtn--primary:hover:not([disabled]):not(:disabled) svg *,
.wh-scbtn--primary:hover:not([disabled]):not(:disabled) svg,
.wh-scbtn--primary:hover:not([disabled]):not(:disabled) svg *,
.wh-stbtn--primary:hover:not([disabled]):not(:disabled) svg,
.wh-stbtn--primary:hover:not([disabled]):not(:disabled) svg *,
.wh-wpibtn--primary:hover:not([disabled]):not(:disabled) svg,
.wh-wpibtn--primary:hover:not([disabled]):not(:disabled) svg *,
.wpi-a.is-primary:hover:not([disabled]):not(:disabled) svg,
.wpi-a.is-primary:hover:not([disabled]):not(:disabled) svg *,
.st-b--primary:hover:not([disabled]):not(:disabled) svg,
.st-b--primary:hover:not([disabled]):not(:disabled) svg *,
.sc-btn--primary:hover:not([disabled]):not(:disabled) svg,
.sc-btn--primary:hover:not([disabled]):not(:disabled) svg *,
.wh-ml__new:hover:not([disabled]):not(:disabled) svg,
.wh-ml__new:hover:not([disabled]):not(:disabled) svg *,
.wh-ftp__new:hover:not([disabled]):not(:disabled) svg,
.wh-ftp__new:hover:not([disabled]):not(:disabled) svg *,
.wh-sd__new:hover:not([disabled]):not(:disabled) svg,
.wh-sd__new:hover:not([disabled]):not(:disabled) svg *,
.wh-ct__new:hover:not([disabled]):not(:disabled) svg,
.wh-ct__new:hover:not([disabled]):not(:disabled) svg *,
.wh-dz__go:hover:not([disabled]):not(:disabled) svg,
.wh-dz__go:hover:not([disabled]):not(:disabled) svg *{
  color:#fff !important;
  stroke:#fff !important;
}