/* ==========================================================================
   WinsHosting look for the CoreInto "classic" client area (buy1.winshosting.com)
   --------------------------------------------------------------------------
   Loaded after base.css and client.css. Same design as buy.winshosting.com and
   www.winshosting.com: Bricolage Grotesque + Figtree, WinsHosting blue/green/amber,
   the dark top bar with whois lookup, the mega-menu header, the dark footer, the
   floating buttons, the mobile bottom bar and the cookie banner.
   The WinsHosting tokens are prefixed --wh-* so they never clash with CoreInto's
   own --bg/--surface/--ink/... names; section 2 points CoreInto's tokens at them,
   so every CoreInto page (cards, tables, store, cart, invoices, tickets) follows.
   Light/dark: data-theme on <html> (app.js, "coreinto-theme"), else prefers-color-scheme.
   ========================================================================== */

/* ---------- 1. WinsHosting design tokens (same values as www.winshosting.com) ---------- */
:root{
  --wh-ink:#13222C; --wh-text:#24343E; --wh-muted:#5A6B76; --wh-bg:#FFFFFF; --wh-surface:#F1F6F9; --wh-surface-2:#E6EFF4;
  --wh-line:#D4E0E7; --wh-brand:#0A7DBB; --wh-brand-strong:#06619A; --wh-brand-soft:#E3F2FA; --wh-brand-logo:#0A86C8;
  --wh-leaf:#0E7044; --wh-leaf-soft:#E2F4EA; --wh-star:#FFB020; --wh-star-soft:#FFF4DC; --wh-star-ink:#8A5A00; --wh-danger:#C2362F; --wh-danger-soft:#FCE9E7;
  --wh-card:#FFFFFF; --wh-shadow:0 1px 2px rgba(19,34,44,.06),0 8px 24px -12px rgba(19,34,44,.18);
  --wh-on-brand:#FFFFFF; --wh-on-leaf:#FFFFFF; --wh-on-danger:#FFFFFF; --wh-chrome:#13222C; --wh-chrome-text:#C8D6DE; --wh-input-bg:#FFFFFF;
  --wh-radius-s:6px; --wh-radius:12px; --wh-radius-l:20px; --wh-radius-field:10px;
  --wh-font-display:"Bricolage Grotesque","Inter Display",Inter,system-ui,sans-serif;
  --wh-font-body:"Figtree",Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wh-wrap:1200px; color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --wh-ink:#EAF2F6; --wh-text:#C9D7DF; --wh-muted:#8FA3AF; --wh-bg:#0B151B; --wh-surface:#111F27; --wh-surface-2:#172A34;
    --wh-line:#22384A; --wh-brand:#45B4EE; --wh-brand-strong:#7CCBF4; --wh-brand-soft:#0F2A3A; --wh-brand-logo:#45B4EE;
    --wh-leaf:#4CC48A; --wh-leaf-soft:#10301F; --wh-star:#FFC247; --wh-star-soft:#33280F; --wh-star-ink:#FFC247; --wh-danger:#FF7A70; --wh-danger-soft:#3A1715;
    --wh-card:#0F1D25; --wh-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.7);
    --wh-on-brand:#06202E; --wh-on-leaf:#06140D; --wh-on-danger:#1F0705; --wh-chrome:#060D11; --wh-input-bg:#0B171E; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --wh-ink:#EAF2F6; --wh-text:#C9D7DF; --wh-muted:#8FA3AF; --wh-bg:#0B151B; --wh-surface:#111F27; --wh-surface-2:#172A34;
  --wh-line:#22384A; --wh-brand:#45B4EE; --wh-brand-strong:#7CCBF4; --wh-brand-soft:#0F2A3A; --wh-brand-logo:#45B4EE;
  --wh-leaf:#4CC48A; --wh-leaf-soft:#10301F; --wh-star:#FFC247; --wh-star-soft:#33280F; --wh-star-ink:#FFC247; --wh-danger:#FF7A70; --wh-danger-soft:#3A1715;
  --wh-card:#0F1D25; --wh-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.7);
  --wh-on-brand:#06202E; --wh-on-leaf:#06140D; --wh-on-danger:#1F0705; --wh-chrome:#060D11; --wh-input-bg:#0B171E; color-scheme:dark;
}

/* ---------- 2. CoreInto tokens pointed at the WinsHosting ones ----------
   CoreInto pages are built from these, so this one block re-colours every page
   (store, cart, checkout, invoices, tickets, domains, services) in both modes. */
html body.wh-body, html:root body.client.wh-body, html:root:not([data-theme="light"]) body.client.wh-body {
  --bg: var(--wh-bg); --surface: var(--wh-card); --surface-2: var(--wh-surface); --ink: var(--wh-ink); --muted: var(--wh-muted); --line: var(--wh-line);
  --accent: var(--wh-brand); --accent-ink: var(--wh-on-brand); --accent-soft: var(--wh-brand-soft);
  --bar: var(--wh-chrome); --bar-2: #183242; --bar-ink: #DCE7ED; --bar-muted: #9DB0BC;
  --good: var(--wh-leaf); --good-soft: var(--wh-leaf-soft); --bad: var(--wh-danger); --bad-soft: var(--wh-danger-soft); --warn: var(--wh-star-ink); --warn-soft: var(--wh-star-soft);
  --t-green: #0E7044; --t-pink: #B4316B; --t-amber: #A35F00; --t-blue: #0A7DBB;
  --shadow: none; --radius: 12px; --ctl-h: 42px;
  --head: var(--wh-chrome); --head-ink: #FFFFFF; --band: var(--wh-surface); --band-ink: var(--wh-ink); --label: var(--wh-surface);
  --st-teal: #0A7DBB; --st-blue: #0A7DBB; --st-green: #0E7044;
}

/* ---------- 3. Base type and CoreInto components in the WinsHosting style ---------- */
html body.wh-body { background: var(--wh-bg); color: var(--wh-text); font-family: var(--wh-font-body); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
.wh-body input, .wh-body button, .wh-body select, .wh-body textarea { font-family: var(--wh-font-body); }
.wh-body h1, .wh-body h2, .wh-body h3, .wh-body h4, .wh-body legend, .wh-body .big, .wh-body .num { font-family: var(--wh-font-display); color: var(--wh-ink); letter-spacing: -.015em; }
.wh-body h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; line-height: 1.2; }
.wh-body h2 { font-size: 1.2rem; font-weight: 700; }
.wh-body h3 { font-size: 1.05rem; font-weight: 700; }
.wh-body a { color: var(--wh-brand); text-underline-offset: 3px; }
.wh-body a:hover { color: var(--wh-brand-strong); }
.wh-body ::selection { background: var(--wh-brand); color: var(--wh-on-brand); }
.wh-body :focus-visible, .wh-body input:focus-visible, .wh-body button:focus-visible, .wh-body a:focus-visible { outline: 3px solid var(--wh-star); outline-offset: 2px; }
.wh-body code { background: var(--wh-brand-soft); color: var(--wh-brand-strong); }
.wh-body .muted, .wh-body .help, .wh-body small { color: var(--wh-muted); }
.wh-body .page { padding-top: 32px; padding-bottom: 64px; }
.wh-body .wrap { max-width: var(--wh-wrap); padding-left: 20px; padding-right: 20px; }

/* buttons: WinsHosting shapes (small corners), weights and colours */
.wh-body .btn { min-height: 42px; padding: 0 20px; border: 1.5px solid var(--wh-line); border-radius: 5px; background: transparent; color: var(--wh-ink); font: 600 .95rem/1.25 var(--wh-font-body); transition: background .15s, color .15s, border-color .15s; }
.wh-body .btn:hover { background: var(--wh-surface); border-color: var(--wh-brand); color: var(--wh-brand); }
.wh-body .btn-primary { background: var(--wh-brand); border-color: var(--wh-brand); color: var(--wh-on-brand); }
.wh-body .btn-primary:hover, .wh-body .btn-primary:focus { background: var(--wh-brand-strong); border-color: var(--wh-brand-strong); color: var(--wh-on-brand); filter: none; }
.wh-body .btn-success { background: var(--wh-leaf); border-color: var(--wh-leaf); color: var(--wh-on-leaf); }
.wh-body .btn-success:hover { background: #0B5C38; border-color: #0B5C38; color: #fff; }
.wh-body .btn-danger { background: var(--wh-danger); border-color: var(--wh-danger); color: var(--wh-on-danger); }
.wh-body .btn-danger:hover { background: #A02B25; border-color: #A02B25; color: #fff; }
.wh-body .btn-dark { background: var(--wh-ink); border-color: var(--wh-ink); color: var(--wh-bg); }
.wh-body .btn-sm { min-height: 32px; padding: 0 14px; font-size: .875rem; }
.wh-body .btn[disabled], .wh-body .btn.disabled { opacity: .55; }
.wh-body .linklike { color: inherit; }

/* form fields */
.wh-body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.switch), .wh-body select, .wh-body textarea { background-color: var(--wh-input-bg); color: var(--wh-ink); border: 1px solid var(--wh-line); border-radius: 5px; min-height: 42px; padding: 8px 14px; }
.wh-body textarea { min-height: 96px; }
.wh-body input:focus, .wh-body select:focus, .wh-body textarea:focus { border-color: var(--wh-brand); box-shadow: 0 0 0 3px var(--wh-brand-soft); outline: none; }
.wh-body input::placeholder, .wh-body textarea::placeholder { color: var(--wh-muted); opacity: 1; }
.wh-body input[disabled], .wh-body input[readonly], .wh-body select[disabled], .wh-body textarea[readonly] { background-color: var(--wh-surface); color: var(--wh-muted); }
.wh-body .stack label, .wh-body .field > label, .wh-body label { color: var(--wh-ink); font-weight: 600; }
.wh-body .check { font-weight: 500 !important; color: var(--wh-text); }
.wh-body input[type="checkbox"], .wh-body input[type="radio"] { accent-color: var(--wh-brand); }

/* cards, panels, tables, badges */
.wh-body .card, .wh-body .sb-block, .wh-body .acct-card, .wh-body .auth-box { border-radius: var(--wh-radius); box-shadow: none; border-color: var(--wh-line); background: var(--wh-card); color: var(--wh-text); }
.wh-body .card > h2:first-child, .wh-body .card > .card-head { border-radius: var(--wh-radius) var(--wh-radius) 0 0; font-family: var(--wh-font-display); padding-top: 12px; padding-bottom: 12px; }
.wh-body .card-head h2 { font-family: var(--wh-font-display); }
.wh-body .table { color: var(--wh-text); }
.wh-body .table thead th { background: var(--wh-surface); color: var(--wh-ink); font-weight: 700; letter-spacing: 0; text-transform: none; font-size: .86rem; }
.wh-body .table tbody tr:hover > td { background: color-mix(in srgb, var(--wh-brand-soft) 55%, transparent); }
.wh-body .badge { border-radius: 999px; padding: 2px 10px; }
.wh-body .alert { border-radius: var(--wh-radius); padding: 14px 18px; }
.wh-body .alert-good { background: var(--wh-leaf-soft); color: var(--wh-leaf); }
.wh-body .alert-bad { background: var(--wh-danger-soft); color: var(--wh-danger); }
.wh-body .alert-warn { background: var(--wh-star-soft); color: var(--wh-star-ink); }
.wh-body .tab { font-weight: 600; border-radius: 5px 5px 0 0; }
.wh-body .tab.on { box-shadow: inset 0 2px 0 var(--wh-brand); }
.wh-body .drop { background: var(--wh-card); border-color: var(--wh-line); border-radius: var(--wh-radius); box-shadow: var(--wh-shadow); padding: 6px; }
.wh-body .drop a, .wh-body .drop .linklike { border-radius: 8px; padding: 7px 12px; color: var(--wh-text); font-weight: 500; }
.wh-body .drop a:hover, .wh-body .drop .linklike:hover { background: var(--wh-surface); color: var(--wh-brand); }
.wh-body .drop > li + li { border-top: 0; }
.wh-body .drop .who { border-bottom-color: var(--wh-line); color: var(--wh-ink); }
.wh-body dialog.modal { border-radius: var(--wh-radius); border: 1px solid var(--wh-line); }
.wh-body .modal-head { background: var(--wh-surface); color: var(--wh-ink); border-bottom: 1px solid var(--wh-line); }
.wh-body .modal-head h2 { color: var(--wh-ink); }

/* account sidebar like the WHMCS sidebar panels on buy.winshosting.com */
.wh-body .acct-side { top: 96px; }
.wh-body .sb-head { background: var(--wh-surface); color: var(--wh-ink); font-family: var(--wh-font-display); font-size: .98rem; font-weight: 700; padding: 11px 16px; }
.wh-body .sb-head .ico { color: var(--wh-brand); }
.wh-body .sb-links { padding: 0; }
.wh-body .sb-links li + li a { border-top: 1px solid var(--wh-line); }
.wh-body .sb-links a { padding: 10px 16px; color: var(--wh-text); }
.wh-body .sb-links a:hover { background: var(--wh-surface); color: var(--wh-brand); }
.wh-body .sb-links a.on { background: var(--wh-brand-soft); color: var(--wh-brand-strong); box-shadow: inset 3px 0 0 var(--wh-brand); }
.wh-body .sb-links a.on .ico, .wh-body .sb-links a:hover .ico { color: var(--wh-brand); }
.wh-body .acct-credit { background: var(--wh-leaf-soft); color: var(--wh-leaf); border-radius: 8px; }
.wh-body .avatar { background: var(--wh-brand); color: var(--wh-on-brand); }

/* dashboard stat tiles keep their colours, rounded like WinsHosting cards */
.wh-body .stat, .wh-body .tile { border-radius: var(--wh-radius); }
.wh-body .stat .num, .wh-body .tile .num { color: #fff; }
.wh-body .stat small, .wh-body .tile small, .wh-body .stat .stat-body, .wh-body .tile span { color: rgba(255,255,255,.92); }
.wh-body .hero .btn-light, .wh-body .domain-hero .btn-light { background: var(--wh-card); border-color: var(--wh-line); color: var(--wh-ink); }
.wh-body .hero .btn-light:hover, .wh-body .domain-hero .btn-light:hover { border-color: var(--wh-brand); color: var(--wh-brand); }
.wh-body .welcome h1 { margin-bottom: 4px; }

/* store and domain heroes: the light WinsHosting hero (soft blue + amber glow) instead of the dark band */
.wh-body .hero, .wh-body .domain-hero { background: radial-gradient(600px 300px at 85% 10%, var(--wh-brand-soft), transparent 70%), radial-gradient(400px 200px at 10% 100%, var(--wh-star-soft), transparent 70%), var(--wh-surface); color: var(--wh-text); border: 1px solid var(--wh-line); border-radius: var(--wh-radius-l); }
.wh-body .hero::after { display: none; }
.wh-body .hero h1, .wh-body .hero h2, .wh-body .domain-hero h1, .wh-body .domain-hero h2 { color: var(--wh-ink); }
.wh-body .hero p, .wh-body .domain-hero p { color: var(--wh-text); }
.wh-body .domain-hero .hero-off { color: var(--wh-leaf); }
.wh-body .domain-hero .domain-search input { background: var(--wh-input-bg); color: var(--wh-ink); }
.wh-body .quick { background: var(--wh-card); border: 1px solid var(--wh-line); border-radius: var(--wh-radius); overflow: hidden; }
.wh-body .quick a { color: var(--wh-ink); border-left-color: var(--wh-line); text-transform: none; font-size: .9rem; }
.wh-body .quick a .ico { color: var(--wh-brand); }
.wh-body .quick a:hover { background: var(--wh-surface); color: var(--wh-brand); }
.wh-body .plan-head { background: var(--wh-chrome); }
.wh-body .group-card:hover, .wh-body a.price-card:hover, .wh-body .cat-card:hover { border-color: var(--wh-brand); box-shadow: var(--wh-shadow); }
.wh-body .mail-frame { background: #fff; }
.wh-body .country-switch { margin-bottom: 14px; }


/* ---------- 4. WinsHosting chrome (copied from buy.winshosting.com, tokens renamed) ---------- */
.wh-skip{position:absolute;left:-999px;top:8px;z-index:2000;background:var(--wh-ink);color:var(--wh-bg)!important;padding:8px 14px;border-radius:6px}
.wh-skip:focus{left:8px}
.wh-wrap{max-width:var(--wh-wrap);margin:0 auto;padding:0 20px}
.wh-ico{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.2em;display:inline-block}
/* ---------- 3. Topbar (whois lookup + account links) ---------- */
.wh-topbar{background:var(--wh-chrome);color:var(--wh-chrome-text);font-size:.875rem;position:relative;z-index:60}
.wh-topbar .wh-wrap{display:flex;align-items:center;gap:16px;min-height:46px;flex-wrap:wrap;padding-top:4px;padding-bottom:4px}
.wh-whois{display:flex;align-items:center;gap:8px;flex:1 1 280px;max-width:420px;margin:0}
.wh-body .wh-whois label{white-space:nowrap;color:#fff;font-weight:600;margin:0;font-size:.875rem}
.wh-whois input{flex:1;min-width:0;height:auto;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:999px;padding:6px 14px;font:inherit;box-shadow:none}
.wh-whois input::placeholder{color:#9DB0BC;opacity:1}
.wh-whois input:focus{outline:none;border-color:var(--wh-star);background:rgba(255,255,255,.12)}
.wh-whois button{background:var(--wh-star);color:#2A1D00;border:0;border-radius:999px;padding:6px 14px;font:600 .85rem var(--wh-font-body);cursor:pointer;white-space:nowrap}
.wh-whois button:hover{background:#F59E0B}
.wh-topbar-links{display:flex;gap:6px 16px;align-items:center;margin:0 0 0 auto;padding:0;list-style:none;flex-wrap:wrap}
.wh-topbar-links>li{margin:0;padding:0;position:relative}
.wh-body .wh-topbar-links>li>a{color:#DCE7ED;text-decoration:none;display:inline-flex;gap:6px;align-items:center;font-size:.875rem;font-weight:500;padding:4px 0;opacity:1;background:none}
.wh-body .wh-topbar-links>li>a:hover,.wh-body .wh-topbar-links>li>a:focus{color:#fff;background:none}
.wh-body .wh-topbar-links .wh-pill{border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:4px 12px}
.wh-body .wh-topbar-links .wh-pill:hover{border-color:var(--wh-star);color:#fff}
.wh-topbar-links .caret{margin-left:2px}
.wh-topbar-links .label{font-size:.7rem;padding:.2em .5em}
.wh-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--wh-star);color:#2A1D00;font-size:.75rem;font-weight:700;line-height:1}
.wh-theme-toggle{background:none;border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:999px;padding:4px 10px;cursor:pointer;display:inline-flex;gap:6px;align-items:center;font:inherit;font-size:.82rem}
.wh-theme-toggle:hover{border-color:var(--wh-star)}
.wh-theme-toggle .wh-moon{display:none}
:root[data-theme="dark"] .wh-theme-toggle .wh-moon{display:inline}
:root[data-theme="dark"] .wh-theme-toggle .wh-sun{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wh-theme-toggle .wh-moon{display:inline}:root:not([data-theme="light"]) .wh-theme-toggle .wh-sun{display:none}}

/* ---------- 4. Header + mega menu ---------- */
.wh-header{position:sticky;top:0;z-index:55;background:var(--wh-bg);background:color-mix(in srgb,var(--wh-bg) 92%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--wh-line)}
.wh-header .wh-wrap{display:flex;align-items:center;gap:24px;min-height:72px}
.wh-brand{display:inline-flex;color:var(--wh-ink);line-height:0}
.wh-body .wh-brand,.wh-body .wh-brand:hover{color:var(--wh-ink)}
.wh-logo-svg{height:34px;width:auto;overflow:visible;max-width:100%}
.wh-nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.wh-nav>ul{display:flex;list-style:none;margin:0;padding:0;gap:2px}
.wh-nav>ul{align-items:center}
.wh-nav>ul>li{position:relative;margin:0;display:flex;align-items:center}
.wh-body .wh-nav>ul>li>a.wh-nav-top{display:flex}
.wh-body .wh-nav-top{display:flex;align-items:center;gap:4px;padding:10px 12px;color:var(--wh-ink);text-decoration:none;border-radius:8px;background:none;border:0;font:600 1rem var(--wh-font-body);cursor:pointer;line-height:1.3}
.wh-body .wh-nav-top:hover,.wh-nav>ul>li:focus-within>.wh-nav-top,.wh-nav>ul>li:hover>.wh-nav-top{background:var(--wh-surface);color:var(--wh-brand)}
.wh-chev{width:14px;height:14px;transition:transform .15s}
.wh-mega{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:560px;background:var(--wh-card);border:1px solid var(--wh-line);border-radius:var(--wh-radius);box-shadow:var(--wh-shadow);padding:18px;display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px;z-index:80}
.wh-mega.cols-3{min-width:760px;grid-template-columns:repeat(3,minmax(0,1fr))}
.wh-nav>ul>li:hover>.wh-mega,.wh-nav>ul>li:focus-within>.wh-mega,.wh-nav>ul>li.open>.wh-mega{display:grid}
.wh-body .wh-mega h4{font-size:.8rem;color:var(--wh-muted);font-family:var(--wh-font-body);letter-spacing:0;margin:6px 8px 4px;font-weight:600}
.wh-body .wh-mega a{display:flex;gap:10px;padding:8px;border-radius:8px;text-decoration:none;color:var(--wh-ink);align-items:flex-start;line-height:1.35}
.wh-body .wh-mega a:hover{background:var(--wh-surface);color:var(--wh-ink)}
.wh-mega a .wh-ico{color:var(--wh-brand);margin-top:3px}
.wh-mega a b{display:block;font-weight:600;font-size:.95rem}
.wh-mega a small{display:block;color:var(--wh-muted);font-size:.82rem;line-height:1.4}
.wh-body .wh-nav-cta{margin-left:8px}
.wh-burger{display:none;margin-left:auto;background:none;border:1px solid var(--wh-line);border-radius:10px;padding:8px;color:var(--wh-ink);cursor:pointer;line-height:0}
.wh-burger .wh-ico{width:22px;height:22px}

/* ---------- 18. Footer ---------- */
.wh-footer{background:var(--wh-chrome);color:#B6C6D0;padding:56px 0 40px;font-size:.95rem;line-height:1.6}
.wh-foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px}
.wh-body .wh-footer h3{color:#fff;font-size:1rem;font-family:var(--wh-font-body);font-weight:700;margin:0 0 12px;letter-spacing:0}
.wh-footer ul{list-style:none;padding:0!important;margin:0;display:grid;gap:8px}
.wh-footer ul li{margin:0;padding:0}
.wh-body .wh-footer a{color:#B6C6D0;text-decoration:none;display:inline}
.wh-body .wh-footer a:hover{color:#fff;text-decoration:underline}
.wh-body .wh-footer .wh-brand,.wh-body .wh-footer .wh-brand:hover{color:#fff;text-decoration:none}
.wh-footer .wh-logo-svg{height:30px;color:#fff}
.wh-foot-about{margin-top:14px}
.wh-footer address{font-style:normal;margin:14px 0 0;line-height:1.6}
.wh-social{margin-top:12px}
.wh-body .wh-footer .wh-gplay{display:inline-block;margin-top:16px;line-height:0;text-decoration:none}
.wh-gplay svg{width:180px;height:54px;max-width:100%}
.wh-pay-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1)}
.wh-pay-row img{height:30px;width:auto;background:#fff;border-radius:6px;padding:3px 6px}
.wh-foot-bottom{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-top:22px;font-size:.88rem;color:#8EA2AE}

/* ---------- 19. Floating buttons, mobile bar, cookie banner ---------- */
.wh-fab{position:fixed;right:20px;bottom:24px;display:grid;gap:10px;z-index:1030}
.wh-body .wh-fab a,.wh-fab button{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--wh-line);background:var(--wh-card);color:var(--wh-ink);box-shadow:var(--wh-shadow);cursor:pointer;text-decoration:none;position:relative;padding:0}
.wh-body .wh-fab a:hover,.wh-fab button:hover{color:var(--wh-brand);border-color:var(--wh-brand)}
.wh-body .wh-fab .wh-wa{background:#1FA855;color:#fff;border-color:#1FA855}
.wh-body .wh-fab .wh-wa:hover{color:#fff;background:#178A45}
.wh-fab .wh-ico{width:22px;height:22px}
.wh-fab [data-tip]:hover::after{content:attr(data-tip);position:absolute;right:58px;top:50%;transform:translateY(-50%);background:var(--wh-ink);color:var(--wh-bg);padding:5px 10px;border-radius:6px;font-size:.82rem;white-space:nowrap;font-family:var(--wh-font-body)}
#whToTop{opacity:0;pointer-events:none;transition:opacity .2s}
#whToTop.show{opacity:1;pointer-events:auto}
.wh-mbar{display:none}
.wh-cookie{position:fixed;left:16px;bottom:16px;max-width:440px;background:var(--wh-card);border:1px solid var(--wh-line);border-radius:var(--wh-radius);box-shadow:var(--wh-shadow);padding:18px;z-index:1040;display:none;color:var(--wh-text)}
.wh-cookie.show{display:block}
.wh-cookie p{font-size:.92rem;margin:0 0 12px}
.wh-acts{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- 20. Responsive ---------- */
@media (max-width:1080px){
  .wh-nav{position:fixed;inset:0 0 0 auto;width:min(380px,90vw);background:var(--wh-bg);flex-direction:column;align-items:stretch;padding:80px 18px 120px;overflow-y:auto;box-shadow:var(--wh-shadow);z-index:1050;border-left:1px solid var(--wh-line);display:none}
  .wh-nav.open{display:flex;animation:whNavIn .25s ease-out}
  .wh-nav-open .wh-header{z-index:1100}
  .wh-nav-open body{overflow:hidden}
  /* backdrop-filter would make the header the containing block of the fixed off-canvas menu */
  .wh-header{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--wh-bg)}
  .wh-nav>ul{flex-direction:column;align-items:stretch}
  .wh-nav>ul>li{display:block}
  .wh-body .wh-nav-top{width:100%;justify-content:space-between;padding:14px 10px}
  .wh-mega,.wh-mega.cols-3{position:static;transform:none;min-width:0;box-shadow:none;border:0;padding:0 0 8px 6px;grid-template-columns:1fr;display:none!important}
  .wh-nav>ul>li.open>.wh-mega{display:grid!important}
  .wh-nav>ul>li.open .wh-chev{transform:rotate(180deg)}
  .wh-body .wh-nav-cta{margin:14px 0 0}
  .wh-burger{display:inline-flex}
  .wh-nav-close{position:absolute;top:18px;right:18px}
  .wh-foot-grid{grid-template-columns:1fr 1fr}
  .wh-foot-grid>div:first-child{grid-column:1/-1}
}
@media (min-width:1081px){.wh-nav-close{display:none}}
@keyframes whNavIn{from{transform:translateX(100%)}to{transform:none}}
@media (max-width:640px){
  html body.wh-body{font-size:15px;padding-bottom:64px}
  .wh-wrap{padding:0 16px}
  .wh-hide-s{display:none!important}
  .wh-body .wh-whois label{display:none}
  .wh-whois{flex-basis:100%;max-width:none}
  .wh-topbar-links{margin-left:0;width:100%;justify-content:space-between}
  .wh-header .wh-wrap{min-height:62px}
  .wh-logo-svg{height:30px}
  .wh-body section#main-body{padding:24px 0 48px}
  .wh-foot-grid{grid-template-columns:1fr}
  .wh-footer{padding-bottom:32px}
  .wh-fab{bottom:84px;right:12px}
  .wh-body .wh-fab a,.wh-fab button{width:44px;height:44px}
  .wh-mbar{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:1035;background:var(--wh-card);border-top:1px solid var(--wh-line);box-shadow:0 -6px 20px rgba(0,0,0,.08);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .wh-body .wh-mbar a{display:grid;justify-items:center;gap:2px;text-decoration:none;color:var(--wh-ink);font-size:.74rem;font-weight:600;padding:6px 2px;border-radius:10px;line-height:1.2;text-align:center}
  .wh-mbar a .wh-ico{color:var(--wh-brand);width:22px;height:22px}
  .wh-mbar a:active{background:var(--wh-surface)}
  .wh-cookie{left:8px;right:8px;bottom:76px;max-width:none}
}
/* ---------- 2026-10 revision (mirrors site.css "2026-10 revision") ---------- */
/* Special offers pill (topbar + footer Company column) */
.wh-body a.wh-offer-link,.wh-body .wh-topbar-links>li>a.wh-offer-link,.wh-body .wh-footer a.wh-offer-link{position:relative;display:inline-flex;align-items:center;gap:6px;padding:3px 12px;border-radius:999px;font-weight:700;color:#2A1D00;background:linear-gradient(110deg,#FFB020 0%,#FFD978 40%,#FFB020 60%,#FF8A3D 100%);background-size:220% 100%;animation:whOfferShine 3s linear infinite;text-decoration:none;box-shadow:0 0 0 0 rgba(255,176,32,.6)}
.wh-body a.wh-offer-link:hover,.wh-body a.wh-offer-link:focus,.wh-body .wh-topbar-links>li>a.wh-offer-link:hover,.wh-body .wh-footer a.wh-offer-link:hover{color:#2A1D00;text-decoration:none}
.wh-offer-link .wh-ico{animation:whblink 2.4s ease-in-out infinite}
.wh-offer-link::after{content:"";position:absolute;inset:-3px;border-radius:999px;border:2px solid #FFB020;opacity:0;animation:whOfferPulse 2.4s ease-out infinite;pointer-events:none}
.wh-footer .wh-offer-link{margin-top:2px}
@keyframes whOfferShine{to{background-position:-220% 0}}
@keyframes whOfferPulse{0%{opacity:.7;transform:scale(.96)}100%{opacity:0;transform:scale(1.15)}}
@keyframes whblink{0%,100%{opacity:1;transform:scale(1) rotate(0)}50%{opacity:.4;transform:scale(.7) rotate(45deg)}}

/* Mega menu feature card (Domains > Find a name) */
.wh-body .wh-mega a.wh-mega-card{display:grid;grid-template-columns:1fr;gap:10px;padding:16px;border-radius:14px;background:linear-gradient(150deg,var(--wh-brand-soft),var(--wh-card) 60%,var(--wh-star-soft));border:1px solid var(--wh-line);height:calc(100% - 30px)}
.wh-body .wh-mega a.wh-mega-card:hover{border-color:var(--wh-brand);background:linear-gradient(150deg,var(--wh-brand-soft),var(--wh-card) 60%,var(--wh-star-soft))}
.wh-mc-art{width:100%;height:80px}
.wh-mc-art .a1{fill:var(--wh-brand);opacity:.15}.wh-mc-art .a2{fill:var(--wh-star);opacity:.3}
.wh-mc-art .bx{fill:var(--wh-brand)}.wh-mc-art .sp{fill:var(--wh-star)}.wh-mc-art use{color:#fff;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wh-mega-card em{display:inline-block;margin-top:8px;font-style:normal;font-weight:700;color:var(--wh-brand);font-size:.9rem}
@media (max-width:1080px){.wh-body .wh-mega a.wh-mega-card{height:auto}}
@media (max-width:640px){.wh-body .wh-topbar-links>li>a.wh-offer-link{padding:3px 10px;font-size:.8rem}}
@media (prefers-reduced-motion:reduce){.wh-offer-link,.wh-offer-link .wh-ico,.wh-offer-link::after{animation:none!important}}

/* Footer: whois button + PKNIC prepaid card */
.wh-body .wh-footer a.wh-f-whois{display:inline-flex;gap:8px;align-items:center;padding:7px 14px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;font-weight:700;text-decoration:none}
.wh-body .wh-footer a.wh-f-whois:hover{background:rgba(255,255,255,.14);color:#fff;text-decoration:none}
.wh-body .wh-footer a.wh-f-card{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:linear-gradient(135deg,#0A7DBB,#13804F);color:#fff;text-decoration:none;max-width:260px;line-height:1.35}
.wh-body .wh-footer a.wh-f-card:hover{color:#fff;text-decoration:none}
.wh-f-card svg{width:40px;height:28px;flex:none}.wh-f-card .c{fill:#fff;opacity:.95}.wh-f-card .s{fill:#13222C;opacity:.7}.wh-f-card .t{fill:#FFB020}
.wh-f-card b{display:block;font-size:.95rem}.wh-f-card small{display:block;color:#D8F1E5;font-size:.78rem}
@media (prefers-reduced-motion:reduce){.wh-body *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.wh-topbar,.wh-header,.wh-fab,.wh-mbar,.wh-cookie,.wh-footer,#main-menu{display:none!important}}

/* nav CTA keeps icon + label on one line */
.wh-body .btn.wh-nav-cta{display:inline-flex;align-items:center;gap:.45em;white-space:nowrap}
.wh-body .primary-bg-color{background-color:var(--wh-brand);color:var(--wh-on-brand)}

/* the old theme colours every link inside .main-content (0,5,1); the :not(.wh-x) padding lifts these component link colours above it */
.wh-body .main-content .pagination>li>a:not(.wh-x):not(.wh-y),.wh-body .main-content .pagination>li>span:not(.wh-x):not(.wh-y){color:var(--wh-text)}
.wh-body .main-content .pagination>.active>a:not(.wh-x):not(.wh-y),.wh-body .main-content .pagination>.active>span:not(.wh-x):not(.wh-y){color:var(--wh-on-brand)}
.wh-body .main-content .nav-tabs>li>a:not(.wh-x):not(.wh-y){color:var(--wh-muted)}
.wh-body .main-content .nav-tabs>li.active>a:not(.wh-x):not(.wh-y){color:var(--wh-ink)}
.wh-body .main-content .nav-pills>li.active>a:not(.wh-x):not(.wh-y){color:var(--wh-on-brand)}
.wh-body .main-content .dropdown-menu>li>a:not(.wh-x):not(.wh-y){color:var(--wh-text)}
.wh-body .main-content .alert a:not(.btn):not(.wh-x):not(.wh-y):not(.wh-z){color:inherit;text-decoration:underline}
.wh-body .main-content .panel-primary>.panel-heading a:not(.wh-x):not(.wh-y){color:var(--wh-on-brand)}

/* 2026-10-02: back to top brand colour, tidy mobile top bar */
#whToTop{background:var(--wh-brand)!important;border-color:var(--wh-brand)!important;color:#fff!important}
#whToTop:hover{background:var(--wh-brand-strong)!important}
@media (max-width:640px){
  .wh-topbar .wh-wrap,.wh-topbar>div{row-gap:8px}
  .wh-topbar-links{width:100%;justify-content:space-between;gap:8px;margin:0}
  .wh-body .wh-topbar-links>li>a,.wh-body .wh-topbar-links .wh-theme-toggle{height:34px;padding:0 12px;border:1px solid rgba(255,255,255,.25);border-radius:999px;font-size:.82rem}
  .wh-body .wh-topbar-links .wh-offer-link,.wh-body .wh-topbar-links .offer-link{border:0}
}

/* 2026-10-02: Look up button sits inside the whois field */
.wh-whois-field{position:relative;flex:1;min-width:0;display:block}
.wh-whois-field input{width:100%;padding:7px 96px 7px 14px}
.wh-whois-field button{position:absolute;top:3px;right:3px;bottom:3px;padding:0 14px}

/* 2026-10-02: single-row WHMCS top bar (desktop) */
@media (min-width:641px){
  .wh-topbar .wh-wrap{max-width:1440px;flex-wrap:nowrap;gap:20px;min-height:52px}
  .wh-whois{flex:0 1 430px;max-width:430px}
  .wh-topbar-links{flex-wrap:nowrap;gap:6px;white-space:nowrap}
  .wh-body .wh-topbar-links>li>a:not(.wh-offer-link),.wh-body .wh-topbar-links .wh-theme-toggle{height:34px;padding:0 11px;border-radius:999px;border:1px solid transparent;display:inline-flex;align-items:center;gap:6px}
  .wh-body .wh-topbar-links>li>a:not(.wh-offer-link):hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
  .wh-body .wh-topbar-links .wh-pill,.wh-body .wh-topbar-links .wh-theme-toggle{border-color:rgba(255,255,255,.25)!important}
  .wh-topbar-links .wh-offer-link{height:34px;margin:0 6px}
  .wh-topbar-links .label{position:relative;top:-1px}
}
.wh-lbl-hide{display:none}
@media (max-width:1399px){.wh-lbl-xl{display:none}}
@media (min-width:641px) and (max-width:1199px){.wh-body .wh-whois label{display:none}.wh-whois{flex-basis:340px}}

/* ===== In-app mode (WinsHosting Android app): hide website chrome, keep the client-area menu ===== */
.in-app .wh-topbar,.in-app .wh-header,.in-app .wh-footer,.in-app .wh-fab,.in-app .wh-mbar,.in-app .wh-cookie,.in-app .wh-skip{display:none!important}
.in-app body{padding-bottom:0!important}
.in-app #main-menu{position:static;top:auto}
.in-app #home-banner{padding-top:24px}



/* ---------- 5. Top bar: CoreInto menus (currency, notifications, account) in the WinsHosting style ---------- */
.wh-topbar .menu { position: relative; display: flex; align-items: center; height: auto; }
.wh-topbar .menu-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border: 1px solid transparent; border-radius: 5px; background: none; color: #DCE7ED; font: 500 .875rem var(--wh-font-body); cursor: pointer; }
.wh-topbar .menu-btn:hover, .wh-topbar .menu.open > .menu-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; }
.wh-topbar .menu-btn.wh-pill { border-color: rgba(255,255,255,.25); }
.wh-topbar .menu-btn .ico { width: 16px; height: 16px; }
.wh-topbar .menu-btn .ico:last-child { width: 12px; height: 12px; opacity: .7; }
.wh-topbar .icon-btn { width: auto; height: 34px; color: #DCE7ED; }
.wh-topbar .currency-menu .menu-btn { padding: 0 10px; }
.wh-topbar .currency-code { font-weight: 600; }
.wh-topbar .avatar { width: 22px; height: 22px; font-size: 10px; background: var(--wh-star); color: #2A1D00; }
.wh-topbar .drop { top: calc(100% + 6px); z-index: 90; font-size: .9rem; }
.wh-topbar .drop a, .wh-topbar .drop .linklike { color: var(--wh-text); display: block; }
.wh-topbar .wh-count-alert { background: var(--wh-danger); color: #fff; }
.wh-topbar .alerts .menu-btn { position: relative; }
.wh-topbar .alerts-drop b.on { background: var(--wh-danger); color: #fff; }
.wh-topbar .wh-cur { display: flex; }
.wh-topbar .user-menu form { margin: 0; }
@media (max-width: 1199px) { .wh-user-name { display: none; } }

/* ---------- 6. The CoreInto client menu as the account bar under the header ---------- */
.wh-body .masthead.wh-acct-bar { position: relative; top: auto; z-index: 40; background: var(--wh-surface); border-bottom: 1px solid var(--wh-line); box-shadow: none; }
.wh-body .wh-acct-bar .masthead-in { min-height: 50px; gap: 6px; }
.wh-acct-title { display: none; align-items: center; gap: 8px; font: 700 .98rem var(--wh-font-display); color: var(--wh-ink); }
.wh-acct-title .ico { color: var(--wh-brand); }
.wh-body .wh-acct-bar .menus { margin-left: -12px; }
.wh-body .wh-acct-bar .menu-btn, .wh-body .wh-acct-bar .menu-link { color: var(--wh-text); font-weight: 600; font-size: .95rem; padding: 0 14px; }
.wh-body .wh-acct-bar .menu-btn .ico:first-child, .wh-body .wh-acct-bar .menu-link .ico { color: var(--wh-muted); }
.wh-body .wh-acct-bar .menu:hover > .menu-btn, .wh-body .wh-acct-bar .menu:hover > .menu-link, .wh-body .wh-acct-bar .menu.open > .menu-btn { background: var(--wh-card); color: var(--wh-brand); }
.wh-body .wh-acct-bar .menu.current > .menu-btn, .wh-body .wh-acct-bar .menu.current > .menu-link { color: var(--wh-brand); box-shadow: inset 0 -3px 0 var(--wh-brand); }
.wh-body .wh-acct-bar .menu.current > .menu-btn .ico, .wh-body .wh-acct-bar .menu.current > .menu-link .ico, .wh-body .wh-acct-bar .menu:hover .ico { color: var(--wh-brand); }
.wh-body .wh-acct-bar .drop { top: 100%; border-radius: 0 0 var(--wh-radius) var(--wh-radius); border-top: 0; }
.wh-body .wh-acct-bar .masthead-cta .btn { min-height: 34px; padding: 0 14px; font-size: .875rem; }
.wh-body .wh-acct-bar .nav-toggle { color: var(--wh-ink); border: 1px solid var(--wh-line); border-radius: 5px; background: var(--wh-card); }
@media (max-width: 860px) {
  .wh-acct-title { display: inline-flex; }
  .wh-body .wh-acct-bar .masthead-in { align-items: center; }
  .wh-body .wh-acct-bar .menus { margin: 0; }
  .wh-body .wh-acct-bar .menu-btn, .wh-body .wh-acct-bar .menu-link { padding: 12px 4px; }
  .wh-body .wh-acct-bar .menu.current > .menu-btn, .wh-body .wh-acct-bar .menu.current > .menu-link { box-shadow: inset 3px 0 0 var(--wh-brand); padding-left: 12px; }
  .wh-body .wh-acct-bar .drop { border: 0; background: transparent; }
}
/* app.js slides #clientnav in as a panel on small screens; give it the WinsHosting card look */
@media (max-width: 860px) {
  .wh-body .wh-acct-bar .menus.open { background: var(--wh-card); border-top: 1px solid var(--wh-line); }
}

/* ---------- 7. Sign-in, registration and password pages under the WinsHosting header ---------- */
html body.wh-body.auth { display: block; min-height: 0; padding-top: 0; padding-left: 0; padding-right: 0; background: var(--wh-bg); }
.wh-auth-page { position: relative; display: flex; flex-direction: column; align-items: center; padding: 56px 16px 72px; background: radial-gradient(600px 300px at 85% 10%, var(--wh-brand-soft), transparent 70%), radial-gradient(400px 200px at 10% 100%, var(--wh-star-soft), transparent 70%), var(--wh-bg); }
.wh-auth .auth-brand, .wh-auth .auth-foot { display: none; }
.wh-auth .auth-box { border-radius: var(--wh-radius-l); padding: 32px; box-shadow: var(--wh-shadow); margin: 0 auto; }
.wh-auth .auth-title { font-family: var(--wh-font-display); }

/* ---------- 8. Footer extras (language links) and small screens ---------- */
.wh-foot-lang { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 14px; color: #8EA2AE; font-size: .88rem; }
.wh-foot-lang .ico { width: 16px; height: 16px; }
.wh-body .wh-footer .wh-foot-lang a { color: #B6C6D0; }
.wh-footer .wh-foot-lang span[aria-current] { color: #fff; font-weight: 600; }
.wh-footer .wh-foot-lang, .wh-footer .wh-foot-lang svg { color: #8EA2AE; }
@media (max-width: 640px) {
  .wh-body .page { padding-top: 20px; padding-bottom: 40px; }
  .wh-topbar .menu-btn { border-color: rgba(255,255,255,.25); }
  .wh-topbar .drop { position: fixed; left: 8px; right: 8px; top: auto; min-width: 0; }
}
/* the in-app (Android) mode hides the website chrome but keeps the client menu */
.in-app .wh-body .masthead.wh-acct-bar { position: sticky; top: 0; }

/* ---------- 9. Small corners on buttons and fields (same as www.winshosting.com) ---------- */
.wh-whois input, .wh-whois button, .wh-whois-field, .wh-body .wh-topbar-links > li > a, .wh-body .wh-topbar-links .wh-pill, .wh-theme-toggle, .wh-body a.wh-offer-link, .wh-offer-link::after, .wh-body .wh-mbar a { border-radius: 5px !important; }