/* *****************************************************

   4host WHMCS Client Area — custom-2026.css
   Restyles the stock "Twenty-One" client theme to match
   the 4host.hu marketing site: deep navy background,
   violet/purple accent (#5d00ff), solid black CTA pills,
   Poppins headings + Inter body text, rounded cards.

   Palette values below were sampled directly from the
   live 4host.hu (hero gradient, link color, text tones)
   so this should track the real brand, not a guess.

   Scope: client area only. Nothing here targets /admin.

***************************************************** */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  --c26-bg: #0a1830;
  --c26-bg-soft: #0d2344;
  --c26-bg-deep: #060e1f;
  --c26-surface: #101f3d;
  --c26-surface-2: #16294f;
  --c26-border: rgba(159, 182, 214, 0.16);
  --c26-border-strong: rgba(159, 182, 214, 0.28);
  --c26-text: #eef4ff;
  --c26-muted: #9bb1d3;
  --c26-accent: #5d00ff;
  --c26-accent-2: #8a4dff;
  --c26-accent-tint: rgba(93, 0, 255, 0.14);
  --c26-cta-bg: #000000;
  --c26-cta-bg-hover: #16162c;
  --c26-cta-text: #ffffff;
  --c26-radius: 22px;
  --c26-radius-sm: 14px;
  --c26-shadow: 0 20px 60px rgba(3, 8, 20, 0.45);
  --c26-danger: #ff6b6b;
  --c26-warning: #ffb84d;
  --c26-success: #2ecc8f;
  --c26-info: #4fb8ff;
  --c26-header-text: #202744;
}

/* ---------- Base ---------- */

body {
  background:
    radial-gradient(circle at top right, var(--c26-accent-tint), transparent 32%),
    linear-gradient(180deg, var(--c26-bg-soft) 0%, var(--c26-bg) 50%, var(--c26-bg-deep) 100%);
  background-attachment: fixed;
  color: var(--c26-text);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Poppins", "Inter", system-ui, sans-serif;
  color: var(--c26-text);
  font-weight: 500;
}

h1, h2 { font-weight: 400; }

a { color: var(--c26-accent-2); }
a:hover, a:focus { color: var(--c26-accent); }

hr { border-color: var(--c26-border); }

::selection { background: var(--c26-accent); color: #ffffff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c26-bg); }
::-webkit-scrollbar-thumb { background: var(--c26-surface-2); border-radius: 10px; border: 2px solid var(--c26-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--c26-accent); }

.text-primary { color: var(--c26-accent-2) !important; }
.bg-primary { background-color: var(--c26-accent) !important; }
.text-muted { color: var(--c26-muted) !important; }
.primary-bg-color { background-color: var(--c26-surface) !important; }

/* ---------- Header / navbar ----------
   The real 4host.hu header is a solid WHITE bar with a thin drop
   shadow (only the page body underneath it is navy) — dark bold nav
   text, violet on hover. The previous version painted this header
   navy, which fought the parent theme's own header.header { back
   ground-color:#fff } default and left dark-gray nav text (header.
   header .navbar a { color:#444 }, more specific than the old .nav
   bar-light .navbar-nav .nav-link rules, which don't even match this
   theme's markup — its nav <a> tags carry no .nav-link class, only
   the cart/menu-toggle buttons in .toolbar do) sitting on a dark
   background, i.e. nearly unreadable. Rebuilt to match the site. */

header.header {
  background-color: #ffffff;
  border-bottom: none;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .08);
}

header.header .logo-img { max-height: 40px; width: auto; }

/* catch-all: every plain <a> inside the header's .navbar rows (nav
   items, "Rendelés"/"Fiók" dropdown toggles, the "4host Kft." brand
   link) — matches the parent theme's header.header .navbar a selector
   at equal specificity, winning on cascade order since custom.css
   loads last. */
header.header .navbar a {
  color: var(--c26-header-text);
  font-weight: 700;
}
header.header .navbar a:hover,
header.header .navbar a:focus,
header.header .navbar a.active {
  color: var(--c26-accent);
}
header.header .navbar a.navbar-brand {
  font-size: 1.15rem;
  font-weight: 800;
}

/* cart button + mobile menu toggle: the parent theme hardcodes a
   near-invisible light-gray border/text via header.header .toolbar
   .nav-link, matched here at equal specificity. */
header.header .toolbar .nav-link {
  color: var(--c26-header-text);
  border-color: rgba(15, 23, 42, .14);
}
header.header .toolbar .nav-link:hover {
  color: var(--c26-accent);
  border-color: var(--c26-accent);
}

/* knowledgebase search box (shown only in the mobile menu — the
   desktop one is hidden below): keep the dark pill button matching
   the site's black CTA buttons, but fix its text color — header.
   header .search .btn hardcodes a mid-gray more specific than the
   general .btn-default rule. */
header.header .search {
  border-color: rgba(15, 23, 42, .14);
}
header.header .search .btn {
  color: var(--c26-cta-text);
}

header.header .user-icon { color: var(--c26-accent-2); }

/* dropdown menus that hang off the header (Rendelés/Fiók) sit on the
   themed dark surface, not the white header bar — the catch-all
   header.header .navbar a rule above was also matching these nested
   links and painting them dark-header-text on a dark surface,
   unreadable. Restore the light dropdown-item styling at matching
   (or greater) specificity. */
header.header .navbar .dropdown-menu a {
  color: var(--c26-text);
  font-weight: 400;
}

/* the WHMCS menu builder double-wraps every entry (<li class=
   "dropdown-item"><a class="dropdown-item">...), so a hover/active
   background applied to plain .dropdown-item fires on BOTH the
   full-width <li> and the inset <a> at the same time, stacking two
   overlapping tinted boxes — the "two background colors" look. Move
   the row's padding onto the <a> and keep the <li> permanently
   transparent so only one, full-width highlight shows. */
header.header .navbar .dropdown-menu li.dropdown-item {
  padding: 0;
  background-color: transparent;
}
header.header .navbar .dropdown-menu li.dropdown-item > a.dropdown-item {
  padding: 4px 24px;
}
header.header .navbar .dropdown-menu a:hover,
header.header .navbar .dropdown-menu a:focus,
header.header .navbar .dropdown-menu a.active {
  color: var(--c26-text);
  background-color: var(--c26-accent-tint);
}

/* hides the built-in client-area quick search box, matching the
   marketing site's stripped-down header */
#header > div.navbar.navbar-light > div > form > div {
  display: none !important;
}

/* ---------- Buttons ---------- */
/* Primary CTAs on 4host.hu are solid black pills with bold white text
   (see "Megnézem" / "Tovább" buttons on the homepage) — matched here
   instead of the previous teal gradient. */

.btn, button.btn, input[type="submit"].btn, input[type="button"].btn {
  border-radius: 999px;
  font-weight: 700;
  /* Twenty-One resets buttons with appearance: button (not
     none) — on some browser/OS form-control themes that keeps
     native widget chrome active for background-color even
     with an author background-color set, which is why a
     couple of buttons (see Addendum 11) were intermittently
     rendering with their old native/theme color instead of
     ours. appearance: none hands full control back to CSS. */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.btn-primary {
  color: var(--c26-cta-text) !important;
  background: var(--c26-cta-bg) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  color: var(--c26-cta-text) !important;
  background: var(--c26-cta-bg-hover) !important;
  border-color: transparent !important;
}
.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(93, 0, 255, 0.35);
}

.btn-outline-primary {
  color: var(--c26-accent-2) !important;
  background-color: transparent !important;
  border-color: var(--c26-accent) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active {
  color: #ffffff !important;
  background-color: var(--c26-accent) !important;
  border-color: var(--c26-accent) !important;
}

.btn-secondary,
.btn-outline-secondary {
  color: var(--c26-text) !important;
  background-color: rgba(255, 255, 255, .02) !important;
  border-color: var(--c26-border-strong) !important;
}
.btn-secondary:hover,
.btn-outline-secondary:hover {
  color: var(--c26-text) !important;
  background-color: rgba(255, 255, 255, .06) !important;
  border-color: var(--c26-accent-2) !important;
}

.btn-link { color: var(--c26-accent-2) !important; }
.btn-link:hover { color: var(--c26-accent) !important; }

/* ---------- Cards / panels ---------- */

.card,
.mc-promo-manage,
.mc-promo-login {
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01)), var(--c26-surface);
  border: 1px solid var(--c26-border);
  border-radius: var(--c26-radius);
  box-shadow: var(--c26-shadow);
  color: var(--c26-text);
}

.card-header,
.mc-promo-manage .panel-heading,
.mc-promo-login .panel-heading {
  background-color: rgba(255, 255, 255, .03);
  border-bottom: 1px solid var(--c26-border);
  border-top-left-radius: var(--c26-radius) !important;
  border-top-right-radius: var(--c26-radius) !important;
}

.card-footer {
  background-color: rgba(0, 0, 0, .15);
  border-top: 1px solid var(--c26-border);
  border-bottom-left-radius: var(--c26-radius) !important;
  border-bottom-right-radius: var(--c26-radius) !important;
}

.card-title { color: var(--c26-text); font-family: "Poppins", "Inter", sans-serif; }
.card-text, .card-body p { color: var(--c26-muted); }

.client-home-cards .card-header {
  background: linear-gradient(145deg, var(--c26-accent-tint), rgba(255, 255, 255, .03));
}

.card-sidebar .alert { background-color: var(--c26-surface-2); border-color: var(--c26-border); }

/* ---------- Sidebar ---------- */

.sidebar .card,
.sidebar .mc-promo-manage,
.sidebar .mc-promo-login {
  background: var(--c26-surface-2);
}

/* ---------- Homepage domain-search hero ----------
   Twenty-One's includes/domain-search.tpl hardcodes .bg-white,
   which left near-white heading text sitting on a white box.
   Restyle it as a dark surface panel to match the rest of the page. */

.home-domain-search.bg-white {
  background-color: var(--c26-surface) !important;
  /* Full-bleed section spanning the page width — a
     rounded frame here reads as a floating card instead
     of a section, unlike our other actually-card-shaped
     boxes. Removed per feedback: "does not need" rounding. */
  border-radius: 0 !important;
}
.home-domain-search h2 { color: var(--c26-text); }

/* ---------- Homepage / account "icon button" tiles ----------
   Twenty-One's .action-icon-btns tiles (Announcements, Network Status,
   "Your Account" shortcuts, etc.) hardcode a white card — restyled to
   match the dark card treatment used everywhere else. The colored
   .card-accent-* top border is left as-is. */

.action-icon-btns a {
  background-color: var(--c26-surface);
  color: var(--c26-muted);
  border: 1px solid var(--c26-border);
  border-radius: var(--c26-radius-sm);
  transition: .3s;
}
.action-icon-btns a .ico-container i { color: var(--c26-muted); }
.action-icon-btns a:hover {
  color: var(--c26-text);
  background-color: var(--c26-surface-2);
  border-color: var(--c26-border-strong);
}
.action-icon-btns a:hover .ico-container i { color: var(--c26-accent-2); }

/* ---------- Forms ---------- */

.form-control,
select.form-control,
.input-group-text {
  background-color: var(--c26-surface);
  border: 1px solid var(--c26-border-strong);
  color: var(--c26-text);
}
.form-control::placeholder { color: var(--c26-muted); opacity: 1; }
.form-control:focus {
  background-color: var(--c26-surface);
  border-color: var(--c26-accent-2);
  color: var(--c26-text);
  box-shadow: 0 0 0 0.2rem rgba(93, 0, 255, 0.25);
}
.form-control:disabled, .form-control[readonly] {
  background-color: var(--c26-surface-2);
  color: var(--c26-muted);
}
.custom-control-label::before {
  background-color: var(--c26-surface);
  border-color: var(--c26-border-strong);
}
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--c26-accent);
  border-color: var(--c26-accent);
}

/* ---------- Tables ---------- */

.table {
  color: var(--c26-text);
}
.table thead th {
  border-bottom-color: var(--c26-border-strong);
  color: var(--c26-muted);
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .06em;
}
.table td, .table th {
  border-top-color: var(--c26-border);
}
.table-list thead th,
table.table-list thead th {
  background-color: rgba(255, 255, 255, .03);
  color: var(--c26-muted);
}
.table-list > tbody > tr > td,
table.table-list tbody td {
  background-color: transparent;
  color: var(--c26-text);
}
.table-list > tbody > tr:hover > td {
  background-color: var(--c26-accent-tint);
}
.table-hover tbody tr:hover {
  color: var(--c26-text);
  background-color: var(--c26-accent-tint);
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, .02);
}

/* ---------- List group ---------- */

.list-group-item {
  background-color: transparent;
  border-color: var(--c26-border);
  color: var(--c26-text);
}
.list-group-item-action:hover,
.list-group-item-action:focus {
  color: var(--c26-text);
  background-color: rgba(255, 255, 255, .04);
}
.list-group-item.active {
  background-color: var(--c26-accent);
  border-color: var(--c26-accent);
  color: #ffffff;
}
.list-group-item.disabled, .list-group-item:disabled {
  background-color: transparent;
  color: var(--c26-muted);
}

/* ---------- Badges / alerts ---------- */

.badge { border-radius: 999px; background-color: var(--c26-surface-2); color: var(--c26-text); }
.badge-primary { background-color: var(--c26-accent); color: #ffffff; }
.badge-secondary { background-color: var(--c26-surface-2); color: var(--c26-text); }
.badge-success { background-color: var(--c26-success); color: #04241a; }
.badge-danger { background-color: var(--c26-danger); color: #23090a; }
.badge-warning { background-color: var(--c26-warning); color: #2b1a02; }
.badge-info { background-color: var(--c26-info); color: #041830; }

.alert { border-radius: var(--c26-radius-sm); border-width: 1px; }
.alert-primary { background-color: var(--c26-accent-tint); border-color: rgba(93, 0, 255, .3); color: var(--c26-accent-2); }
.alert-secondary { background-color: var(--c26-surface-2); border-color: var(--c26-border-strong); color: var(--c26-text); }
.alert-success { background-color: rgba(46, 204, 143, .12); border-color: rgba(46, 204, 143, .3); color: var(--c26-success); }
.alert-danger { background-color: rgba(255, 107, 107, .12); border-color: rgba(255, 107, 107, .3); color: var(--c26-danger); }
.alert-warning { background-color: rgba(255, 184, 77, .12); border-color: rgba(255, 184, 77, .3); color: var(--c26-warning); }
.alert-info { background-color: rgba(79, 184, 255, .12); border-color: rgba(79, 184, 255, .3); color: var(--c26-info); }

/* ---------- Breadcrumb / pagination / tabs / dropdown / modal ---------- */

.breadcrumb {
  background-color: var(--c26-surface);
  /* .master-breadcrumb (the parent bar) already shares
     this exact surface color, so the border + rounded
     pill was the only thing distinguishing this from its
     own background — a pointless boxed-within-a-box look.
     Removed per feedback: "does not need border". */
  border: none;
  border-radius: 0;
}
.breadcrumb-item.active { color: var(--c26-muted); }
.breadcrumb-item a { color: var(--c26-accent-2); }

.page-link {
  background-color: var(--c26-surface);
  border-color: var(--c26-border);
  color: var(--c26-accent-2);
}
.page-link:hover {
  background-color: var(--c26-surface-2);
  border-color: var(--c26-border-strong);
  color: var(--c26-text);
}
.page-item.active .page-link {
  background-color: var(--c26-accent);
  border-color: var(--c26-accent);
  color: #ffffff;
}
.page-item.disabled .page-link {
  background-color: var(--c26-surface);
  border-color: var(--c26-border);
  color: var(--c26-muted);
}

.nav-tabs { border-bottom-color: var(--c26-border); }
.nav-tabs .nav-link { color: var(--c26-muted); border-color: transparent; }
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { border-color: transparent; color: var(--c26-text); }
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: var(--c26-text);
  background-color: transparent;
  border-color: transparent transparent var(--c26-accent-2);
  border-bottom-width: 2px;
}

.dropdown-menu {
  background-color: var(--c26-surface);
  border: 1px solid var(--c26-border);
  border-radius: var(--c26-radius-sm);
  box-shadow: var(--c26-shadow);
}
.dropdown-item { color: var(--c26-text); }
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--c26-accent-tint);
  color: var(--c26-text);
}
.dropdown-divider { border-top-color: var(--c26-border); }

.modal-content {
  background-color: var(--c26-surface);
  border: 1px solid var(--c26-border);
  border-radius: var(--c26-radius);
  color: var(--c26-text);
}
.modal-header, .modal-footer { border-color: var(--c26-border); }
.close { color: var(--c26-text); text-shadow: none; }

/* ---------- Footer ---------- */

footer.footer {
  background-color: var(--c26-bg-deep);
  border-top: 1px solid var(--c26-border);
  color: var(--c26-muted);
}
footer.footer .nav-link { color: var(--c26-muted); }
footer.footer .nav-link:hover { color: var(--c26-accent-2); }
footer.footer .btn {
  background-color: rgba(255, 255, 255, .04);
  color: var(--c26-text);
}
footer.footer .btn:hover { background-color: var(--c26-accent-tint); }
footer.footer .copyright, footer.footer .notices { color: var(--c26-muted); }

/* ---------- Misc ---------- */

.well {
  background-color: var(--c26-surface);
  border: 1px solid var(--c26-border);
  border-radius: var(--c26-radius);
  box-shadow: var(--c26-shadow);
}

code {
  background-color: var(--c26-surface-2);
  color: var(--c26-accent-2);
  padding: .1em .35em;
  border-radius: 6px;
}

/* *****************************************************
   Addendum — specificity/!important fixes found after
   first live review. The parent Twenty-One theme (and a
   few module-specific stylesheets like all.min.css for
   the classic cart) bake some rules in with !important
   or an #id-scoped selector, which beats plain classes
   regardless of load order. Matched here at equal-or-
   greater specificity (+ !important where they used it)
   so these actually win.
***************************************************** */

/* Twenty-One forces a small border-radius on the domain
   search box's buttons with !important — re-assert the
   pill shape at matching specificity. */
.home-domain-search .input-group-wrapper .btn {
  border-radius: 999px !important;
}

/* Twenty-One forces this list-group's border color with
   !important on the client-home dashboard cards. */
.client-home-cards .list-group {
  border-top-color: var(--c26-border) !important;
  border-bottom-color: var(--c26-border) !important;
}

/* .btn-default (search icon button, coupon-code button,
   modal "Bezár" button, etc.) was left completely
   unstyled — it was rendering as a plain white Bootstrap
   button on the dark theme. */
.btn-default,
.btn-default.focus,
.btn-default:focus {
  color: var(--c26-text) !important;
  background-color: var(--c26-surface) !important;
  border-color: var(--c26-border-strong) !important;
}
.btn-default:hover {
  color: var(--c26-text) !important;
  background-color: var(--c26-surface-2) !important;
  border-color: var(--c26-accent-2) !important;
}
.btn-default.active,
.btn-default:active,
.open > .dropdown-toggle.btn-default {
  color: var(--c26-text) !important;
  background-color: var(--c26-surface-2) !important;
  border-color: var(--c26-accent-2) !important;
}
.btn-default.disabled,
.btn-default[disabled] {
  color: var(--c26-muted);
  background-color: var(--c26-surface);
  border-color: var(--c26-border);
}
/* Twenty-One sets the disabled-hover state with !important */
.btn-default.disabled.focus,
.btn-default.disabled:focus,
.btn-default.disabled:hover,
.btn-default[disabled].focus,
.btn-default[disabled]:focus,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default.focus,
fieldset[disabled] .btn-default:focus,
fieldset[disabled] .btn-default:hover {
  background-color: var(--c26-surface) !important;
  border-color: var(--c26-border) !important;
}

/* .btn-success (every store "Rendelés" button, checkout,
   "Átregisztráció", etc.) was stock Bootstrap green — on
   4host.hu every call-to-action is the same solid black
   pill (see .btn-primary above), never green, so unify
   this with the site's one CTA language instead of giving
   it its own accent. (Superseded 2026 revision: the first
   pass tied it to --c26-success, which still read as an
   off-brand "success" green next to the marketing site's
   black CTAs everywhere — this button appears on every
   single store/category page, so it was the single biggest
   driver of the client area still looking unbranded.) */
.btn-success {
  color: var(--c26-cta-text) !important;
  background-color: var(--c26-cta-bg) !important;
  border-color: transparent !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active {
  color: var(--c26-cta-text) !important;
  background-color: var(--c26-cta-bg-hover) !important;
  border-color: transparent !important;
}

/* The breadcrumb strip and modal header bar are plain
   light-gray in the parent theme, not routed through the
   .breadcrumb / .modal-content rules below them. */
.master-breadcrumb {
  background-color: var(--c26-surface);
}
.modal-header,
.modal .modal-header {
  background-color: var(--c26-surface);
}

/* ---------- Classic cart (order.php "standard_cart") ----------
   modules/.../all.min.css scopes these under #order-standard_cart,
   an ID selector that outranks plain classes no matter the load
   order, so they need matching specificity here. */
#order-standard_cart .view-cart-items-header {
  background-color: var(--c26-surface-2);
  color: var(--c26-text);
  border-bottom: 1px solid var(--c26-border);
}
#order-standard_cart .order-summary {
  background-color: var(--c26-surface-2);
  border-bottom-color: var(--c26-border-strong);
}
#order-standard_cart .order-summary h2 {
  color: var(--c26-text);
}
#order-standard_cart .order-summary .subtotal,
#order-standard_cart .order-summary .bordered-totals,
#order-standard_cart .order-summary .summary-totals {
  border-color: var(--c26-border);
}
#order-standard_cart .order-summary .recurring-charges {
  color: var(--c26-muted);
}
#order-standard_cart .order-summary .btn-continue-shopping {
  color: var(--c26-muted);
}
#order-standard_cart .order-summary .btn-continue-shopping:hover {
  color: var(--c26-text);
}

/* *****************************************************
   Addendum 2 — found via a systematic pass: scripted a
   scan across every page (home, cart, ticket form,
   knowledgebase, login) for any element still resolving
   to a solid light/white background, then traced each
   one to its winning rule instead of guessing.
***************************************************** */

/* Homepage domain-search box: the outer wrapper around
   the input+buttons is its own white-padded frame,
   separate from .home-domain-search itself. */
.home-domain-search .input-group-wrapper {
  background-color: var(--c26-surface-2);
  border-color: var(--c26-border-strong);
}

/* Classic cart (order.php): the category/quantity <select>,
   the coupon-code <input class="field">, the promo/tax tab
   panel, the active tab itself, and the summary box's inner
   wrapper are ALL separately hardcoded light in all.min.css
   under the #order-standard_cart ID — none of these were
   caught by the #order-standard_cart .order-summary rule
   added earlier, since they're siblings/children with their
   own selectors. */
#order-standard_cart .field,
#order-standard_cart .form-control {
  background-color: var(--c26-surface);
  color: var(--c26-text);
  border-color: var(--c26-border-strong);
}
#order-standard_cart .view-cart-tabs .tab-content {
  background-color: var(--c26-surface);
}
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"],
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"] {
  background-color: var(--c26-surface);
  color: var(--c26-text);
  border-color: var(--c26-border) var(--c26-border) var(--c26-surface);
}
#order-standard_cart .summary-container {
  background-color: var(--c26-surface);
}

/* Support-ticket form: theme.min.css targets the markdown
   editor textarea with a MORE SPECIFIC selector than plain
   .form-control (.md-editor > textarea.markdown-editor has
   2 classes vs. .form-control's 1), so it was winning by
   specificity regardless of load order. Toolbar/footer/file
   -upload label were simply never covered before. */
.md-editor > textarea.markdown-editor,
.md-input {
  background-color: var(--c26-surface);
  color: var(--c26-text);
}
.md-header,
.md-footer {
  background-color: var(--c26-surface-2);
  border-color: var(--c26-border);
  color: var(--c26-muted);
}
.custom-file-label {
  background-color: var(--c26-surface);
  color: var(--c26-text);
  border-color: var(--c26-border-strong);
}
.custom-file-label::after {
  background-color: var(--c26-surface-2);
  color: var(--c26-text);
}

/* *****************************************************
   Addendum 3 — order sub-pages (store listing, product
   configuration, cart, upsell widgets). Bootstrap's
   .bg-white utility and several module-specific white
   card patterns from templates/orderforms/custom/css/
   all.min.css (a SEPARATE stylesheet from the theme's
   own all.min.css, loaded only on the classic order-form
   flow) were never covered — this is what showed up as
   "many things still plain white" on the store, product
   configuration, and cart pages.
***************************************************** */

/* Bootstrap's .bg-white utility carries its own !important
   and shows up repeatedly on this theme's order-flow pages
   (SSL/addon upsell boxes, etc.) — catch it everywhere
   rather than chasing each instance individually. */
.bg-white {
  background-color: var(--c26-surface) !important;
}

/* product-configuration page: the sticky bar showing the
   product name/price while configuring options. */
#order-standard_cart .product-info {
  background-color: var(--c26-surface-2);
  border-top-color: var(--c26-border);
  border-bottom-color: var(--c26-border);
}

/* addon upsell box on the product-configuration page (e.g.
   "Protect your site with SSL") — background comes from the
   .bg-white rule above; only the border needs matching here. */
#order-standard_cart .addon-promo-container {
  border-color: var(--c26-border);
}

/* store listing page: each product tile and its title bar.
   (2026-09 revision: radius/border-opacity/shadow now match the
   .card family exactly — see Addendum 8 below for why — and the
   tile is stretched to fill its row-eq-height column so same-row
   cards are actually equal height, not just their invisible
   column wrappers.) */
#order-standard_cart .products .product {
  background-color: var(--c26-surface);
  border-color: var(--c26-border);
  border-radius: var(--c26-radius);
  box-shadow: var(--c26-shadow);
  /* the tile's own margin-bottom (20px, set by the parent
     theme) is what creates the visible gap between rows —
     stretching to a literal 100% would eat that margin and
     make adjacent rows' cards touch, so only fill the
     column up to (100% - that same 20px). */
  height: calc(100% - 20px);
  box-sizing: border-box;
}
#order-standard_cart .products .product header {
  background-color: var(--c26-surface-2);
  border-radius: var(--c26-radius) var(--c26-radius) 0 0;
}
#order-standard_cart .products .product header span {
  color: var(--c26-text);
}
#order-standard_cart .products .product header .qty {
  color: var(--c26-muted);
}

/* cart-page cross-sell widgets (MarketConnect "Recommended
   for you" cards — SSL/backup/VPN/etc. upsells). Per-brand
   accent colors (.weebly, .sitelock, .nordvpn, ...) only set
   border-color/button colors and are left untouched; only the
   base white card + divider need dark-theme colors. */
#order-standard_cart .mc-promo {
  background-color: var(--c26-surface);
  border-top-color: var(--c26-border-strong);
  border-left-color: var(--c26-border-strong);
  border-right-color: var(--c26-border-strong);
}
#order-standard_cart .mc-promo .body {
  background-color: var(--c26-surface-2);
  border-top-color: var(--c26-bg-deep);
}

/* same cross-sell widget under its older/alternate markup
   (.product-recommendations), seen on other order-flow steps. */
.product-recommendations .product-recommendation {
  background-color: var(--c26-surface);
  border-top-color: var(--c26-border-strong);
  border-left-color: var(--c26-border-strong);
  border-right-color: var(--c26-border-strong);
}
.product-recommendations .product-recommendation .body {
  background-color: var(--c26-surface-2);
  border-top-color: var(--c26-bg-deep);
}

/* *****************************************************
   Addendum 4 — SSL certificates landing page
   (index.php?rp=/store/ssl-certificates), and any other
   page using the "landing-page" storefront template.

   This template loads templates/twenty-one/css/store.css
   (a third stylesheet, distinct from both the core theme
   CSS and the classic order-form CSS covered in Addendum
   3). On THIS page custom.css is loaded only once and
   BEFORE store.css, unlike the classic order-flow pages
   which reload a cache-busted copy of custom.css AFTER
   the page stylesheet — so here the normal "loads last,
   wins on equal specificity" approach does not work.
   Every rule below needs !important (store.css itself
   does not use !important for these declarations, so this
   is enough to win regardless of load order).
***************************************************** */

/* Bootstrap's .bg-light utility (also carries its own
   !important) — the SSL page's sub-nav bar uses it. */
.bg-light {
  background-color: var(--c26-surface) !important;
}

/* validation-level pricing cards — store.css hardcodes a
   dark-purple text color on these specifically, which is
   the one that gets buried when the white card background
   goes dark. */
.landing-page.ssl .validation-levels .item {
  background-color: var(--c26-surface) !important;
  color: var(--c26-text) !important;
}

/* sub-nav tabs (SSL / Wildcard / stb.) under the hero —
   store.css hardcodes near-black text and a white active
   pill. */
.landing-page .navbar .navbar-nav > li > a {
  color: var(--c26-muted) !important;
}
.landing-page .navbar .navbar-nav > li.active > a {
  background: var(--c26-accent-tint) !important;
  color: var(--c26-text) !important;
}

/* "your browser doesn't show the padlock" notice card. */
.landing-page.ssl .browser-notice .wrapper {
  background-color: var(--c26-surface) !important;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, .35);
}

/* comparison / "help me choose" accordion section (card
   headers are re-themed further down, in Addendum 5). */
.landing-page.ssl .detailed-info {
  background-color: var(--c26-surface) !important;
}
.landing-page.ssl .detailed-info .card-body {
  background-color: var(--c26-surface-2) !important;
  border-color: var(--c26-border) !important;
}

/* *****************************************************
   Addendum 5 — SSL landing page: replace WHMCS's own
   built-in blue/orange/green branding (hardcoded all
   over templates/twenty-one/css/store.css for this
   template) with the 4host.hu palette. Addendum 4 only
   fixed the plain-WHITE patches an automated scan could
   find; this pass is a manual read of store.css's full
   color declarations for .landing-page.ssl, which turned
   up a whole second category of bugs: sections that were
   never white, just rendered in WHMCS's own stock blue/
   orange/green instead of the site's violet/navy/black —
   which is what still reads as "not our website" even
   after Addendum 4. Same !important requirement as
   Addendum 4 (custom.css loads before store.css here,
   and none of these store.css declarations are
   !important themselves, so plain !important is enough).
***************************************************** */

/* Hero heading, right under the header: store.css sets
   color:#333 (dark gray) on the wrapping .hero with
   nothing behind it — on this page's dark background
   that's a heading that's essentially unreadable. This
   was probably the single biggest "doesn't look like our
   website" cue, since it's the very first thing on the
   page. */
.landing-page .hero {
  color: var(--c26-text) !important;
}

/* pricing-tier strip behind the four validation cards,
   and each card's "Válasszon" button (both hardcoded to
   WHMCS blue). */
.landing-page.ssl .validation-levels {
  background-color: var(--c26-bg-deep) !important;
}
.landing-page.ssl .validation-levels h3 {
  color: var(--c26-text) !important;
}
.landing-page.ssl .validation-levels .item .btn {
  background-color: var(--c26-cta-bg) !important;
  color: var(--c26-cta-text) !important;
}

/* mid-page promo banner ("standout-1"), stock WHMCS
   orange — restyled as a violet gradient to match the
   site's own hero/accent gradient treatment. */
.landing-page.ssl .standout-1 {
  background: linear-gradient(135deg, var(--c26-accent), var(--c26-accent-2)) !important;
}

/* "certificate options" comparison panel (the big DV/OV/EV
   tier block) and its card-style column headers. */
.landing-page.ssl .detailed-info .card-header {
  background-color: var(--c26-surface-2) !important;
  border: 1px solid var(--c26-border-strong) !important;
}
.landing-page.ssl .certificate-options,
.landing-page.ssl .certificate-options.ov,
.landing-page.ssl .certificate-options.ev {
  background-color: var(--c26-surface-2) !important;
  color: var(--c26-text) !important;
}
.landing-page.ssl .certificate-options .col-md-3.sidebar ul li,
.landing-page.ssl .certificate-options.ov .col-md-3.sidebar ul li,
.landing-page.ssl .certificate-options.ev .col-md-3.sidebar ul li {
  border-color: var(--c26-border-strong) !important;
}
.landing-page.ssl .certificate-options .btn {
  background-color: var(--c26-cta-bg) !important;
  color: var(--c26-cta-text) !important;
}

/* "most popular" ribbon badge on a pricing card — was a
   stock orange gradient. */
.landing-page.ssl .popular-plan .plan-container .txt-container {
  background: linear-gradient(180deg, var(--c26-accent), var(--c26-accent-2)) !important;
  color: #ffffff !important;
}
.landing-page.ssl .popular-plan .plan-container:before,
.landing-page.ssl .popular-plan .plan-container:after {
  border-color: var(--c26-bg-deep) transparent transparent transparent !important;
}

/* cross-sell "upgrade to a better cert" promo strip/banner. */
.landing-page.ssl .competitive-upgrade-promo {
  background-color: var(--c26-surface-2) !important;
  color: var(--c26-text) !important;
}
.landing-page.ssl .competitive-upgrade-promo a {
  color: var(--c26-accent-2) !important;
}
.landing-page.ssl .competitive-upgrade-banner {
  background: var(--c26-bg-deep) !important;
  color: var(--c26-muted) !important;
}

/* "why get an SSL cert" feature tiles. */
.landing-page.ssl .features {
  background-color: var(--c26-bg-deep) !important;
}
.landing-page.ssl .features h3 {
  color: var(--c26-text) !important;
}
.landing-page.ssl .features .feature {
  background-color: var(--c26-surface-2) !important;
  color: var(--c26-muted) !important;
}
.landing-page.ssl .features .feature:hover {
  background-color: var(--c26-surface) !important;
  color: var(--c26-text) !important;
}

/* plain list-style pricing table, and the full certificate
   list further down the page. */
.landing-page.ssl .row-pricing-table ul li {
  background-color: var(--c26-surface) !important;
  color: var(--c26-muted) !important;
  border-bottom-color: var(--c26-border) !important;
}
.landing-page.ssl ul.ssl-certs-all li {
  border-bottom-color: var(--c26-border) !important;
}
.landing-page.ssl ul.ssl-certs-all li.featured {
  background: var(--c26-accent-tint) !important;
}
.landing-page.ssl ul.ssl-certs-all .price span {
  color: var(--c26-muted) !important;
}

/* validation-type icon accents (DV/OV/EV legend + benefits
   list) — reuse the site's own accent/warning/success tones
   instead of WHMCS's stock blue/orange/green, and fix the
   benefits icon color, which was a dark slate too close to
   the new dark background to read. */
.landing-page.ssl .ideal-for i {
  color: var(--c26-muted) !important;
}
.landing-page.ssl .ideal-for.dv i {
  color: var(--c26-accent-2) !important;
}
.landing-page.ssl .ideal-for.ov i {
  color: var(--c26-warning) !important;
}
.landing-page.ssl .ideal-for.ev i {
  color: var(--c26-success) !important;
}
.landing-page.ssl .ssl-benefits i {
  color: var(--c26-muted) !important;
}

/* *****************************************************
   Addendum 6 — portal-wide audit ("verify every part of
   the customer portal has the same design"). Walked the
   store category pages (VPS/domain/SSL/etc.), the classic
   product-configuration and cart flow, login, and the
   knowledgebase; scanned computed styles for any color
   outside the brand's navy/violet range. Aside from the
   .btn-success rewrite above, only two more real misses
   turned up — both small badges still on Bootstrap's
   default blue.
***************************************************** */

/* Bootstrap's .badge-info is used all over as a plain
   neutral counter (header cart-item count, knowledgebase
   "N Cikk" article counts) rather than for anything truly
   "informational" — its own blue read as another stray
   off-brand accent next to the black CTAs, so it gets the
   site's own violet instead of the semantic info-blue used
   for actual info alerts. */
.badge-info {
  background-color: var(--c26-accent) !important;
  color: #ffffff !important;
}

/* mobile/sidebar menu item counters (e.g. the knowledgebase
   category list in the hamburger menu) are pure white,
   more specific than the plain .badge rule above it. */
.sidebar-menu-item-badge .badge {
  background-color: var(--c26-surface-2) !important;
  color: var(--c26-text) !important;
}

/* *****************************************************
   Addendum 7 — domain registration page
   (cart.php?a=add&domain=register / the "Domain
   regisztráció" flow reached from the header search and
   from the homepage domain search). Same
   templates/orderforms/custom/css/all.min.css stylesheet
   as Addendum 2/3 (custom.css reloads cache-busted AFTER
   it here, so plain #order-standard_cart-scoped rules win
   without needing !important — kept !important anyway
   for consistency/robustness with the rest of this file).
***************************************************** */

/* the big domain-search banner: a stock yellow/orange
   gradient box, restyled as the site's own violet
   gradient (same treatment as the SSL page's "standout-1"
   promo banner in Addendum 5). */
#order-standard_cart .domain-checker-container {
  background: linear-gradient(135deg, var(--c26-accent), var(--c26-accent-2)) !important;
}
/* the white rounded pill wrapping the search input + button
   inside that banner. */
#order-standard_cart .input-group-box {
  background-color: var(--c26-surface) !important;
}

/* TLD availability/pricing table: the "featured" row
   highlight was a pale off-white, and every row had a
   near-white 1px divider line. */
#order-standard_cart .domain-pricing .tld-row.highlighted {
  background: var(--c26-accent-tint) !important;
}
#order-standard_cart .domain-pricing .tld-row {
  border-bottom-color: var(--c26-border) !important;
}
/* the table's own header row (Domain/Regisztráció/
   Átregisztráció/Megújítás) — all.min.css gives every
   header cell its own light-gray background PLUS an extra
   nth-child(odd) rule stacking a second light gray/blue
   variant on top; both needed overriding together. */
#order-standard_cart .domain-pricing .tld-pricing-header .col-sm-2,
#order-standard_cart .domain-pricing .tld-pricing-header .col-sm-4,
#order-standard_cart .domain-pricing .tld-pricing-header .col-xs-2,
#order-standard_cart .domain-pricing .tld-pricing-header .col-xs-4,
#order-standard_cart .domain-pricing .tld-pricing-header .tld-column {
  background-color: var(--c26-surface-2) !important;
  border-bottom-color: var(--c26-accent-2) !important;
  color: var(--c26-text) !important;
}

/* TLD category filter pills ("Népszerű", "Technológia", …):
   the currently-selected pill carries badge-success (stock
   green) on top of badge-secondary — scoped narrowly to
   this filter bar so the real .badge-success "domain
   available" indicator elsewhere keeps its green. */
.tld-filters a.badge-success {
  background-color: var(--c26-accent) !important;
  color: #ffffff !important;
}

/* bottom-of-page cross-sell cards ("Add web hosting" /
   "Transfer your domain to us") — a near-white card
   background left the (correctly light-colored) heading
   text almost invisible on top of it. */
#order-standard_cart .domain-promo-box {
  background-color: var(--c26-surface) !important;
}
/* their CTA buttons: one was stock Bootstrap yellow
   (.btn-warning) instead of the site's black pill. */
.btn-warning {
  color: var(--c26-cta-text) !important;
  background-color: var(--c26-cta-bg) !important;
  border-color: transparent !important;
}
.btn-warning:hover,
.btn-warning:focus {
  background-color: var(--c26-cta-bg-hover) !important;
}

/* *****************************************************
   Addendum 8 — "borders and card sizes exactly equal
   everywhere" (2026-09). Root causes found by comparing
   computed styles across every card-like component:

   1) Store/category product tiles
      (#order-standard_cart .products .product) were still
      using the parent Twenty-One theme's original 3px
      radius, a stronger 0.28-opacity border, and no shadow,
      while dashboard/account .card / .panel.card panels use
      the 22px --c26-radius, the lighter 0.16-opacity
      --c26-border, and --c26-shadow. Two different "card"
      looks were sitting side by side on the same portal.
      Fixed above, in the existing Addendum 3 product-tile
      rule, by switching to the same --c26-radius /
      --c26-border / --c26-shadow trio the .card family uses
      (plus matching the tile header's top corners to the
      new radius so they don't poke out square).

   2) Bootstrap's .row-eq-height stretches the *column* div
      wrapping each product to equal height via flexbox, but
      .product itself is a plain block box sized to its own
      content — so on categories with mixed-length product
      descriptions (e.g. SSL Certificates) cards in the same
      row still rendered at very different heights even
      though their invisible column wrappers were already
      equal. height:100% + box-sizing:border-box on .product
      (added to the same rule above) makes the visible card
      fill its stretched column, so same-row cards are
      actually equal height now, not just their wrappers.

   3) .well (ticket department boxes, KB article boxes, etc.)
      had a border color set but no radius or shadow at all,
      so it fell back to the parent theme's plain square
      corners next to the rounded, shadowed cards used
      everywhere else. Given the same --c26-radius /
      --c26-shadow treatment above, in the existing .well
      rule.

   Left alone on purpose: the SSL/backup/VPN cross-sell
   upsell widgets (#order-standard_cart .mc-promo and
   .product-recommendations .product-recommendation) use a
   dashed border with a colored bottom accent strip
   (per-provider brand color) as a deliberate "promo" visual
   style, distinct from plain content cards — only their
   base colors were reworked for the dark theme (Addendum 3),
   not their shape, since unifying their radius/border would
   erase that intentional accent-strip design. Flag if these
   should be unified too.
***************************************************** */

/* *****************************************************
   Addendum 9 — homepage "browse products" tile grid
   (index.php, the VPS / SSL Certificates / register-a-
   domain / transfer-a-domain cards) — mismatched card
   sizes wrecking the layout (2026-09).

   .card-columns.home is Bootstrap's CSS multi-column
   ("masonry") layout: column-count: 2/3 depending on
   breakpoint, each .card floated into whichever column
   the browser balances total content height into. It
   makes no attempt to align cards into rows — a short
   card (no description, e.g. "VPS") and a tall one (with
   a description, e.g. "SSL Certificates") just end up
   stacked in whichever column the balancing algorithm
   picked, with mismatched bottoms and stray whitespace
   next to them. Swapped for a real grid so every tile in
   a row shares the same height and the section lines up
   into clean rows instead (2 per row on desktop/tablet,
   stacking to 1 per row on narrow/mobile widths via
   auto-fit — this also replaces the old breakpoint-
   specific column-count: 2/3 rules, which no longer apply
   once display is grid). Buttons are additionally pinned
   to the bottom of each card (independent of description
   length) so they line up within a row too.
***************************************************** */
.card-columns.home {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.card-columns.home .card {
  display: flex;
  margin-bottom: 0;
}
.card-columns.home .card-body {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.card-columns.home .card-body .btn {
  margin-top: auto;
}

/* *****************************************************
   Addendum 10 — "Hogyan segíthetünk ma" / "Az Ön fiókja"
   icon-tile rows (homepage + account dashboard) — tile
   sizes not matching between the two rows (2026-09).

   .action-icon-btns is native Bootstrap: a .row of 5
   .col-6/.col-md-4/.col-lg tiles, with hand-picked
   offset-* classes on the last two so the leftover 2-tile
   row "centers" under the 3-tile row above it. That trick
   only actually produces equal-width, fully-packed tiles
   at the "lg" breakpoint (col-lg with no number = every
   tile grows equally to fill the row); at every width
   below lg the offsets just shove the last two tiles
   sideways at their normal col-md-4/col-6 width, which
   isn't the same as making all 5 tiles line up in a clean
   grid — the leftover row visibly doesn't reach the same
   edges as the row above it. Replaced with a real grid so
   every tile — in either row, on either page — is always
   the same size; a leftover row is simply left-aligned
   under the full row above instead of half-offset. */
.action-icon-btns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.action-icon-btns > div {
  max-width: none;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
}

/* *****************************************************
   Addendum 11 — "every button has to be the same outline,
   color, hover properties on every page" (2026-09).

   1) Root cause, found by testing: Twenty-One resets
      buttons with "appearance: button" instead of "none" —
      on some browser/OS form-control themes that keeps
      native widget chrome in charge of background-color
      even once an author background-color is set, which is
      exactly why the "Átregisztráció" button (homepage
      domain-search widget) was intermittently rendering
      with the parent theme's plain Bootstrap green instead
      of our black CTA, despite a correctly-cascading
      .btn-success rule. Fixed at the root by adding
      appearance: none to the shared .btn rule, so every
      button hands full color control back to CSS. Also
      hardened every themed .btn-* rule above (primary,
      outline-primary, secondary/outline-secondary, link,
      default, success) with !important on their color /
      background / border-color as defense in depth —
      .btn-warning already had this from an earlier round
      for the same symptom — so button color never again
      depends on a fragile, unforced cascade win.

   2) The GDPR cookie-consent banner (bottom-right popup,
      "Sütik") is a third-party addon (ihavecookies) that
      ships its own dark-teal panel and a plain green
      "Elfogadom" button — the one interactive control on
      the whole portal that was never brought into the
      site's button language at all. Its stylesheet also
      loads AFTER custom.css, so a normal-specificity
      override can't win here either; matched with
      !important for the same reason as (1).
***************************************************** */
#gdpr-cookie-message {
  background-color: var(--c26-surface) !important;
  border: 1px solid var(--c26-border) !important;
  border-radius: var(--c26-radius) !important;
  box-shadow: var(--c26-shadow) !important;
}
#gdpr-cookie-message button,
button#ihavecookiesBtn {
  background: var(--c26-cta-bg) !important;
  color: var(--c26-cta-text) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}
#gdpr-cookie-message button:hover {
  background: var(--c26-cta-bg-hover) !important;
}
button#gdpr-cookie-advanced {
  background: transparent !important;
  color: var(--c26-accent-2) !important;
  border: 1px solid var(--c26-accent) !important;
}
button#gdpr-cookie-advanced:hover {
  background: var(--c26-accent) !important;
  color: #ffffff !important;
}

/* *****************************************************
   Addendum 12 — "The search box buttons, should be the
   same as the cards button below" (2026-09).

   The homepage domain-search widget's "Keresés" (.btn-
   primary) and "Átregisztráció" (.btn-success) buttons
   were still the solid black/green CTA style; the request
   was to match them to the violet-outline pill style used
   by the product-category card buttons further down the
   page (e.g. "Keresés a termékek között"). Scoped to
   .home-domain-search only, so the global .btn-primary /
   .btn-success styling (e.g. the store's solid black
   "Rendelés" buttons) is untouched. Also forces
   appearance: none on these two — same root cause as
   Addendum 11 — without it the native widget chrome can
   still paint over an outline/transparent background on
   some browsers.
***************************************************** */
.home-domain-search .btn-primary,
.home-domain-search .btn-success {
  color: var(--c26-accent-2) !important;
  background: transparent !important;
  border: 1px solid var(--c26-accent) !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}
.home-domain-search .btn-primary:hover,
.home-domain-search .btn-primary:focus,
.home-domain-search .btn-primary:not(:disabled):not(.disabled):active,
.home-domain-search .btn-success:hover,
.home-domain-search .btn-success:focus,
.home-domain-search .btn-success:not(:disabled):not(.disabled):active {
  color: #ffffff !important;
  background: var(--c26-accent) !important;
  border-color: var(--c26-accent) !important;
}

/* *****************************************************
   Addendum 13 — "implement this change to the VPS and
   SSL Certificates store order buttons" (2026-09).

   Same violet-outline pill treatment as Addendum 12,
   applied to the "Rendelés" (order-now) buttons on the
   product store pages. Scoped to #order-standard_cart
   .btn-order-now — the standard-cart product listing
   wrapper only renders for the VPS and SSL Certificates
   categories on this site (confirmed via the store
   sidebar), so this naturally reaches only those two
   pages' order buttons without touching .btn-success
   anywhere else (e.g. the domain-search widget already
   has its own Addendum 12 rule, and any future non-cart
   product groups are unaffected).
***************************************************** */
#order-standard_cart .btn-order-now {
  color: var(--c26-accent-2) !important;
  background: transparent !important;
  border: 1px solid var(--c26-accent) !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}
#order-standard_cart .btn-order-now:hover,
#order-standard_cart .btn-order-now:focus,
#order-standard_cart .btn-order-now:not(:disabled):not(.disabled):active {
  color: #ffffff !important;
  background: var(--c26-accent) !important;
  border-color: var(--c26-accent) !important;
}

/* *****************************************************
   Addendum 14 — "on this page, the domain search box
   button should be the same" (2026-09), for
   cart.php?a=add&domain=register.

   Same violet-outline pill treatment as Addendum 12/13,
   applied to the standalone domain-registration page's
   search button (#btnCheckAvailability, inside
   .domain-checker-container — a different widget from
   the homepage .home-domain-search one, despite similar
   markup). Scoped by ID so it doesn't affect the nearby
   "Domain átregisztráció" promo-box link or the hidden
   "Lépjen kapcsolatba velünk" result-state button, which
   are separate .btn-primary elements on the same page.
***************************************************** */
#btnCheckAvailability {
  color: var(--c26-accent-2) !important;
  background: transparent !important;
  border: 1px solid var(--c26-accent) !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  /* The orderforms stylesheet locks this button to a fixed
     100px width (sized for the old short "Keresés" label
     at its original weight/size); combined with our 700
     font-weight and this widget's larger 20px font, the
     text no longer fits and overflowed off-center instead
     of staying centered. Let it size to its content instead. */
  width: auto !important;
  min-width: 100px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
#btnCheckAvailability:hover,
#btnCheckAvailability:focus,
#btnCheckAvailability:not(:disabled):not(.disabled):active {
  color: #ffffff !important;
  background: var(--c26-accent) !important;
  border-color: var(--c26-accent) !important;
}

/* *****************************************************
   Addendum 15 — "on the left side the category tab has
   to be unified colors, when active, the purple one
   would be preferred one" (2026-09), for the store
   sidebar (VPS / SSL Certificates, and the Actions list
   below it) on /store/vps and /store/ssl-certificates.

   Twenty-One never themed .sidebar .list-group-item.active
   at all — it was still Bootstrap's plain flat gray
   (#666), completely disconnected from the site's violet
   accent everywhere else. Switched the active category to
   solid violet with white text. Also gave the non-active
   items a subtle violet-tint hover instead of Bootstrap's
   near-white default hover background (#f8f9fa), which
   would otherwise flash bright white against this dark
   sidebar on mouseover.
***************************************************** */
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus {
  background-color: var(--c26-accent) !important;
  border-color: var(--c26-accent) !important;
  color: #ffffff !important;
}
.sidebar .list-group-item:not(.active):hover,
.sidebar .list-group-item:not(.active):focus {
  background-color: var(--c26-accent-tint) !important;
  color: var(--c26-text) !important;
}
/* When the last item in a list-group is the active one,
   Twenty-One's ":last-child { border-*-radius: inherit }"
   trick stopped taking effect once a background-color
   !important was in the mix, squaring off its bottom
   corners against the panel's rounded frame. Re-assert
   them explicitly instead of relying on inherit winning
   on its own. NOT scoped to .sidebar: the sidebar/actions
   panel on the store pages (/store/vps, /store/ssl-
   certificates) renders its wrapper as "cart-sidebar
   sidebar", but the same widget on the cart/domain-action
   pages (cart.php?a=view, cart.php?a=add&domain=transfer)
   renders it as "cart-sidebar" only — no "sidebar" token —
   so a .sidebar-scoped rule silently misses those pages.
   This also covers .list-group-item.active's own
   unscoped base rule (defined earlier in this file), which
   is what actually colors the active item on those pages. */
.list-group-item.active:last-child {
  border-bottom-left-radius: inherit !important;
  border-bottom-right-radius: inherit !important;
  overflow: hidden !important;
}

/* ---------- Cart item rows (order review / "Rendelés
   áttekintése", e.g. after adding an SSL cert or VPS to
   the cart) ----------
   #order-standard_cart .view-cart-items .item ships with a
   plain white background in the parent theme's own CSS
   (also ID-scoped, per the note above on view-cart-items-
   header), while the row's text and links already run
   through --c26-text / --c26-accent-2 via the site-wide
   color rules — so it was rendering near-white text on a
   plain white card, unreadable. Needs !important: without
   it this loses to the parent theme's rule despite matching
   its #order-standard_cart specificity (unlike view-cart-
   items-header above, which didn't need it — the parent
   rule for .item apparently carries its own !important). */
#order-standard_cart .view-cart-items {
  border-bottom-color: var(--c26-border-strong) !important;
}
#order-standard_cart .view-cart-items .item {
  background-color: var(--c26-surface) !important;
  border-bottom: 1px solid var(--c26-border) !important;
}
#order-standard_cart .view-cart-items .item:last-child {
  border-bottom: none !important;
}

/* ---------- DataTables list search box (authenticated
   area: invoices, tickets, and any other list page built
   on the same WHMCS DataTables widget) ----------
   The widget renders its own search input as a plain
   input[type="search"], separate from the .form-control
   text inputs already themed elsewhere in this file — it
   ships with a white background while the page-wide text
   color rule already makes its text near-white, so it was
   rendering unreadable near-white-on-white. Found on the
   invoices ("Díjbekérőim és számláim") and tickets
   ("Támogatás jegyek") list pages; not scoped further
   since every WHMCS list view uses the same widget. */
.dataTables_filter input[type="search"] {
  background-color: var(--c26-surface) !important;
}

/* ---------------------------------------------------------------
   Addendum: ticket-reply markdown editor (bootstrap-markdown)
   was rendering white-on-near-white while composing a reply,
   making typed text effectively invisible to the customer.

   A prior, non-!important attempt at this same fix already
   existed above and silently never worked: the parent Twenty-One
   theme's theme.min.css ships
     .md-editor > .md-preview, .md-editor > textarea.markdown-editor
   with background-color: #fff !important at specificity (0,2,1).
   A broader rule like `textarea.markdown-editor, .md-input` is
   only (0,1,1), so even with !important on both sides the theme
   still won on specificity. Fix: match the theme's exact
   `.md-editor > textarea.markdown-editor` selector so specificity
   ties and !important then does its job.
--------------------------------------------------------------- */
.md-editor > textarea.markdown-editor {
  background-color: var(--c26-surface) !important;
  color: var(--c26-text) !important;
}
.md-header.btn-toolbar {
  background-color: var(--c26-surface-2) !important;
  border-color: var(--c26-border) !important;
}
.md-footer {
  background-color: var(--c26-surface-2) !important;
  color: var(--c26-muted) !important;
  border-color: var(--c26-border) !important;
}
.posted-by {
  background-color: var(--c26-surface-2) !important;
  color: var(--c26-muted) !important;
}

/* ---------------------------------------------------------------
   Addendum: DataTables sortable column headers (tickets,
   domains, services — and any other list page on the same
   widget) render the currently-sorted column's <th> with
   DataTables' own default background-color: #f6f6f6, which
   beats the .table-list thead th rule above (that rule has no
   !important and DataTables' .sorting_asc/.sorting_desc class
   selector wins). Result: whichever column the table is sorted
   by shows a near-white header cell with the same light muted
   text color as the others, unreadable.

   Fix does double duty: forces the non-sorted headers back to
   the normal header background, AND gives the sorted column a
   deliberate brand-purple tint + brighter text so sort state is
   still visually obvious (just no longer white-on-white) —
   per feedback: "use the brighter purple on it". */
thead th.sorting {
  background-color: rgba(255, 255, 255, .03) !important;
}
thead th.sorting_asc,
thead th.sorting_desc {
  background-color: var(--c26-accent-tint) !important;
  color: var(--c26-accent-2) !important;
}

/* ---------------------------------------------------------------
   Addendum: replaces the rounded-purple-box treatment above
   (reverted per feedback: "just need the color no rounded
   edges") — the .table-list row/header separator lines now use
   the same purple accent as the outline CTA buttons instead of
   the default subtle --c26-border-strong / --c26-border, with
   no border-radius or outer wrapper border. */
.table-list thead th {
  border-bottom-color: var(--c26-accent) !important;
}
.table-list > tbody > tr > td,
table.table-list tbody td {
  border-top-color: var(--c26-accent) !important;
}

/* ---------------------------------------------------------------
   Addendum: the .table-list thead th cells also carry a 1px
   top border (from the generic .table td, .table th rule
   above), which was still the old muted --c26-border color —
   visible as a thin gray line above the header row while its
   bottom border was already purple. Match it. */
.table-list thead th {
  border-top-color: var(--c26-accent) !important;
}

/* ---------------------------------------------------------------
   Addendum: reverts the previous addendum above (matched the
   table's own outer border to purple) — per feedback, nicer
   without that outer border at all. Zeroes its width instead of
   just recoloring it; row/header separator lines above are
   untouched. */
table.table-list {
  border-width: 0 !important;
}

/* ---------------------------------------------------------------
   Addendum: the filter accordion in the sidebar (e.g. "Állapot"
   status filter on the invoices/tickets/domains list pages) uses
   Bootstrap's .list-group-item-action, which carries its own
   near-white border-bottom (rgb(245,245,245)) that beats the
   plain .list-group-item border-color rule already in this file.
   Per feedback, match it to the same purple used elsewhere. */
.card-sidebar .list-group-item {
  border-color: var(--c26-accent) !important;
}

/* ---------------------------------------------------------------
   Addendum: the empty-circle icons in front of each filter
   option (sidebar "Állapot" etc. list — .sidebar-menu-item-icon,
   a FontAwesome far fa-circle) inherited the plain text color.
   Per feedback, color them to match the purple separator lines
   added above. */
.sidebar-menu-item-icon {
  color: var(--c26-accent-2) !important;
}

/* ---------------------------------------------------------------
   Addendum: the dashboard stat-tile grid on clientarea.php
   (SZOLGÁLTATÁS / DOMAIN / HIBAJEGYEK / NYITOTT DÍJBEKÉRŐ counts,
   .tile inside .tiles) was never touched by this file — plain
   theme default: light-gray card background, gray grid-divider
   borders, gray icon and label text, all sitting flat against
   the dark page. The big number was already themed correctly
   (inherits the accent-2 purple from .tile's own color), so only
   background/border/icon/label needed fixing. The colored
   underline bar per stat (bg-color-blue/green/red/orange) is
   left as-is — distinct category colors, not part of the bug. */
.tile {
  background-color: var(--c26-surface) !important;
  border-color: var(--c26-border) !important;
}
.tile i[class*="fa-"] {
  color: var(--c26-muted) !important;
}
.tile .title {
  color: var(--c26-muted) !important;
}

/* ---------------------------------------------------------------
   Addendum: previous fix (flat --c26-surface, no elevation) read
   as too flat/blended into the page per feedback ("not
   highlighted enough"). Bring it in line with how every other
   dashboard card is treated: --c26-surface-2 (one step lighter)
   with the same subtle top-light gradient, rounded as one unit
   with --c26-radius + overflow: hidden (so the 2x2 grid's own
   square divider borders stay put inside a rounded outer edge),
   and the same drop shadow used elsewhere for elevation. */
.tiles {
  border-radius: var(--c26-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--c26-shadow) !important;
}
.tile {
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01)), var(--c26-surface-2) !important;
  border-color: var(--c26-border-strong) !important;
}

/* ---------------------------------------------------------------
   Addendum: same Bootstrap .list-group-item-action near-white
   border bug as the sidebar filter panel above, but showing up
   in a different widget this time — "Legutóbbi támogatási
   jegyek" (recent tickets) on the client-area dashboard,
   #ticketsPanel .list-group. Rather than scope another fix per
   widget, target .list-group-item-action directly so this covers
   every current and future list-group using that Bootstrap
   class, not just .card-sidebar. Supersedes (but doesn't need to
   replace) the .card-sidebar-scoped rule added earlier. */
.list-group-item-action {
  border-color: var(--c26-accent) !important;
}

/* ---------------------------------------------------------------
   Addendum: "Domain regisztráció" dashboard widget
   (#registerDomainPanel) on clientarea.php — the domain text
   field was a plain 38px Bootstrap input with only a faint
   border, easy to miss/read as "too small" next to the buttons.
   The Regisztráció/Átregisztráció buttons are .btn-success /
   .btn-default joined into the input-group, which Bootstrap
   forces to square corners and this file's own black/dark
   default button colors — nothing like the purple-outline pill
   buttons on the public domain-search hero (index.php). Per
   feedback, bring both in line with that page: bigger input
   with a clearer border, and matching purple-outline pill
   buttons (transparent bg, purple border/text, solid purple
   fill on hover), rounded only on the outer corners of the
   joined group since the middle edge stays square by design. */
#registerDomainPanel input[name="domain"] {
  height: 46px !important;
  padding: 10px 16px !important;
  font-size: 16px !important;
  border-color: var(--c26-border-strong) !important;
  border-top-left-radius: 999px !important;
  border-bottom-left-radius: 999px !important;
}
#registerDomainPanel .btn {
  background-color: transparent !important;
  color: var(--c26-accent-2) !important;
  border: 1px solid var(--c26-accent) !important;
  height: 46px !important;
}
#registerDomainPanel .btn:hover {
  background-color: var(--c26-accent) !important;
  color: #ffffff !important;
}
#registerDomainPanel .input-group-append .btn:last-child {
  border-top-right-radius: 999px !important;
  border-bottom-right-radius: 999px !important;
}

/* ---------------------------------------------------------------
   Addendum: previous fix (bigger input, pill buttons) still read
   as "too small" per feedback because the input, Regisztráció,
   and Átregisztráció were all crammed onto one row inside
   Bootstrap's .input-group (flex, no wrapping) — three elements
   splitting a narrow sidebar-card's width. Stack it instead: the
   domain field gets its own full-width line (now a complete
   pill, no longer joined to the buttons), and the two buttons
   share a second row below, matching how the public domain-
   search hero on index.php lays out on narrow viewports. */
#registerDomainPanel .input-group {
  display: flex !important;
  flex-wrap: wrap !important;
}
#registerDomainPanel input[name="domain"] {
  flex: 0 0 100% !important;
  width: 100% !important;
  margin-bottom: 10px !important;
  border-radius: 999px !important;
}
#registerDomainPanel .input-group-btn.input-group-append {
  flex: 0 0 100% !important;
  display: flex !important;
  gap: 10px !important;
  width: 100% !important;
}
#registerDomainPanel .input-group-btn.input-group-append .btn {
  flex: 1 1 0 !important;
  border-radius: 999px !important;
}

/* ---------------------------------------------------------------
   Addendum: the full-width column change tried here was reverted
   per feedback (kept the widget at its normal half-width). While
   checking it, the domain input sat flush against the card
   header's divider line (0px gap — the widget's own .input-group
   classes give it no top padding), which read as visually tight/
   odd. A small top padding gives it the same kind of breathing
   room the header text has below the icon. */
#registerDomainPanel .input-group {
  padding-top: 16px !important;
}

/* ---------------------------------------------------------------
   Addendum: the bulk-action toolbar above the domains list
   (Névszerverek kezelése / Kapcsolattartási adatok / Megújítás
   Domainok / Több... — .btn-group.btn-group-sm.mb-3 .btn-default,
   clientarea.php?action=domains) was already dark-themed by the
   generic .btn-default rule but never got the purple-accent
   treatment used everywhere else (table borders, outline pill
   buttons, etc.) — per feedback, align it with that. Same
   outer-corners-only rounding pattern used for the domain-search
   input-group: the buttons stay joined (square) where they
   touch, pill-rounded only at the two ends of the whole group. */
.btn-group.btn-group-sm.mb-3 .btn {
  background-color: transparent !important;
  color: var(--c26-accent-2) !important;
  border-color: var(--c26-accent) !important;
}
.btn-group.btn-group-sm.mb-3 .btn:hover {
  background-color: var(--c26-accent) !important;
  color: #ffffff !important;
}
.btn-group.btn-group-sm.mb-3 > .btn:first-child {
  border-top-left-radius: 999px !important;
  border-bottom-left-radius: 999px !important;
}
.btn-group.btn-group-sm.mb-3 > .btn-group:last-child > .btn {
  border-top-right-radius: 999px !important;
  border-bottom-right-radius: 999px !important;
}

/* ---------------------------------------------------------------
   Addendum: per feedback, the domains-list bulk-action toolbar
   fixed above should span the full content width rather than
   sizing to its own content — flex it and let each direct button
   share the space evenly (the nested "Több..." dropdown button-
   group keeps its own natural width rather than stretching, so
   its menu doesn't end up oddly wide). */
.btn-group.btn-group-sm.mb-3 {
  display: flex !important;
  width: 100% !important;
}
.btn-group.btn-group-sm.mb-3 > .btn {
  flex: 1 1 0 !important;
}
.btn-group.btn-group-sm.mb-3 > .btn-group {
  flex: 0 0 auto !important;
}

/* ---------------------------------------------------------------
   Addendum: per feedback the domains-list bulk-action toolbar
   still didn't match index.php's buttons — color/border/radius
   already matched (both use --c26-accent outline pill), but this
   toolbar carries Bootstrap's .btn-group-sm modifier (14px font,
   4px 8px padding) while the index.php buttons are regular size
   (16px font, 6px 12px padding). Match the size too. */
.btn-group.btn-group-sm.mb-3 .btn {
  font-size: 16px !important;
  padding: 6px 12px !important;
}

/* invoices/díjbekérők table (#tableInvoicesList) action buttons: match the
   purple-outline pill style used on index.php (superseding .btn-success
   solid-black for this table only — other CTAs like store/checkout stay
   solid black per earlier deliberate decision) */
#tableInvoicesList .btn {
  background-color: transparent !important;
  color: var(--c26-accent-2) !important;
  border: 1px solid var(--c26-accent) !important;
}
#tableInvoicesList .btn:hover,
#tableInvoicesList .btn:focus {
  background-color: var(--c26-accent) !important;
  color: #ffffff !important;
}

/* "A legutóbbi támogatási jegyei" (recent tickets) sidebar widget:
   ticket title text was overflowing past the card's right edge on
   longer subjects instead of being ellipsis-truncated. The .truncate
   div already had the correct overflow/white-space/text-overflow
   rules, but its flex-item ancestors (.sidebar-menu-item-wrapper /
   .sidebar-menu-item-label) had no min-width:0, so the classic
   flexbox bug let them grow past the container instead of shrinking
   to it. Constraining the chain lets the existing ellipsis rule work. */
.card-sidebar .list-group-item-action { min-width: 0; }
.card-sidebar .sidebar-menu-item-wrapper { min-width: 0; }
.card-sidebar .sidebar-menu-item-label { min-width: 0; width: 100%; }
.card-sidebar .recent-ticket { min-width: 0; }
.card-sidebar .recent-ticket .truncate { width: 100%; min-width: 0; box-sizing: border-box; }

/* ticket view: reply block separators (.card-body border-bottom between
   each reply's card.view-ticket) recolored to the brand purple, matching
   the separator treatment used elsewhere (sidebar filters, tables) */
.card.view-ticket .card-body { border-bottom-color: var(--c26-accent) !important; }

/* DataTables list tables (invoices, domains, services, etc.) were
   overflowing horizontally on mobile: no ancestor of the table had
   overflow-x set, so the table's natural width blew out the whole
   page (body scrolled sideways instead of just the table). Scoping
   the scroll to the table's own wrapper fixes it everywhere at once. */
.listtable { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

/* invoices table (#tableInvoicesList): the MŰVELETEK (actions) column
   holds the important "Díjbekérő/Számla megtekintése" buttons, so on
   mobile it should stay visible instead of requiring a full scroll
   through the table (per round49's overflow-x fix on .listtable).
   Pin the last column to the right edge while the rest scrolls under it. */
#tableInvoicesList th:last-child,
#tableInvoicesList td:last-child {
  position: sticky !important;
  right: 0 !important;
  background-color: var(--c26-surface) !important;
  box-shadow: -6px 0 8px -6px rgba(3, 8, 20, .6);
  z-index: 2;
}
#tableInvoicesList thead th:last-child { z-index: 3; }

/* domain pricing table header (cart.php domain search results): the
   purple bottom-border rule already applied to the price column
   headers (.col-sm-4/.col-xs-4/etc via the tld-pricing-header rule
   above) but the Domain column header only inherited the *color*
   through .tld-column, not the 6px width the price headers actually
   use — so the purple bar stopped short of the Domain column. */
#order-standard_cart .domain-pricing .tld-pricing-header .tld-column {
  border-bottom: 6px solid var(--c26-accent-2) !important;
}

/* domain pricing table: the vertical divider between the Domain
   column and the price columns (border-right on .two-row-center)
   was a light gray-blue; recolored to the same brand purple as the
   header underline above it. */
#order-standard_cart .domain-pricing .tld-row .two-row-center {
  border-right-color: var(--c26-accent) !important;
}

/* domain pricing table header: the wrapping ".row.no-gutters" behind
   the 3 price column header cells had the site's un-restyled
   near-white default background (#f5f5f5), which peeked through as
   little white dots at the column seams (sub-pixel gaps between the
   6px purple per-cell borders). Recoloring the wrapper to the dark
   surface tone removes the gap artifact entirely. */
#order-standard_cart .domain-pricing .tld-pricing-header .row.no-gutters {
  background-color: var(--c26-surface-2) !important;
}

/* domain search box (inside the purple gradient banner): on focus the
   input's border went to the site's plain default #dddddd, which read
   as a stark bright-white outline against the purple gradient. Use the
   brand purple with a matching soft glow instead. */
#order-standard_cart .input-group-box .form-control:focus {
  border-color: var(--c26-accent) !important;
  box-shadow: 0 0 0 2px var(--c26-accent-tint) !important;
}

/* bottom-of-page cross-sell cards ("Add web hosting" / "Transfer your
   domain to us"): mismatched heights (their flex column stretched
   equally, but the box itself didn't fill it, leaving one shorter)
   and the default Bootstrap 4px radius / plain #ddd border didn't
   match the site's rounded card language used elsewhere. */
#order-standard_cart .domain-promo-box {
  height: 100% !important;
  box-sizing: border-box !important;
  border-radius: var(--c26-radius) !important;
  border-color: var(--c26-border-strong) !important;
  box-shadow: var(--c26-shadow) !important;
}

/* cross-sell cards: the two buttons ("Fedezd fel csomagjainkat" /
   "Domain átregisztráció") landed at different heights because the
   two cards have different markup order (one has its descriptive
   paragraph before the button, the other has its fine-print paragraph
   after). Flexbox + explicit order forces both cards into the same
   visual structure (heading, paragraph, button) and pins the button
   to the bottom with margin-top:auto, so both buttons line up. */
#order-standard_cart .domain-promo-box {
  display: flex !important;
  flex-direction: column !important;
}
#order-standard_cart .domain-promo-box > p {
  order: 1 !important;
}
#order-standard_cart .domain-promo-box .btn {
  order: 2 !important;
  margin-top: auto !important;
}

/* cross-sell cards: the "Webtárhely hozzáadása" card's highlighted
   line used Bootstrap's default text-warning (orange), while the
   "Hozd át domained hozzánk" card next to it used text-primary
   (already purple) — recolored to match so both cards share the same
   accent color instead of one standing out orange. */
#order-standard_cart .domain-promo-box .text-warning {
  color: var(--c26-accent-2) !important;
}

/* cross-sell cards buttons ("Fedezd fel csomagjainkat" / "Domain
   átregisztráció"): switched from the solid-black CTA style to the
   purple-outline pill style (matching the invoices table actions,
   per the same explicit request to use that style here too). */
#order-standard_cart .domain-promo-box .btn {
  background-color: transparent !important;
  color: var(--c26-accent-2) !important;
  border: 1px solid var(--c26-accent) !important;
  border-radius: 999px !important;
}
#order-standard_cart .domain-promo-box .btn:hover,
#order-standard_cart .domain-promo-box .btn:focus {
  background-color: var(--c26-accent) !important;
  color: #ffffff !important;
}

/* checkout page (cart.php?a=confirm / order-standard_cart): two
   sections still had the site's default light Bootstrap styling,
   unthemed since they weren't touched by any earlier round —
   the "Fiók kiválasztása" account-select cards (plain white/light
   gray boxes with dark text) and the Stripe "Írja be az új kártyáról"
   card-details container (light gray box around otherwise
   already-dark-themed input fields). */
#order-standard_cart .account-select-container .account {
  background-color: var(--c26-surface) !important;
  border-color: var(--c26-border) !important;
}
#order-standard_cart .account-select-container .account.active {
  background-color: var(--c26-surface-2) !important;
  border-color: var(--c26-accent) !important;
}
#order-standard_cart .account-select-container .address strong {
  color: var(--c26-text) !important;
}
#order-standard_cart .account-select-container .address .small {
  color: var(--c26-muted) !important;
}
#order-standard_cart .cc-input-container {
  background-color: var(--c26-surface) !important;
  border-color: var(--c26-border-strong) !important;
}
#order-standard_cart .cc-input-container label {
  color: var(--c26-muted) !important;
}

/* SSL certificate details module output (product details "Domain" tab
   for SSL products): the module's own section-title cells (.ssltblttl
   — "Authentication Statuses", the validation-status row, "Admin
   Details", "Technical Details") used a near-white background with
   near-white text (inherited from the page), making them almost
   invisible. */
.ssltblttl {
  background-color: var(--c26-surface-2) !important;
  color: var(--c26-text) !important;
}

/* product details page: the "Egyéb Információ" tab used the site's
   un-restyled default active-tab background (near white) instead of
   the purple-underline treatment the "Domain" tab next to it already
   has — its border-bottom-style computed to "none", so the general
   .nav-tabs .nav-link.active rule's border-width had no effect. */
.nav-tabs.responsive-tabs-sm .nav-link.active {
  background-color: transparent !important;
  color: var(--c26-text) !important;
  border-color: transparent transparent var(--c26-accent-2) !important;
  border-bottom-style: solid !important;
  border-bottom-width: 2px !important;
}

/* product details page: the placeholder product-icon box (used when a
   product has no real image — icon + name + category) still had the
   site's default light-gray background, so its white icon/heading text
   was almost unreadable on top of it. Also the parent
   .product-status-active wrapper carries its own solid green 'active'
   background, which needs a fully opaque box on top to not bleed
   through. Card and icon-circle both use the same solid purple (one
   flat color, not two different purples) so the circle blends into
   the card and only the white icon reads on top of it — a touch
   darker than the plain --c26-accent token per feedback. */
.product-icon.text-center {
  background-color: color-mix(in srgb, var(--c26-accent) 85%, black) !important;
}
.product-icon .fa-circle {
  color: color-mix(in srgb, var(--c26-accent) 85%, black) !important;
}

/* product details page: match the buttons to the purple-outline pill style
   used sitewide on index.php (transparent bg, purple border, fills solid
   purple on hover), except the red "Lemondás" (cancel subscription) button,
   which stays as-is since it's a distinct destructive action.
   .tab-content.margin-bottom is the wrapper that contains every button on
   this page (Overview tab actions, Domain tab's "Weboldal megtekintése" /
   "Change Approval Method" / "Cancel Certificate", and the "Egyéb
   Információ" tab's "Jelszó létrehozása" / "Módosítások mentése"), so this
   scopes cleanly to this page type without touching the sitewide solid-black
   CTA buttons used elsewhere (.btn-danger is untouched, so Lemondás is
   unaffected). Modal submit buttons (e.g. "Küldés") live outside this
   wrapper in the DOM, so they're unaffected too. */
.tab-content.margin-bottom .btn-default,
.tab-content.margin-bottom .btn-primary {
  background-color: transparent !important;
  color: var(--c26-accent-2) !important;
  border: 1px solid var(--c26-accent) !important;
  border-radius: 999px !important;
}
.tab-content.margin-bottom .btn-default:hover,
.tab-content.margin-bottom .btn-default:focus,
.tab-content.margin-bottom .btn-primary:hover,
.tab-content.margin-bottom .btn-primary:focus {
  background-color: var(--c26-accent) !important;
  color: #ffffff !important;
}

/* tab selectors (e.g. "Domain" / "Egyéb Információ" on the product details
   page) went invisible on hover: the stock theme's mobile "responsive tab"
   fallback (.responsive-tabs-sm .nav-item a:hover) sets a near-white
   background (rgb(247,247,247)), which combined with our near-white
   --c26-text color made the label unreadable on hover. Neutralize that
   background so the existing dark hover color rule (.nav-tabs .nav-link:hover
   { color: var(--c26-text) }) reads correctly against the page background. */
.responsive-tabs-sm .nav-item a:hover {
  background-color: transparent !important;
}

/* SSL details page "fill tables" (Order details, Authentication Statuses,
   Total SANS, Admin Details, Technical Details boxes - all share the SSL
   plugin's .ssltbldtl class) had a flat gray border on all sides and square
   corners. Per feedback: left/right/bottom border should match the light
   purple used on the buttons (var(--c26-accent)) and the bottom corners
   should be rounded (top border intentionally left as-is) - and per
   follow-up feedback, this belongs on the OUTER wrapper div (.ssltblcmn,
   which tightly wraps each .ssltbldtl table 1:1) rather than on the inner
   table itself, so the inner table's own border is stripped and the
   wrapper div carries the visible border/radius instead. A plain div
   doesn't have the table border-collapse/border-radius rendering gotcha,
   so this is simpler and more reliable than styling the table directly.
   :has() scopes this to wrappers that actually contain one of these
   tables, so it doesn't affect the unrelated .ssltblcmn that just wraps
   the Change Approval Method / Cancel Certificate buttons. */
.ssltblcmn:has(table.ssltbldtl) {
  border-left: 1px solid var(--c26-accent) !important;
  border-right: 1px solid var(--c26-accent) !important;
  border-bottom: 1px solid var(--c26-accent) !important;
  border-bottom-left-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
  overflow: hidden !important;
}
.ssltblcmn:has(table.ssltbldtl) table.ssltbldtl {
  border: none !important;
  border-radius: 0 !important;
}