/*!
 * Global Hosting portal: custom.css (WHMCS child theme "globalhosting", parent twenty-one).
 *
 * Restyles Bootstrap 4.5 / twenty-one so the client area looks like globalhosting.ba.
 * Auto-loaded by the parent head.tpl right after twenty-one theme.min.css; gh-core.css (tokens --gh-*,
 * header/footer/drawer components) loads after this file. Everything is scoped under body.gh-portal,
 * which also lifts specificity above the twenty-one rules.
 *
 *  1. Base, typography, layout
 *  2. Portal chrome: top bar, header actions, portal bar, drawer, page band, crumb bar, footer extras
 *  3. Buttons
 *  4. Cards, sidebar, list groups
 *  5. Forms
 *  6. Tables, DataTables, pagination
 *  7. Alerts, badges, status labels
 *  8. Dropdowns, tabs, pills, progress, popovers, tooltips
 *  9. Modals, language chooser, overlay
 * 10. Client area home (tiles, home cards), domain search, misc twenty-one pages
 * 11. Responsive + motion
 */

/* ==========================================================================
   1. Base, typography, layout
   ========================================================================== */
body.gh-portal {
  font-family: var(--gh-font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gh-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.gh-portal.primary-bg-color { background-color: var(--gh-bg-alt); }
html { scroll-padding-top: calc(var(--gh-header-h) + 16px); }

/* Element defaults use :where() (specificity 0,0,1) so they beat Bootstrap's bare element rules by load order,
   while every gh- component (class selectors) keeps its own styling. */
:where(.gh-portal) h1, :where(.gh-portal) h2, :where(.gh-portal) h3, :where(.gh-portal) h4, :where(.gh-portal) h5, :where(.gh-portal) h6 {
  font-family: var(--gh-font);
  color: var(--gh-ink);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.25;
}
:where(.gh-portal) h1 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); font-weight: 800; letter-spacing: -.025em; }
:where(.gh-portal) h2 { font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem); font-weight: 800; letter-spacing: -.022em; }
:where(.gh-portal) h3 { font-size: 1.375rem; }
:where(.gh-portal) h4 { font-size: 1.1875rem; }
:where(.gh-portal) h5 { font-size: 1.0625rem; }
:where(.gh-portal) h6 { font-size: .9375rem; }
:where(.gh-portal) .h1, :where(.gh-portal) .h2, :where(.gh-portal) .h3, :where(.gh-portal) .h4, :where(.gh-portal) .h5, :where(.gh-portal) .h6 {
  font-family: var(--gh-font); color: var(--gh-ink); font-weight: 700; letter-spacing: -.015em;
}
:where(.gh-portal) small, :where(.gh-portal) .small { font-size: .8125rem; }
:where(.gh-portal) .lead { font-size: 1.125rem; font-weight: 500; color: var(--gh-muted); }

:where(.gh-portal) a { color: var(--gh-red); text-decoration: none; }
:where(.gh-portal) a:hover { color: var(--gh-red-700); text-decoration: underline; text-underline-offset: 3px; }
:where(.gh-portal) a.btn:hover, :where(.gh-portal) a.list-group-item:hover, :where(.gh-portal) a.dropdown-item:hover,
:where(.gh-portal) a.badge:hover, :where(.gh-portal) a.tile:hover, :where(.gh-portal) a.page-link:hover { text-decoration: none; }

body.gh-portal .text-muted { color: var(--gh-muted) !important; }
body.gh-portal .text-primary { color: var(--gh-red) !important; }
body.gh-portal a.text-primary:hover { color: var(--gh-red-700) !important; }
body.gh-portal .text-success { color: var(--gh-success) !important; }
body.gh-portal .text-danger { color: var(--gh-red-700) !important; }
body.gh-portal .text-warning { color: #9A6100 !important; }
body.gh-portal .text-info { color: #3B4A9E !important; }
body.gh-portal .bg-primary { background-color: var(--gh-navy-900) !important; }
body.gh-portal .border-primary { border-color: var(--gh-red) !important; }
:where(.gh-portal) hr { border-top-color: var(--gh-line); }
.gh-portal ::selection { background: rgba(187, 52, 55, .16); }
:where(.gh-portal) code { color: var(--gh-red-700); background: var(--gh-red-50); padding: .1em .4em; border-radius: 6px; font-size: .875em; }
:where(.gh-portal) pre { background: var(--gh-navy-900); color: #E4E7F5; border-radius: var(--gh-radius); padding: 16px 18px; }
:where(.gh-portal) pre code { background: none; color: inherit; padding: 0; }
:where(.gh-portal) blockquote { margin: 0 0 1rem; padding: 12px 18px; border-left: 4px solid var(--gh-red); background: #fff; border-radius: 0 12px 12px 0; }

/* Same geometry as .gh-container (1240px + gutters), so header, band and content align. */
body.gh-portal .container {
  max-width: calc(var(--gh-container) + 2 * var(--gh-gutter));
  padding-left: var(--gh-gutter);
  padding-right: var(--gh-gutter);
}
body.gh-portal section#main-body { padding: 36px 0 72px; min-height: 420px; }
body.gh-portal section#main-body:focus { outline: none; }
body.gh-portal.gh-is-cart section#main-body { padding-top: 28px; }
body.gh-portal.gh-layout-auth section#main-body {
  padding: 48px 0 88px;
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(124, 140, 255, .10), transparent 70%),
    radial-gradient(40% 40% at 0% 100%, rgba(187, 52, 55, .06), transparent 70%);
}
body.gh-portal .primary-content { min-width: 0; }

/* Accessible focus ring for everything Bootstrap renders */
body.gh-portal .btn:focus, body.gh-portal .btn.focus, body.gh-portal .page-link:focus,
body.gh-portal .list-group-item-action:focus, body.gh-portal .dropdown-item:focus, body.gh-portal .nav-link:focus,
body.gh-portal .close:focus, body.gh-portal a.tile:focus, body.gh-portal .item-selector .item:focus {
  outline: 0;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(91, 124, 255, .55);
}
body.gh-portal .btn:focus:not(:focus-visible), body.gh-portal .list-group-item-action:focus:not(:focus-visible),
body.gh-portal .dropdown-item:focus:not(:focus-visible), body.gh-portal .nav-link:focus:not(:focus-visible) { box-shadow: none; }
:where(.gh-portal) a:focus-visible { outline: 3px solid var(--gh-focus); outline-offset: 2px; border-radius: 4px; }
/* twenty-one's reboot draws `button:focus { outline: auto 5px }` on every mouse click (e.g. a ring around the mega-menu
   trigger). The website has no Bootstrap and rings only keyboard focus, through the gh-core :focus-visible rules,
   which still apply here. */
.gh-portal :is(.gh-topbar, .gh-header, .gh-drawer, .gh-portalbar, .gh-footer, .gh-cookie) button:focus:not(:focus-visible) { outline: 0; }

/* ==========================================================================
   2. Portal chrome
   ========================================================================== */

/* --- Top bar (portal variant) ---------------------------------------------- */
.gh-portal .gh-ptopbar__end { gap: 18px; }
.gh-portal .gh-ptopbar__item, .gh-portal .gh-ptopbar__client { display: inline-flex; align-items: center; gap: 10px; }
.gh-portal .gh-ptopbar__btn {
  padding: 4px 0; margin: 0; border: 0; background: none; cursor: pointer;
  font: 500 var(--gh-fs-xs)/1.2 var(--gh-font); color: var(--gh-on-dark-muted);
}
.gh-portal .gh-ptopbar__btn:hover, .gh-portal .gh-ptopbar__btn:focus { color: #fff; }
.gh-portal .gh-ptopbar__btn:focus-visible { outline: 3px solid var(--gh-focus); outline-offset: 2px; border-radius: 4px; }
.gh-portal .gh-ptopbar__count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--gh-red); color: #fff; font-weight: 800; font-size: 11px;
}
.gh-portal .gh-ptopbar__name { color: #fff; font-weight: 700; }
.gh-portal .gh-ptopbar__name span { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-portal .gh-ptopbar__switch { padding: 4px; }
.gh-portal .gh-topbar a:hover { text-decoration: none; }
.gh-portal .gh-ptopbar .gh-topbar__link, .gh-portal .gh-ptopbar .gh-topbar__muted { white-space: nowrap; }

/* --- Header actions -------------------------------------------------------- */
.gh-portal .gh-cartbtn { position: relative; }
.gh-portal .gh-header .gh-cartbtn__count {
  position: absolute; top: -6px; right: -6px; display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin: 0;
  border: 2px solid var(--gh-navy-900); border-radius: 999px; background: var(--gh-red); color: #fff;
  font: 800 11px/1 var(--gh-font); letter-spacing: 0;
}
.gh-portal .gh-header .gh-cartbtn__count.is-empty { display: none; }
.gh-portal .gh-header__login { box-shadow: none; }
.gh-portal .gh-header a:hover { text-decoration: none; }

/* --- Portal bar (logged-in) ------------------------------------------------ */
.gh-portalbar {
  position: sticky; top: var(--gh-header-h); z-index: 880;
  background: #fff; border-bottom: 1px solid var(--gh-line);
  font-family: var(--gh-font);
  transition: box-shadow var(--gh-dur) var(--gh-ease);
}
.gh-portalbar.is-scrolled { box-shadow: 0 10px 24px -16px rgba(14, 19, 48, .35); }
.gh-portalbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; }
.gh-portalbar__list { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
.gh-portalbar__item { position: relative; }
.gh-portalbar__link {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 13px; margin: 0;
  border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  color: var(--gh-text); font: 600 .9375rem/1 var(--gh-font); white-space: nowrap; text-decoration: none;
  transition: background-color var(--gh-dur), color var(--gh-dur);
}
.gh-portal .gh-portalbar__link:hover, .gh-portal .gh-portalbar__link:focus,
.gh-portalbar__item.show > .gh-portalbar__link { background: var(--gh-bg-alt); color: var(--gh-ink); text-decoration: none; }
.gh-portalbar__link .gh-icon, .gh-portalbar__link > i { color: var(--gh-muted); transition: color var(--gh-dur); }
.gh-portalbar__link:hover .gh-icon, .gh-portalbar__item.show > .gh-portalbar__link .gh-icon { color: var(--gh-red); }
.gh-portalbar__link:focus-visible { outline: 3px solid var(--gh-focus); outline-offset: 1px; }
.gh-portalbar__link.dropdown-toggle::after { display: none; }
.gh-portalbar__chev { margin-left: -2px; transition: transform var(--gh-dur) var(--gh-ease); }
.gh-portalbar__item.show .gh-portalbar__chev { transform: rotate(180deg); }
.gh-portalbar__badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--gh-red-50); color: var(--gh-red-700); font: 800 11px/1 var(--gh-font);
}
.gh-portalbar__list--end .gh-portalbar__link { border: 1px solid var(--gh-line); }
.gh-portalbar .dropdown-menu { margin-top: 6px; }

/* --- Drawer extras --------------------------------------------------------- */
.gh-drawer__section {
  margin: 14px 8px 4px; color: var(--gh-muted);
  font: 700 var(--gh-fs-xs)/1.2 var(--gh-font); letter-spacing: .1em; text-transform: uppercase;
}
.gh-drawer__section:first-child { margin-top: 8px; }
.gh-drawer__list--portal { margin-bottom: 8px !important; padding-bottom: 6px !important; border-bottom: 1px solid var(--gh-line) !important; }
.gh-drawer__toggle-label { display: inline-flex; align-items: center; gap: 12px; }
.gh-drawer .gh-drawer__toggle .gh-drawer__lead { color: var(--gh-red); }
.gh-drawer__sub--portal .gh-drawer__link { min-height: 44px; padding-left: 40px; }
.gh-drawer__auth { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gh-portal .gh-drawer a:hover { text-decoration: none; }
@media (max-width: 360px) { .gh-drawer__auth { grid-template-columns: 1fr; } }

/* --- Page band (title + breadcrumb) ---------------------------------------- */
.gh-band { padding: 30px 0 34px; font-family: var(--gh-font); overflow: hidden; }
.gh-band__inner { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.gh-band__content { min-width: 0; }
.gh-band__crumbs { margin: 0 0 10px; }
.gh-band .gh-breadcrumb__item a:hover { text-decoration: underline; }
.gh-portal .gh-band__title, .gh-portal h1.gh-band__title {
  margin: 0; color: #fff; font: 800 clamp(1.625rem, 1.3rem + 1.1vw, 2.25rem)/1.15 var(--gh-font);
  letter-spacing: -.028em; text-wrap: balance;
}
.gh-band__aside { flex: none; }
.gh-band__help {
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05);
  color: #fff; text-decoration: none; transition: background-color var(--gh-dur), border-color var(--gh-dur);
}
.gh-portal .gh-band__help:hover, .gh-portal .gh-band__help:focus { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .24); color: #fff; text-decoration: none; }
.gh-band__help-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(187, 52, 55, .22); color: var(--gh-red-soft); }
.gh-band__help-label { display: block; color: var(--gh-on-dark-muted); font: 600 var(--gh-fs-xs)/1.2 var(--gh-font); }
.gh-band__help-value { display: block; margin-top: 3px; color: #fff; font: 800 var(--gh-fs-base)/1.2 var(--gh-font); }

/* --- Footer extras --------------------------------------------------------- */
.gh-portal .gh-footer { margin-top: 0; }
.gh-portal .gh-footer a:hover { text-decoration: none; }
.gh-footer__locale { display: inline-flex; align-items: center; gap: 6px; }

/* gh-core.css (website copy) labels .gh-step__num with the Bosnian "KORAK "; other page languages get English */
html:not([lang="bs"]) .gh-step__num::before { content: "STEP "; }

/* ==========================================================================
   3. Buttons
   ========================================================================== */
body.gh-portal .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: .625rem 1.125rem; border-radius: 12px; border-width: 1px;
  font: 700 .9375rem/1.3 var(--gh-font); letter-spacing: -.005em;
  transition: background-color var(--gh-dur) var(--gh-ease), border-color var(--gh-dur) var(--gh-ease), color var(--gh-dur) var(--gh-ease), box-shadow var(--gh-dur) var(--gh-ease), transform var(--gh-dur) var(--gh-ease);
}
body.gh-portal .btn:active { transform: translateY(1px); }
body.gh-portal .btn.btn-block { display: flex; width: 100%; }
body.gh-portal .btn-sm, body.gh-portal .btn-group-sm > .btn { padding: .4375rem .875rem; border-radius: 10px; font-size: .8125rem; gap: 6px; }
body.gh-portal .btn-xs, body.gh-portal .btn-group-xs > .btn { padding: .25rem .625rem; border-radius: 8px; font-size: .75rem; }
body.gh-portal .btn-lg, body.gh-portal .btn-group-lg > .btn { padding: .875rem 1.5rem; border-radius: 14px; font-size: 1.0625rem; }

body.gh-portal .btn-primary,
body.gh-portal .btn-primary:not(:disabled):not(.disabled):active,
body.gh-portal .btn-primary:not(:disabled):not(.disabled).active {
  background-color: var(--gh-red); border-color: var(--gh-red); color: #fff;
  box-shadow: 0 8px 20px -10px rgba(187, 52, 55, .7);
}
body.gh-portal .btn-primary:hover, body.gh-portal .btn-primary:focus { background-color: var(--gh-red-600); border-color: var(--gh-red-600); color: #fff; }
body.gh-portal .btn-primary.disabled, body.gh-portal .btn-primary:disabled { background-color: var(--gh-red); border-color: var(--gh-red); opacity: .55; box-shadow: none; }

body.gh-portal .btn-default, body.gh-portal .btn-secondary, body.gh-portal .btn-light, body.gh-portal .btn-outline-secondary,
body.gh-portal .btn-outline-primary, body.gh-portal .btn-outline-dark {
  background-color: #fff; border-color: var(--gh-line-strong); color: var(--gh-ink); box-shadow: none;
}
body.gh-portal .btn-default:hover, body.gh-portal .btn-default:focus, body.gh-portal .btn-secondary:hover, body.gh-portal .btn-secondary:focus,
body.gh-portal .btn-light:hover, body.gh-portal .btn-light:focus, body.gh-portal .btn-outline-secondary:hover, body.gh-portal .btn-outline-secondary:focus,
body.gh-portal .btn-outline-dark:hover, body.gh-portal .btn-outline-dark:focus,
body.gh-portal .btn-default:not(:disabled):not(.disabled):active, body.gh-portal .btn-default.active,
body.gh-portal .btn-secondary:not(:disabled):not(.disabled):active, body.gh-portal .btn-secondary.active {
  background-color: #fff; border-color: var(--gh-ink); color: var(--gh-ink);
}
body.gh-portal .btn-outline-primary:hover, body.gh-portal .btn-outline-primary:focus,
body.gh-portal .btn-outline-primary:not(:disabled):not(.disabled):active, body.gh-portal .btn-outline-primary.active {
  background-color: var(--gh-red-50); border-color: var(--gh-red); color: var(--gh-red-700);
}
body.gh-portal .btn-outline-primary { color: var(--gh-red); border-color: rgba(187, 52, 55, .45); }

body.gh-portal .btn-dark { background-color: var(--gh-ink); border-color: var(--gh-ink); color: #fff; }
body.gh-portal .btn-dark:hover, body.gh-portal .btn-dark:focus { background-color: var(--gh-navy-700); border-color: var(--gh-navy-700); color: #fff; }

body.gh-portal .btn-success, body.gh-portal .btn-success:not(:disabled):not(.disabled):active {
  background-color: var(--gh-success); border-color: var(--gh-success); color: #fff;
  box-shadow: 0 8px 20px -12px rgba(15, 122, 85, .8);
}
body.gh-portal .btn-success:hover, body.gh-portal .btn-success:focus { background-color: #0B6646; border-color: #0B6646; color: #fff; }
body.gh-portal .btn-outline-success { color: var(--gh-success); border-color: rgba(15, 122, 85, .45); background: #fff; }
body.gh-portal .btn-outline-success:hover { background: var(--gh-success-bg); color: var(--gh-success); border-color: var(--gh-success); }

body.gh-portal .btn-info, body.gh-portal .btn-info:not(:disabled):not(.disabled):active { background-color: var(--gh-navy-600); border-color: var(--gh-navy-600); color: #fff; }
body.gh-portal .btn-info:hover, body.gh-portal .btn-info:focus { background-color: var(--gh-navy-700); border-color: var(--gh-navy-700); color: #fff; }
body.gh-portal .btn-warning, body.gh-portal .btn-warning:not(:disabled):not(.disabled):active { background-color: #F2B33D; border-color: #F2B33D; color: #3D2800; }
body.gh-portal .btn-warning:hover, body.gh-portal .btn-warning:focus { background-color: #E5A325; border-color: #E5A325; color: #3D2800; }
body.gh-portal .btn-danger, body.gh-portal .btn-danger:not(:disabled):not(.disabled):active { background-color: var(--gh-red-700); border-color: var(--gh-red-700); color: #fff; }
body.gh-portal .btn-danger:hover, body.gh-portal .btn-danger:focus { background-color: #741D20; border-color: #741D20; color: #fff; }
body.gh-portal .btn-outline-danger { color: var(--gh-red-700); border-color: rgba(140, 36, 39, .4); background: #fff; }
body.gh-portal .btn-outline-danger:hover { background: var(--gh-red-50); color: var(--gh-red-700); border-color: var(--gh-red-700); }
body.gh-portal .btn-link { padding-left: 0; padding-right: 0; color: var(--gh-red); font-weight: 700; box-shadow: none; }
body.gh-portal .btn-link:hover, body.gh-portal .btn-link:focus { color: var(--gh-red-700); text-decoration: underline; text-underline-offset: 3px; }

/* Button groups: Bootstrap's own corner rules, specific enough to beat the .btn-group-sm/-xs/-lg > .btn radius above
   (so a lone dropdown toggle, or one nested in an inner .btn-group, keeps the base .btn / .btn-sm radius). */
body.gh-portal .btn-group > .btn:not(:last-child):not(.dropdown-toggle),
body.gh-portal .btn-group > .btn-group:not(:last-child) > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
body.gh-portal .btn-group > .btn:not(:first-child),
body.gh-portal .btn-group > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
body.gh-portal .btn-group-toggle .btn.active { background: var(--gh-ink); border-color: var(--gh-ink); color: #fff; }
body.gh-portal .dropdown-toggle::after { border-top-width: .35em; vertical-align: .15em; }

/* Return-to-admin (twenty-one fixes it to the right edge on >= 768px) */
body.gh-portal .btn-return-to-admin {
  background-color: var(--gh-navy-900) !important; color: #fff !important; border: 0 !important;
  font: 700 .8125rem/1.2 var(--gh-font) !important; border-radius: 0 0 10px 10px !important; padding: 8px 16px !important;
  box-shadow: var(--gh-shadow);
}
body.gh-portal .btn-return-to-admin:hover { background-color: var(--gh-red) !important; color: #fff !important; }
body.gh-portal .gh-ptopbar .btn-return-to-admin { border-radius: 8px !important; padding: 5px 10px !important; }

/* ==========================================================================
   4. Cards, sidebar, list groups
   ========================================================================== */
body.gh-portal .card, body.gh-portal .mc-promo-manage, body.gh-portal .mc-promo-login {
  border: 1px solid var(--gh-line); border-radius: var(--gh-radius-lg); background-color: #fff;
  box-shadow: var(--gh-shadow-sm);
}
body.gh-portal .primary-content .card { margin-bottom: 20px; }
body.gh-portal .card-header {
  padding: 16px 22px; background-color: #fff; border-bottom: 1px solid var(--gh-line);
  color: var(--gh-ink); font-weight: 700;
}
body.gh-portal .card-header:first-child { border-radius: calc(var(--gh-radius-lg) - 1px) calc(var(--gh-radius-lg) - 1px) 0 0; }
body.gh-portal .card-footer { padding: 14px 22px; background-color: var(--gh-bg-alt); border-top: 1px solid var(--gh-line); }
body.gh-portal .card-footer:last-child { border-radius: 0 0 calc(var(--gh-radius-lg) - 1px) calc(var(--gh-radius-lg) - 1px); }
body.gh-portal .card-body { padding: 24px; }
body.gh-portal .primary-content .card-body { padding: 26px 28px; }
@media (min-width: 1200px) {
  body.gh-portal .primary-content .card-body.extra-padding { padding: 2.5rem 3rem; }
}
body.gh-portal .primary-content .card-title, body.gh-portal .card-title {
  margin: 0 0 18px; color: var(--gh-ink); font: 800 1.25rem/1.3 var(--gh-font); letter-spacing: -.015em;
}
body.gh-portal .card-header .card-title { margin: 0; font-size: 1.0625rem; }
body.gh-portal .card-subtitle { color: var(--gh-muted); }
body.gh-portal .card-text:last-child { margin-bottom: 0; }
body.gh-portal .card > hr { margin-left: 0; margin-right: 0; }
body.gh-portal .bg-light { background-color: var(--gh-bg-alt) !important; }

/* Sidebar panels */
body.gh-portal .sidebar .card { margin-bottom: 18px; }
body.gh-portal .sidebar .card-sidebar { overflow: hidden; margin-bottom: 18px !important; }
body.gh-portal .sidebar .card-sidebar .card-header { padding: 14px 18px; background: #fff; border-bottom: 1px solid var(--gh-line); }
body.gh-portal .sidebar .card-title {
  display: flex; align-items: center; gap: 8px; margin: 0; color: var(--gh-muted);
  font: 700 .75rem/1.3 var(--gh-font); letter-spacing: .1em; text-transform: uppercase;
}
body.gh-portal .sidebar .card-title > i:not(.card-minimise) { color: var(--gh-red); font-size: .9rem; }
body.gh-portal .sidebar .card-sidebar .card-minimise { margin-left: auto; order: 9; color: var(--gh-subtle); font-size: .75rem; cursor: pointer; }
body.gh-portal .sidebar .card-title .badge { margin-left: auto; }
body.gh-portal .sidebar .list-group { padding: 6px; }
body.gh-portal .sidebar .list-group-item {
  margin: 0 0 2px; padding: 10px 12px; border: 0; border-radius: 10px;
  color: var(--gh-text); font: 600 .9063rem/1.35 var(--gh-font); background: transparent;
}
body.gh-portal .sidebar .list-group-item-action:hover, body.gh-portal .sidebar .list-group-item-action:focus { background: var(--gh-bg-alt); color: var(--gh-ink); }
body.gh-portal .sidebar .list-group-item.active, body.gh-portal .sidebar .list-group-item.active:hover, body.gh-portal .sidebar .list-group-item.active:focus {
  background: var(--gh-red-50); color: var(--gh-red-700); box-shadow: inset 3px 0 0 var(--gh-red);
}
body.gh-portal .sidebar .list-group-item.disabled { color: var(--gh-subtle); }
body.gh-portal .sidebar .sidebar-menu-item-wrapper { display: flex; align-items: center; gap: 10px; }
body.gh-portal .sidebar .sidebar-menu-item-icon-wrapper { width: 18px; text-align: center; color: var(--gh-muted); }
body.gh-portal .sidebar .list-group-item.active .sidebar-menu-item-icon-wrapper { color: var(--gh-red); }
body.gh-portal .sidebar .sidebar-menu-item-label { flex: 1 1 auto; min-width: 0; }
body.gh-portal .sidebar .list-group-item .badge {
  padding: 3px 8px; border-radius: 999px; background: var(--gh-bg-soft); color: var(--gh-ink); font-size: .75rem; font-weight: 700;
}
body.gh-portal .sidebar .list-group-item.active .badge { background: #fff; color: var(--gh-red-700); }
body.gh-portal .sidebar .card-body { padding: 16px 18px; font-size: .9063rem; }
body.gh-portal .sidebar .card-footer { padding: 12px 18px; }
body.gh-portal .sidebar .card-footer .btn { width: 100%; }
body.gh-portal .sidebar select.form-control { height: 44px; }

/* Generic list groups */
body.gh-portal .list-group-item { border-color: var(--gh-line); color: var(--gh-text); }
body.gh-portal .list-group-item:first-child { border-top-left-radius: 14px; border-top-right-radius: 14px; }
body.gh-portal .list-group-item:last-child { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }
body.gh-portal .list-group-flush > .list-group-item { border-radius: 0; }
body.gh-portal .list-group-item.active { background: var(--gh-ink); border-color: var(--gh-ink); color: #fff; }
body.gh-portal .list-group-item-action:hover, body.gh-portal .list-group-item-action:focus { background: var(--gh-bg-alt); color: var(--gh-ink); }

/* ==========================================================================
   5. Forms
   ========================================================================== */
:where(.gh-portal) label, body.gh-portal .col-form-label { color: var(--gh-ink); font-weight: 600; font-size: .9063rem; }
body.gh-portal .form-group { margin-bottom: 1.125rem; }
body.gh-portal .form-text, body.gh-portal small.form-text { color: var(--gh-muted); font-size: .8125rem; }
body.gh-portal .form-control, body.gh-portal .custom-select {
  height: 48px; padding: 10px 14px;
  border: 1.5px solid var(--gh-line-strong); border-radius: 12px; background-color: #fff;
  color: var(--gh-ink); font: 500 .9688rem/1.4 var(--gh-font);
  box-shadow: none; transition: border-color var(--gh-dur), box-shadow var(--gh-dur);
}
body.gh-portal .form-control::placeholder { color: #7A809A; opacity: 1; }
body.gh-portal .form-control:hover, body.gh-portal .custom-select:hover { border-color: #B9C0D3; }
body.gh-portal .form-control:focus, body.gh-portal .custom-select:focus {
  border-color: var(--gh-ink); box-shadow: 0 0 0 4px rgba(91, 124, 255, .2); outline: 0;
}
body.gh-portal .form-control:disabled, body.gh-portal .form-control[readonly] { background-color: var(--gh-bg-alt); color: var(--gh-muted); }
body.gh-portal .form-control-sm { height: 38px; padding: 6px 10px; border-radius: 10px; font-size: .875rem; }
body.gh-portal .form-control-lg { height: 56px; padding: 12px 16px; border-radius: 14px; font-size: 1.0625rem; }
body.gh-portal textarea.form-control { height: auto; min-height: 120px; line-height: 1.6; }
body.gh-portal select.form-control:not([multiple]):not([size]), body.gh-portal .custom-select {
  padding-right: 40px; cursor: pointer;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C6380' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px;
}
body.gh-portal select.form-control[multiple], body.gh-portal select.form-control[size] { height: auto; }
body.gh-portal .pw-input { height: 48px; }
body.gh-portal .input-group-text {
  border: 1.5px solid var(--gh-line-strong); border-radius: 12px; background: var(--gh-bg-alt);
  color: var(--gh-muted); font: 600 .9063rem/1.2 var(--gh-font);
}
body.gh-portal .input-group > .input-group-append > .btn, body.gh-portal .input-group > .input-group-prepend > .btn { border-width: 1.5px; }
body.gh-portal .input-group .btn-reveal-pw { border-color: var(--gh-line-strong); background: #fff; color: var(--gh-muted); }
body.gh-portal .input-group .btn-reveal-pw:hover { background: var(--gh-bg-alt); color: var(--gh-ink); border-color: var(--gh-line-strong); }
body.gh-portal .input-group:focus-within .btn-reveal-pw { border-color: var(--gh-ink); }
body.gh-portal .is-invalid, body.gh-portal .has-error .form-control, body.gh-portal .form-control.is-invalid { border-color: var(--gh-red) !important; }
body.gh-portal .invalid-feedback, body.gh-portal .form-group .field-error-msg { color: var(--gh-red-700); font-weight: 600; }
body.gh-portal .has-error button { border-color: var(--gh-red); }
body.gh-portal .form-control.is-valid { border-color: var(--gh-success); }
:where(.gh-portal) fieldset { min-width: 0; }
:where(.gh-portal) legend { color: var(--gh-ink); font-weight: 800; font-size: 1.125rem; }

/* Registration / checkout style fields (twenty-one scopes these under #registration) */
body.gh-portal #registration .field, body.gh-portal #registration .form-control {
  height: 48px; padding: 10px 14px; border: 1.5px solid var(--gh-line-strong); border-radius: 12px;
  color: var(--gh-ink); font: 500 .9688rem/1.4 var(--gh-font); background-color: #fff;
}
body.gh-portal #registration .field:focus, body.gh-portal #registration .form-control:focus { border-color: var(--gh-ink); box-shadow: 0 0 0 4px rgba(91, 124, 255, .2); }
body.gh-portal #registration .prepend-icon .field { padding-left: 44px; }
body.gh-portal #registration .prepend-icon .field-icon { width: 44px; height: 48px; line-height: 48px; }
body.gh-portal #registration .field-icon i { color: var(--gh-subtle); }
body.gh-portal #registration .prepend-icon:focus-within .field-icon i { color: var(--gh-red); }
body.gh-portal #registration textarea.field { height: auto; }
body.gh-portal #registration .field[disabled], body.gh-portal #registration .field[readonly] { background-color: var(--gh-bg-alt); }
body.gh-portal #registration select.field { padding-right: 40px; }
body.gh-portal #registration .sub-heading { border-top-color: var(--gh-line); margin: 26px 0 32px; }
body.gh-portal #registration .sub-heading span { padding: 0 16px; top: -12px; background-color: var(--gh-bg-alt); color: var(--gh-muted); font: 700 .8125rem/1.6 var(--gh-font); letter-spacing: .1em; text-transform: uppercase; }
body.gh-portal #registration .card .sub-heading span { background-color: #fff; }
body.gh-portal #registration .intl-tel-input .flag-container { z-index: 5; }

/* Checkboxes and radios: brand accent, comfortable hit area */
:where(.gh-portal) input[type="checkbox"], :where(.gh-portal) input[type="radio"] { accent-color: var(--gh-red); }
body.gh-portal .form-check { padding-left: 1.6rem; }
body.gh-portal .form-check-input { width: 18px; height: 18px; margin-top: .2rem; margin-left: -1.6rem; }
body.gh-portal .form-check-label { font-weight: 500; color: var(--gh-text); }
body.gh-portal .form-check-label, body.gh-portal label.form-check-label { cursor: pointer; }
body.gh-portal .custom-control-label { font-weight: 500; color: var(--gh-text); }
body.gh-portal .custom-control-label::before { border: 1.5px solid var(--gh-line-strong); background: #fff; }
body.gh-portal .custom-checkbox .custom-control-label::before { border-radius: 6px; }
body.gh-portal .custom-control-input:checked ~ .custom-control-label::before { border-color: var(--gh-red); background-color: var(--gh-red); }
body.gh-portal .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 4px rgba(91, 124, 255, .25); }
body.gh-portal .custom-switch .custom-control-label::before { border-radius: 999px; }
body.gh-portal .custom-file-label { height: 48px; padding: 11px 14px; border: 1.5px solid var(--gh-line-strong); border-radius: 12px; color: var(--gh-muted); }
body.gh-portal .custom-file-label::after { height: 45px; padding: 11px 14px; background: var(--gh-bg-alt); color: var(--gh-ink); font-weight: 700; border-radius: 0 10px 10px 0; }
body.gh-portal .custom-file-input:focus ~ .custom-file-label { border-color: var(--gh-ink); box-shadow: 0 0 0 4px rgba(91, 124, 255, .2); }

/* bootstrap-switch (used by WHMCS for opt-ins) */
body.gh-portal .bootstrap-switch { border-radius: 999px; border-color: var(--gh-line-strong); }
body.gh-portal .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
body.gh-portal .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info { background: var(--gh-red); color: #fff; }
body.gh-portal .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success { background: var(--gh-success); color: #fff; }
body.gh-portal .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default { background: var(--gh-bg-soft); color: var(--gh-ink); }
body.gh-portal .bootstrap-switch.bootstrap-switch-focused { border-color: var(--gh-ink); box-shadow: 0 0 0 4px rgba(91, 124, 255, .2); }

/* Password strength meter */
body.gh-portal .password-strength-meter .progress { height: 8px; }

/* intl-tel-input */
body.gh-portal .intl-tel-input { width: 100%; }
/* Dial-code padding sized for the larger portal font (WHMCS JS swaps the input class to .form-control) */
body.gh-portal .intl-tel-input.separate-dial-code.allow-dropdown input { padding-left: 84px !important; }
body.gh-portal .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input { padding-left: 92px !important; }
body.gh-portal .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input { padding-left: 102px !important; }
body.gh-portal .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input { padding-left: 110px !important; }
body.gh-portal .intl-tel-input .selected-flag { border-radius: 12px 0 0 12px; }
body.gh-portal .intl-tel-input.separate-dial-code .selected-dial-code { color: var(--gh-ink); font-weight: 600; }
body.gh-portal .intl-tel-input.separate-dial-code .selected-flag { padding-left: 10px; white-space: nowrap; }
body.gh-portal .intl-tel-input.separate-dial-code .selected-dial-code { padding-left: 26px; font-size: 14px; white-space: nowrap; }
body.gh-portal .intl-tel-input .country-list { border-radius: 12px; border-color: var(--gh-line); box-shadow: var(--gh-shadow); font-size: .875rem; }

/* reCAPTCHA spacing */
body.gh-portal #default-captcha-domainchecker, body.gh-portal .recaptcha-container, body.gh-portal #google-recaptcha-domainchecker { margin: 6px 0 16px; }

/* ==========================================================================
   6. Tables, DataTables, pagination
   ========================================================================== */
body.gh-portal .table { color: var(--gh-text); font-size: .9063rem; }
body.gh-portal .table th, body.gh-portal .table td { padding: 13px 16px; border-top: 1px solid var(--gh-line); vertical-align: middle; }
body.gh-portal .table thead th {
  border-bottom: 1px solid var(--gh-line); border-top: 0; background: var(--gh-bg-alt);
  color: var(--gh-muted); font: 700 .75rem/1.3 var(--gh-font); letter-spacing: .08em; text-transform: uppercase;
}
body.gh-portal .table-bordered, body.gh-portal .table-bordered th, body.gh-portal .table-bordered td { border-color: var(--gh-line); }
body.gh-portal .table-striped tbody tr:nth-of-type(odd) { background-color: #FAFBFD; }
body.gh-portal .table-hover tbody tr:hover { background-color: var(--gh-bg-alt); color: var(--gh-ink); }
body.gh-portal .table-responsive { border-radius: var(--gh-radius); }
body.gh-portal .table .text-right, body.gh-portal .table .amount { font-variant-numeric: tabular-nums; }

/* WHMCS list tables (services, domains, invoices, tickets). The container scrolls sideways on narrow screens
   (twenty-one relies on DataTables Responsive, which is not always loaded), so the page itself never overflows. */
body.gh-portal .table-container { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.gh-portal .dataTables_wrapper { max-width: 100%; }
body.gh-portal .primary-content { overflow-wrap: anywhere; }
body.gh-portal .primary-content table { overflow-wrap: normal; }
body.gh-portal table.table-list thead th { padding: 12px 14px; background: var(--gh-bg-alt); border-bottom: 1px solid var(--gh-line); color: var(--gh-muted); }
body.gh-portal table.table-list tbody td { padding: 14px; font-size: .9063rem; border-top: 1px solid var(--gh-line); }
body.gh-portal .table-list > tbody > tr > td { background-color: #fff; }
body.gh-portal .table-list > tbody > tr:hover > td { background-color: #FAFBFD; }
body.gh-portal .table-list > tbody > tr > td a.border-left { border-left-color: var(--gh-line) !important; }
body.gh-portal .dataTables_wrapper table.table-list {
  margin: 14px 0 !important; border: 1px solid var(--gh-line); border-radius: var(--gh-radius); border-collapse: separate !important; border-spacing: 0; overflow: hidden;
}
body.gh-portal .dataTables_wrapper table.table-list thead th { border-bottom: 1px solid var(--gh-line); font-weight: 700; }
body.gh-portal .dataTables_wrapper table.table-list thead th.sorting_asc, body.gh-portal .dataTables_wrapper table.table-list thead th.sorting_desc { background-color: var(--gh-bg-soft); color: var(--gh-ink); }
body.gh-portal .dataTables_wrapper .dataTables_filter label, body.gh-portal .dataTables_wrapper .dataTables_length label { color: var(--gh-muted); font-weight: 600; font-size: .875rem; }
body.gh-portal .dataTables_wrapper .dataTables_filter label .form-control {
  height: 42px; padding: 8px 14px 8px 40px !important; font-size: .9063rem; border-radius: 12px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235C6380' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px center;
}
body.gh-portal .dataTables_wrapper .dataTables_length select.form-control { height: 40px; width: auto; display: inline-block; }
body.gh-portal .dataTables_wrapper .dataTables_info { color: var(--gh-muted); font-size: .8125rem; padding-top: 10px; }
body.gh-portal table.dataTable thead .sorting::before, body.gh-portal table.dataTable thead .sorting::after { opacity: .25; }
body.gh-portal table.dataTable thead .sorting_asc::before, body.gh-portal table.dataTable thead .sorting_desc::after { opacity: .9; color: var(--gh-red); }
body.gh-portal table.dataTable tbody tr.selected { background: var(--gh-red-50); }

body.gh-portal .pagination { font-size: .875rem; gap: 6px; flex-wrap: wrap; }
body.gh-portal .page-link {
  min-width: 38px; height: 38px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center;
  margin: 0; border: 1px solid var(--gh-line); border-radius: 10px !important; background: #fff;
  color: var(--gh-ink); font-weight: 700;
}
body.gh-portal .page-link:hover { background: var(--gh-bg-alt); border-color: var(--gh-line-strong); color: var(--gh-ink); }
body.gh-portal .page-item.active .page-link,
body.gh-portal .pagination > .active > a, body.gh-portal .pagination > .active > span,
body.gh-portal .pagination > .active > a:hover, body.gh-portal .pagination > .active > span:hover { background-color: var(--gh-ink); border-color: var(--gh-ink); color: #fff; }
body.gh-portal .page-item.disabled .page-link { color: var(--gh-subtle); background: #fff; border-color: var(--gh-line); }

/* ==========================================================================
   7. Alerts, badges, status labels
   ========================================================================== */
body.gh-portal .alert {
  padding: 14px 18px; border: 1px solid transparent; border-radius: var(--gh-radius);
  font-size: .9375rem; line-height: 1.55;
}
body.gh-portal .alert-success { background: var(--gh-success-bg); border-color: #BFE5D3; color: #0B5B40; }
body.gh-portal .alert-danger, body.gh-portal .alert-error { background: var(--gh-red-50); border-color: #F1C9CA; color: var(--gh-red-700); }
body.gh-portal .alert-warning { background: #FFF7E6; border-color: #F6DEAE; color: #7A4D00; }
body.gh-portal .alert-info { background: #EEF1FF; border-color: #D3DAFB; color: #2D3566; }
body.gh-portal .alert-secondary, body.gh-portal .alert-light { background: #fff; border-color: var(--gh-line); color: var(--gh-text); }
body.gh-portal .alert-link { font-weight: 800; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
body.gh-portal .alert .close { color: inherit; opacity: .6; text-shadow: none; }
body.gh-portal .alert > :last-child { margin-bottom: 0; }

body.gh-portal .badge {
  padding: 4px 9px; border: 0; border-radius: 999px; font: 700 .75rem/1.3 var(--gh-font); letter-spacing: .01em; vertical-align: .1em;
}
body.gh-portal .badge-primary { background: var(--gh-red); color: #fff; }
body.gh-portal .badge-secondary, body.gh-portal .badge-light, body.gh-portal .badge-default { background: var(--gh-bg-soft); color: var(--gh-ink); }
body.gh-portal .badge-success { background: var(--gh-success-bg); color: var(--gh-success); }
body.gh-portal .badge-danger { background: var(--gh-red-50); color: var(--gh-red-700); }
body.gh-portal .badge-warning { background: #FFF1D6; color: #7A4D00; }
body.gh-portal .badge-info { background: #EEF1FF; color: #3B4A9E; }
body.gh-portal .badge-dark { background: var(--gh-ink); color: #fff; }
body.gh-portal a.badge-success:hover { background: #CDEBDD; color: var(--gh-success); }

/* WHMCS .label / .status-* (services, domains, invoices, tickets): soft pills instead of solid blocks */
body.gh-portal .label {
  display: inline-block; padding: 4px 10px; margin: 0; border-radius: 999px;
  font: 700 .75rem/1.35 var(--gh-font); letter-spacing: .01em; color: #fff; white-space: nowrap;
}
body.gh-portal .label.status, body.gh-portal .status { text-transform: none; }
body.gh-portal .status-active, body.gh-portal .status-open, body.gh-portal .status-completed, body.gh-portal .status-paid,
body.gh-portal .status-accepted, body.gh-portal .label-success { background-color: var(--gh-success-bg); color: var(--gh-success); }
body.gh-portal .status-unpaid, body.gh-portal .status-pending, body.gh-portal .status-inprogress, body.gh-portal .label-danger { background-color: var(--gh-red-50); color: var(--gh-red-700); }
body.gh-portal .status-suspended, body.gh-portal .status-pending-transfer, body.gh-portal .status-refunded, body.gh-portal .status-customer-reply,
body.gh-portal .status-pending-registration, body.gh-portal .status-redemption, body.gh-portal .status-grace, body.gh-portal .label-warning { background-color: #FFF1D6; color: #7A4D00; }
body.gh-portal .status-answered, body.gh-portal .status-onhold, body.gh-portal .status-payment-pending, body.gh-portal .status-delivered,
body.gh-portal .label-info { background-color: #EEF1FF; color: #3B4A9E; }
body.gh-portal .status-closed, body.gh-portal .status-cancelled, body.gh-portal .status-terminated, body.gh-portal .status-expired,
body.gh-portal .status-transferred-away, body.gh-portal .label-default { background-color: var(--gh-bg-soft); color: var(--gh-muted); }
body.gh-portal .status-fraud, body.gh-portal .status-collections, body.gh-portal .status-lost, body.gh-portal .status-dead { background-color: var(--gh-ink); color: #fff; }

/* ==========================================================================
   8. Dropdowns, tabs, pills, progress, popovers, tooltips
   ========================================================================== */
body.gh-portal .dropdown-menu {
  min-width: 220px; padding: 8px; margin-top: 6px; border: 1px solid rgba(14, 19, 48, .06); border-radius: 16px;
  background: #fff; box-shadow: var(--gh-shadow-lg); font: 500 .9375rem/1.4 var(--gh-font); list-style: none;
}
body.gh-portal .dropdown-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px;
  color: var(--gh-text); font-weight: 600; white-space: nowrap;
}
body.gh-portal .dropdown-item:hover, body.gh-portal .dropdown-item:focus { background: var(--gh-bg-alt); color: var(--gh-ink); }
body.gh-portal .dropdown-item.active, body.gh-portal .dropdown-item:active { background: var(--gh-red-50); color: var(--gh-red-700); }
body.gh-portal .dropdown-divider { height: 0; margin: 6px 4px; border-top: 1px solid var(--gh-line); overflow: hidden; }
body.gh-portal .dropdown-header { color: var(--gh-muted); font: 700 .75rem/1.2 var(--gh-font); letter-spacing: .08em; text-transform: uppercase; }

body.gh-portal .nav-tabs { border-bottom: 1px solid var(--gh-line); gap: 4px; }
body.gh-portal .nav-tabs .nav-link {
  margin-bottom: -1px; padding: 12px 16px; border: 0; border-radius: 10px 10px 0 0;
  color: var(--gh-muted); font-weight: 700; font-size: .9375rem; background: transparent;
}
body.gh-portal .nav-tabs .nav-link:hover { color: var(--gh-ink); background: var(--gh-bg-alt); }
body.gh-portal .nav-tabs .nav-link.active, body.gh-portal .nav-tabs .nav-item.show .nav-link {
  color: var(--gh-ink); background: transparent; box-shadow: inset 0 -2px 0 var(--gh-red);
}
body.gh-portal .card-header-tabs { margin-bottom: -16px; }
body.gh-portal .nav-pills .nav-link { border-radius: 10px; color: var(--gh-text); font-weight: 700; }
body.gh-portal .nav-pills .nav-link.active, body.gh-portal .nav-pills .show > .nav-link { background: var(--gh-ink); color: #fff; }
body.gh-portal .tab-content > .tab-pane { outline: none; }
body.gh-portal .responsive-tabs-sm .nav-item a:hover { background-color: var(--gh-bg-alt); }

body.gh-portal .progress { height: 10px; border-radius: 999px; background: var(--gh-bg-soft); overflow: hidden; }
body.gh-portal .progress-bar { background-color: var(--gh-red); border-radius: 999px; }
body.gh-portal .progress-bar.bg-success { background-color: var(--gh-success) !important; }
body.gh-portal .progress-bar.bg-warning { background-color: #F2B33D !important; }
body.gh-portal .progress-bar.bg-danger { background-color: var(--gh-red-700) !important; }

body.gh-portal .popover { border: 1px solid rgba(14, 19, 48, .08); border-radius: 16px; box-shadow: var(--gh-shadow-lg); font-family: var(--gh-font); }
body.gh-portal .popover-header { background: #fff; border-bottom-color: var(--gh-line); color: var(--gh-ink); font-weight: 800; border-radius: 16px 16px 0 0; }
body.gh-portal .popover-body { color: var(--gh-text); }
body.gh-portal .popover-user-notifications { max-width: 380px; min-width: 300px; padding: 6px; border-radius: 16px; border-color: rgba(14, 19, 48, .08); font-family: var(--gh-font); }
body.gh-portal .popover-user-notifications .popover-body { padding: 0; }
body.gh-portal .popover-user-notifications ul li { min-height: 0; padding: 0; border-bottom: 1px solid var(--gh-line); }
body.gh-portal .popover-user-notifications ul li:last-child { border-bottom: 0; }
body.gh-portal .popover-user-notifications ul li a { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 10px; color: var(--gh-text); font-size: .875rem; line-height: 1.45; }
body.gh-portal .popover-user-notifications ul li a:hover { background: var(--gh-bg-alt); color: var(--gh-ink); text-decoration: none; }
body.gh-portal .popover-user-notifications ul li i.fas, body.gh-portal .popover-user-notifications ul li i.far { float: none; flex: none; padding-top: 1px; font-size: 18px; }
body.gh-portal .popover-user-notifications ul li .message { margin-left: 0; }
body.gh-portal .popover-user-notifications ul li i.fa-exclamation-circle { color: var(--gh-red); }
body.gh-portal .popover-user-notifications ul li i.fa-exclamation-triangle { color: #D99100; }
body.gh-portal .popover-user-notifications ul li i.fa-info-circle { color: #3B4A9E; }
body.gh-portal .popover-user-notifications ul li i.fa-check-circle { color: var(--gh-success); }
body.gh-portal .popover-user-notifications ul li.none { padding: 14px 12px; color: var(--gh-muted); font-weight: 600; font-size: .875rem; }
body.gh-portal .tooltip { font-family: var(--gh-font); }
body.gh-portal .tooltip-inner { padding: 7px 10px; border-radius: 8px; background: var(--gh-ink); font-size: .8125rem; font-weight: 600; }
body.gh-portal .bs-tooltip-bottom .arrow::before, body.gh-portal .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: var(--gh-ink); }
body.gh-portal .bs-tooltip-top .arrow::before, body.gh-portal .bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: var(--gh-ink); }

/* ==========================================================================
   9. Modals, language chooser, overlay
   ========================================================================== */
body.gh-portal .modal-backdrop.show { background: var(--gh-navy-950); opacity: .62; }
body.gh-portal .modal-content { border: 0; border-radius: 20px; box-shadow: var(--gh-shadow-lg); overflow: hidden; font-family: var(--gh-font); }
body.gh-portal .modal .modal-header { padding: 18px 24px; background: #fff; border-bottom: 1px solid var(--gh-line); align-items: center; }
body.gh-portal .modal .modal-header.bg-primary { background: var(--gh-navy-900) !important; border-bottom-color: transparent; }
body.gh-portal .modal .modal-header.bg-primary .modal-title, body.gh-portal .modal .modal-header.bg-primary .close { color: #fff; }
body.gh-portal .modal-title { color: var(--gh-ink); font: 800 1.1875rem/1.3 var(--gh-font); letter-spacing: -.01em; }
body.gh-portal .modal-body { padding: 22px 24px; }
body.gh-portal .modal-footer { padding: 14px 24px; background: var(--gh-bg-alt); border-top: 1px solid var(--gh-line); gap: 8px; }
body.gh-portal .modal-footer > * { margin: 0; }
body.gh-portal .modal .close { opacity: .55; text-shadow: none; font-size: 1.6rem; font-weight: 400; }
body.gh-portal .modal .close:hover { opacity: 1; }

/* Language / currency chooser */
body.gh-portal .modal-localisation .modal-content { background: var(--gh-navy-900); }
body.gh-portal .modal-localisation .modal-body {
  position: relative; padding: 28px 30px 24px;
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(124, 140, 255, .22), transparent 60%),
    radial-gradient(60% 60% at 0% 100%, rgba(187, 52, 55, .26), transparent 60%),
    var(--gh-navy-900);
}
body.gh-portal .modal-localisation .close { position: absolute; top: 14px; right: 18px; color: #fff; opacity: .7; }
body.gh-portal .gh-locale__title { margin: 0; color: #fff; font: 800 1.375rem/1.2 var(--gh-font); letter-spacing: -.02em; }
body.gh-portal .modal-localisation .h5 { color: var(--gh-on-dark-muted); font: 700 .75rem/1.2 var(--gh-font); letter-spacing: .1em; text-transform: uppercase; }
body.gh-portal .modal-localisation .item-selector { margin-left: -5px; margin-right: -5px; }
body.gh-portal .modal-localisation .item-selector > div { padding: 5px; }
body.gh-portal .modal-localisation .item-selector .item {
  margin: 0; padding: 9px 12px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px;
  background: rgba(255, 255, 255, .04); color: #E4E7F5; font: 600 .875rem/1.3 var(--gh-font); text-align: left;
}
body.gh-portal .modal-localisation .item-selector .item:hover { background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }
body.gh-portal .modal-localisation .item-selector .item.active { background: #fff; border-color: #fff; color: var(--gh-ink); }
body.gh-portal .modal-localisation .modal-footer { background: var(--gh-navy-950); border-top: 1px solid rgba(255, 255, 255, .08); }
body.gh-portal .modal-localisation .modal-footer .btn-default { background: transparent; border-color: rgba(255, 255, 255, .28); color: #fff; }
body.gh-portal .modal-localisation .modal-footer .btn-default:hover { border-color: #fff; }

/* Full-page overlay (payment redirects etc.) */
body.gh-portal #fullpage-overlay { background-color: rgba(6, 10, 31, .82); font-family: var(--gh-font); }
body.gh-portal #fullpage-overlay .msg { font-weight: 600; }

/* ==========================================================================
   10. Client area home, domain search, misc twenty-one pages
   ========================================================================== */
/* Stat tiles (clientareahome) */
body.gh-portal .tiles { margin-bottom: 28px !important; }
body.gh-portal .tiles .row { margin: -8px; }
body.gh-portal .tiles .row > div { padding: 8px; }
body.gh-portal .tiles .tile {
  position: relative; display: block; height: 100%; padding: 20px 22px 18px; overflow: hidden;
  border: 1px solid var(--gh-line) !important; border-radius: var(--gh-radius-lg); background: #fff;
  box-shadow: var(--gh-shadow-sm); color: var(--gh-ink); text-decoration: none;
  transition: transform var(--gh-dur) var(--gh-ease), box-shadow var(--gh-dur) var(--gh-ease), border-color var(--gh-dur);
}
body.gh-portal .tiles .tile:hover { transform: translateY(-2px); box-shadow: var(--gh-shadow); border-color: var(--gh-line-strong) !important; background: #fff; }
body.gh-portal .tiles .tile i {
  top: 18px; right: 18px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 12px; background: var(--gh-red-50); color: var(--gh-red); font-size: 20px; line-height: 1;
}
body.gh-portal .tiles .tile:hover i { font-size: 20px; color: #fff; background: var(--gh-red); }
body.gh-portal .tiles .tile .stat { margin-top: 26px; color: var(--gh-ink); font: 800 2.25rem/1 var(--gh-font); letter-spacing: -.03em; }
body.gh-portal .tiles .tile .title { margin-top: 8px; color: var(--gh-muted); font: 700 .75rem/1.3 var(--gh-font); letter-spacing: .1em; text-transform: uppercase; }
body.gh-portal .tiles .tile .highlight { width: 32px; height: 3px; margin-top: 12px; border-radius: 3px; }
body.gh-portal .tiles .bg-color-blue { background-color: var(--gh-navy-600); }
body.gh-portal .tiles .bg-color-green { background-color: var(--gh-success); }
body.gh-portal .tiles .bg-color-red { background-color: var(--gh-red); }
body.gh-portal .tiles .bg-color-gold { background-color: #E0A030; }

/* Home panels (clientareahome) */
body.gh-portal .client-home-cards .card { margin-bottom: 20px; }
body.gh-portal .client-home-cards .card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; }
body.gh-portal .client-home-cards .card-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.0625rem; }
body.gh-portal .client-home-cards .card-title > i { color: var(--gh-red); }
body.gh-portal .client-home-cards .card-title { flex: 1 1 auto; flex-wrap: wrap; row-gap: 8px; }
body.gh-portal .client-home-cards .card-title > .float-right { order: 9; float: none !important; margin-left: auto; }
body.gh-portal .client-home-cards .card-header .btn { padding: 6px 12px; font-size: .8125rem; background: #fff; border: 1px solid var(--gh-line-strong); color: var(--gh-ink); border-radius: 10px; }
body.gh-portal .client-home-cards .card-header .btn:hover { border-color: var(--gh-ink); }
body.gh-portal .client-home-cards .list-group .list-group-item { padding: 12px 20px; border-color: var(--gh-line); font-size: .9063rem; }
body.gh-portal .client-home-cards .card-footer { font-size: .8125rem; color: var(--gh-muted); }
body.gh-portal .client-home-cards .card-footer:not(:has(*)) { display: none; }
body.gh-portal .client-home-cards .card > .list-group:last-child .list-group-item:last-child { border-bottom-left-radius: var(--gh-radius-lg); border-bottom-right-radius: var(--gh-radius-lg); }
body.gh-portal [class*="card-accent-"] { border-top-width: 3px !important; }
body.gh-portal .action-icon-btns a { border-radius: var(--gh-radius); border: 1px solid var(--gh-line); background: #fff; color: var(--gh-ink); }
body.gh-portal .action-icon-btns a:hover { border-color: var(--gh-line-strong); box-shadow: var(--gh-shadow-sm); text-decoration: none; }
body.gh-portal .action-icon-btns a .ico-container { color: var(--gh-red); }

/* Domain search (twenty-one homepage include) */
body.gh-portal .home-domain-search {
  padding: 40px 0; background: var(--gh-navy-900); color: var(--gh-on-dark-muted);
}
body.gh-portal .home-domain-search h2 { color: #fff; }
body.gh-portal .home-domain-search .input-group-wrapper { border-radius: 16px; box-shadow: var(--gh-shadow-lg); }
body.gh-portal .home-domain-search .input-group-wrapper .form-control { height: 60px; border: 0; border-radius: 14px; font-weight: 700; }
body.gh-portal .home-domain-search .input-group-wrapper .btn { border-radius: 12px; }

/* Domain pricing / TLD filters (index.php?rp=/domain/pricing) */
body.gh-portal .tld-filters a.badge, body.gh-portal .tld-filters .badge {
  padding: 7px 12px; margin: 0 4px 6px 0; border: 1px solid var(--gh-line); background: #fff; color: var(--gh-ink); font-size: .8125rem;
}
body.gh-portal .tld-filters a.badge-success, body.gh-portal .tld-filters .badge-success { background: var(--gh-ink); border-color: var(--gh-ink); color: #fff; }
body.gh-portal .domain-pricing .tld-pricing-header, body.gh-portal .tld-pricing-header { background: var(--gh-bg-alt); color: var(--gh-muted); font-weight: 700; border-radius: 12px 12px 0 0; }
body.gh-portal .tld-row { border-color: var(--gh-line) !important; }
body.gh-portal .tld-row.highlighted { background: var(--gh-red-50); }

/* Knowledgebase search (base look; announcements, KB and downloads are styled in gh-pages.css) */
body.gh-portal .kb-search .form-control, body.gh-portal .search-form .form-control { height: 52px; }

/* Ticket replies, markdown editor */
body.gh-portal .md-editor { border-radius: 12px; border-color: var(--gh-line-strong); }
body.gh-portal .md-editor > .md-header { border-radius: 12px 12px 0 0; background: var(--gh-bg-alt); }
body.gh-portal .md-editor.active { border-color: var(--gh-ink); box-shadow: 0 0 0 4px rgba(91, 124, 255, .2); }
body.gh-portal .md-editor > textarea { background: #fff; }
body.gh-portal .markdown-editor-status, body.gh-portal .markdown-editor-status .small-font { color: var(--gh-muted); }

/* Banners from includes/ (network issues, user validation, email verification) */
body.gh-portal .network-issue-alert { margin: 0; padding: 12px 0; border: 0; border-radius: 0; font-size: .875rem; font-weight: 600; }
body.gh-portal .network-issue-alert .alert-link { white-space: nowrap; }
body.gh-portal .verification-banner { padding: 12px 0; background: #fff; border-bottom: 1px solid var(--gh-line); color: var(--gh-text); font-family: var(--gh-font); font-size: .9063rem; }
body.gh-portal .verification-banner .row { align-items: center; }
body.gh-portal .verification-banner .text { color: var(--gh-ink); font-weight: 600; }
body.gh-portal .verification-banner i { margin-right: 8px; color: var(--gh-red); font-size: 1.125rem; vertical-align: -2px; }
body.gh-portal .verification-banner .btn.btn-action, body.gh-portal .verification-banner.email-verification .btn.btn-action,
body.gh-portal .verification-banner.email-verification .btn.btn-action:active, body.gh-portal .verification-banner.user-validation .btn.btn-action {
  min-height: 40px; padding: 8px 16px; background-color: var(--gh-ink); border-color: var(--gh-ink); color: #fff; border-radius: 10px;
}
body.gh-portal .verification-banner .btn.btn-action:hover, body.gh-portal .verification-banner.email-verification .btn.btn-action:hover { background-color: var(--gh-navy-700); border-color: var(--gh-navy-700); color: #fff; }
body.gh-portal .verification-banner .fas, body.gh-portal .verification-banner .fal, body.gh-portal .verification-banner .far { color: var(--gh-red); font-size: 22px; padding-top: 4px; }
body.gh-portal .verification-banner .close { color: var(--gh-muted); opacity: .8; text-shadow: none; }

/* Misc twenty-one helpers */
body.gh-portal .continue-container, body.gh-portal .invite-box { border-radius: var(--gh-radius-lg); border-color: var(--gh-line); background: #fff; box-shadow: var(--gh-shadow-sm); }
body.gh-portal .select-account { border-top-color: var(--gh-line); }
body.gh-portal .select-account a { border-bottom-color: var(--gh-line); color: var(--gh-ink); }
body.gh-portal .select-account a:hover { background-color: var(--gh-bg-alt); text-decoration: none; }
body.gh-portal .w-hidden { display: none; }   /* toggled by WHMCS JS, must stay */

/* ==========================================================================
   11. Responsive + motion
   ========================================================================== */
@media (max-width: 1240px) {
  .gh-portalbar__list:not(.gh-portalbar__list--end) .gh-portalbar__link > .gh-icon:first-child,
  .gh-portalbar__list:not(.gh-portalbar__list--end) .gh-portalbar__link > i:first-child { display: none; }
  .gh-portalbar__link { padding: 0 11px; }
}
@media (max-width: 1180px) {
  .gh-portal .gh-header__portal { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 1100px) {
  /* logged-in top bar needs the room: drop the e-mail link */
  .gh-portal.gh-is-loggedin .gh-ptopbar .gh-topbar__list:first-child .gh-topbar__hide-sm { display: none; }
}
@media (max-width: 991.98px) {
  /* ...and the language chip (also in the footer) and the "Besplatna podrška" prefix */
  .gh-portal.gh-is-loggedin .gh-ptopbar__end > li.gh-topbar__hide-sm { display: none; }
  .gh-portal.gh-is-loggedin .gh-ptopbar .gh-topbar__list:first-child .gh-topbar__muted { display: none; }
}
@media (max-width: 1060px) {
  .gh-portalbar { display: none; }
}
@media (max-width: 767.98px) {
  body.gh-portal .col-form-label.text-right, body.gh-portal label.text-right { text-align: left !important; }
}
@media (max-width: 991.98px) {
  body.gh-portal section#main-body { padding: 24px 0 56px; }
  .gh-band__aside { display: none; }
  body.gh-portal .primary-content .card-body { padding: 22px; }
  /* the secondary sidebar (footer.tpl, below the content on tablets/phones) sat flush against the last content card */
  body.gh-portal .sidebar-secondary { margin-top: 18px; }
}
@media (max-width: 720px) {
  /* gh-core hides the first item of the end list on phones; the portal decides per item instead */
  .gh-portal .gh-ptopbar__end > li:first-child { display: inline-flex; }
  .gh-portal .gh-ptopbar__end > li.gh-topbar__hide-sm { display: none; }
  .gh-portal .gh-ptopbar__end { gap: 12px; }
}
@media (max-width: 640px) {
  .gh-portal .gh-header__actions { gap: 8px; }
  .gh-portal .gh-header__login { width: 44px; min-height: 44px; padding: 0; border-radius: 12px; }
  .gh-portal .gh-header__login-text { display: none; }
  .gh-band { padding: 22px 0 24px; }
  .gh-band__crumbs { margin-bottom: 8px; font-size: .8125rem; }
  body.gh-portal .primary-content .card-body { padding: 20px 18px; }
  body.gh-portal .card-header, body.gh-portal .card-footer { padding-left: 18px; padding-right: 18px; }
  body.gh-portal .modal-body, body.gh-portal .modal .modal-header, body.gh-portal .modal-footer { padding-left: 18px; padding-right: 18px; }
  body.gh-portal .table th, body.gh-portal .table td { padding: 11px 12px; }
  body.gh-portal .tiles .tile { padding: 16px 16px 14px; }
  body.gh-portal .tiles .tile i { width: 36px; height: 36px; font-size: 16px; top: 14px; right: 14px; }
  body.gh-portal .tiles .tile:hover i { font-size: 16px; }
  body.gh-portal .tiles .tile .stat { font-size: 1.75rem; margin-top: 22px; }
}
@media (max-width: 560px) {
  .gh-portal .gh-ptopbar .gh-topbar__link strong, .gh-portal .gh-ptopbar .gh-topbar__link span { white-space: nowrap; }
  .gh-portal.gh-is-loggedin .gh-ptopbar .gh-topbar__list:first-child .gh-topbar__muted { display: none; }
  .gh-portal .gh-ptopbar__name span { display: none; }
  .gh-portal .gh-ptopbar__client { gap: 6px; }
  .gh-portal .gh-ptopbar .btn-return-to-admin { padding: 4px 8px !important; }
}
@media (max-width: 420px) {
  .gh-portal .gh-ptopbar .gh-topbar__muted { display: none; }
}
@media (max-width: 760px) {
  /* guests: phone + e-mail + Otvori tiket + language chip overflow between 721 and 739px; drop the e-mail link
     (the website shows it down to 721px; the portal's extra language chip needs the room) */
  .gh-portal .gh-ptopbar .gh-topbar__list:first-child .gh-topbar__hide-sm { display: none; }
}
@media (max-width: 359.98px) {
  /* 320px phones: the portal header has one more icon button (Prijava) than the website header */
  .gh-portal .gh-header__inner { gap: 12px; }
  .gh-portal .gh-header__brand img { height: 29px; }
  .gh-portal .gh-header__actions { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  body.gh-portal .btn, body.gh-portal .tiles .tile, .gh-portalbar, .gh-portalbar__chev, .gh-band__help { transition: none !important; }
  body.gh-portal .tiles .tile:hover, body.gh-portal .btn:active { transform: none; }
}
@media print {
  .gh-topbar, .gh-header, .gh-portalbar, .gh-drawer, .gh-footer, .gh-cookie, .gh-band__aside { display: none !important; }
  .gh-band { padding: 0 0 12px; background: none !important; }
  .gh-portal .gh-band__title { color: #000; }
}