/* AIHostBox — WHMCS theme skin.
 *
 * Loaded last by includes/head.tpl ({assetExists file="custom.css"}), so it can
 * override Bootstrap 4 and the Twenty-One theme without touching either. The
 * template files stay stock apart from the header and footer, which means a
 * WHMCS upgrade re-theming itself is a CSS problem, not a merge conflict.
 *
 * Tokens are copied from the marketing site's theme.css deliberately: the two
 * halves of the site have to look like one product, and the moment these drift
 * a customer notices at exactly the wrong moment — the checkout.
 */

:root {
  --bg:#11141B; --bg-2:#161A23; --panel:#1A1F2A; --panel-2:#202634;
  --line:#2C3446; --line-soft:#242B3A;
  --ink:#EAECF2; --ink-2:#A7B0C0; --ink-3:#8C97AD;
  --a1:#FF7A2F; --a2:#FFC53D; --a-ink:#190A02; --glow:255,122,47;
  --ok:#45D483;
  --radius:14px; --radius-lg:22px;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --sans:"Inter","Inter var",system-ui,-apple-system,"Segoe UI",Roboto,"Fira Sans","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ── canvas ──────────────────────────────────────────────────────────── */
body, .body-content, #main-body {
  background:var(--bg) !important;
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
body { font-size:15px; line-height:1.62; }
a { color:var(--a2); }
a:hover, a:focus { color:var(--a1); text-decoration:none; }
h1,h2,h3,h4,h5 { color:var(--ink); letter-spacing:-.02em; font-weight:600; }
hr { border-color:var(--line-soft); }
small, .small, .text-muted { color:var(--ink-3) !important; }

/* The stock theme paints a light page wrapper behind everything. */
#main-body, .main-content, section#main-body { background:transparent !important; }

/* ── header ──────────────────────────────────────────────────────────── */
#header, .navbar, #top-nav, .header-lined {
  background:rgba(17,20,27,.86) !important;
  border-bottom:1px solid var(--line-soft) !important;
  box-shadow:none !important;
}
.navbar { backdrop-filter:blur(14px); }
.navbar-brand .logo-img { max-height:34px; width:auto; }
.navbar .nav-link, #top-nav a, .navbar-nav > li > a {
  color:var(--ink-2) !important; font-size:.93rem; border-radius:9px;
}
.navbar .nav-link:hover, .navbar-nav > li > a:hover { color:var(--ink) !important; background:rgba(255,255,255,.05); }
.dropdown-menu {
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.95); padding:8px;
}
.dropdown-item { color:var(--ink-2); border-radius:9px; padding:9px 12px; }
.dropdown-item:hover, .dropdown-item:focus { background:rgba(255,255,255,.06); color:var(--ink); }
.dropdown-divider { border-color:var(--line-soft); }

/* ── panels, cards, wells ────────────────────────────────────────────── */
.card, .panel, .well, .list-group-item, .jumbotron, .modal-content, .popover {
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius) !important;
  color:var(--ink);
}
.card-header, .panel-heading, .modal-header, .card-footer, .modal-footer {
  background:rgba(255,255,255,.02) !important;
  border-color:var(--line-soft) !important;
  color:var(--ink);
}
.card-body { color:var(--ink-2); }
.list-group-item.active { background:rgba(var(--glow),.12) !important; border-color:color-mix(in oklab,var(--a1) 45%,var(--line)) !important; color:var(--ink); }

/* ── buttons ─────────────────────────────────────────────────────────── */
/* Dark ink on the ember gradient: white text on this orange is 2.6:1 and fails
   WCAG AA. The same fix the marketing site carries. */
.btn { border-radius:11px; font-weight:560; border:1px solid transparent; transition:.18s var(--ease); }
.btn-primary, .btn-success, .btn-order, .btn-checkout, .btn-info {
  background:linear-gradient(180deg,var(--a1),#E4610F) !important;
  border-color:transparent !important;
  color:var(--a-ink) !important;
  font-weight:600;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 30px -12px rgba(var(--glow),.8);
}
.btn-primary:hover, .btn-success:hover, .btn-order:hover, .btn-checkout:hover, .btn-info:hover {
  transform:translateY(-1px); color:var(--a-ink) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 16px 40px -14px rgba(var(--glow),.95);
}
.btn-default, .btn-secondary, .btn-light, .btn-outline-secondary {
  background:rgba(255,255,255,.03) !important; border-color:var(--line) !important; color:var(--ink) !important;
}
.btn-default:hover, .btn-secondary:hover, .btn-outline-secondary:hover {
  background:rgba(255,255,255,.07) !important; border-color:#2A3142 !important; color:var(--ink) !important;
}
.btn-danger { background:#C7392F !important; border-color:transparent !important; color:#fff !important; }
.btn-link { color:var(--a2) !important; }

/* ── forms ───────────────────────────────────────────────────────────── */
.form-control, .form-select, select, textarea, input[type=text], input[type=email],
input[type=password], input[type=number], input[type=tel], input[type=search] {
  background:rgba(17,20,27,.65) !important;
  border:1px solid var(--line) !important;
  color:var(--ink) !important;
  border-radius:10px;
  padding:10px 13px;
}
.form-control:focus, select:focus, textarea:focus { border-color:var(--a1) !important; box-shadow:none !important; }
.form-control::placeholder { color:var(--ink-3); }
/* Bootstrap sets a fixed height on .form-control; with our larger padding the
   text overflowed the box and a <select> showed its value clipped in half. */
.form-control, select.form-control, .custom-select {
  height:auto !important; min-height:46px; line-height:1.5;
}
select.form-control, .custom-select {
  appearance:none; -webkit-appearance:none; padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
                   linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
select.form-control option, .custom-select option { background:var(--panel); color:var(--ink); }
label, .control-label, .form-label { color:var(--ink-2); font-size:.87rem; font-weight:500; }
.input-group-text, .input-group-addon {
  background:rgba(255,255,255,.04) !important; border-color:var(--line) !important; color:var(--ink-3) !important;
}
.custom-control-label::before { background:rgba(17,20,27,.65); border-color:var(--line); }
.custom-control-input:checked ~ .custom-control-label::before { background:var(--a1); border-color:var(--a1); }

/* ── tables ──────────────────────────────────────────────────────────── */
.table { color:var(--ink-2); }
.table thead th {
  background:rgba(255,255,255,.02); color:var(--ink-3); border-bottom:1px solid var(--line) !important;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
}
.table td, .table th { border-color:var(--line-soft) !important; vertical-align:middle; }
.table-striped tbody tr:nth-of-type(odd) { background:rgba(255,255,255,.015); }
.table-hover tbody tr:hover { background:rgba(var(--glow),.06); color:var(--ink); }
.dataTables_wrapper { color:var(--ink-2); }

/* ── alerts & badges ─────────────────────────────────────────────────── */
.alert { border-radius:12px; border:1px solid var(--line); background:var(--panel-2); color:var(--ink-2); }
.alert-success { border-color:rgba(69,212,131,.4); background:rgba(69,212,131,.08); color:#9BE9BE; }
.alert-danger  { border-color:rgba(199,57,47,.45); background:rgba(199,57,47,.10); color:#F2A9A3; }
.alert-warning, .alert-info {
  border-color:color-mix(in oklab,var(--a1) 40%,var(--line));
  background:rgba(var(--glow),.09); color:var(--a2);
}
.badge, .label { border-radius:6px; font-weight:600; }
.badge-success, .label-success { background:rgba(69,212,131,.16) !important; color:#7FE3B0 !important; }
.badge-danger,  .label-danger  { background:rgba(199,57,47,.18) !important; color:#F2A9A3 !important; }
.badge-warning, .label-warning { background:rgba(var(--glow),.18) !important; color:var(--a2) !important; }
.badge-info, .label-info       { background:rgba(255,255,255,.08) !important; color:var(--ink-2) !important; }

/* ── client area layout ──────────────────────────────────────────────── */
/* The dashboard is the page a customer sees most; it should feel like the
   product, not like a billing system with a skin on top. */
.client-home-panels .panel, .home-shortcuts .btn { border-radius:var(--radius); }
#main-menu, .sidebar, .panel-sidebar {
  background:var(--panel) !important; border:1px solid var(--line) !important; border-radius:var(--radius);
}
.sidebar .list-group-item { background:transparent !important; border:none !important; border-bottom:1px solid var(--line-soft) !important; }
.sidebar .list-group-item:last-child { border-bottom:none !important; }
.sidebar .list-group-item.active { background:rgba(var(--glow),.12) !important; }
.panel-title, .card-title { color:var(--ink); font-weight:600; }
.header-lined h1, .page-header h1 { color:var(--ink); border-bottom:1px solid var(--line-soft); padding-bottom:14px; }

/* Stat tiles on the dashboard */
.client-home-panels .panel-body, .stat-block { color:var(--ink-2); }
.number-highlight, .stat-value { color:var(--a2) !important; font-variant-numeric:tabular-nums; }

/* ── breadcrumbs, pagination, tabs ───────────────────────────────────── */
.breadcrumb { background:transparent; padding-left:0; }
.breadcrumb-item, .breadcrumb a { color:var(--ink-3); font-size:.85rem; }
.breadcrumb-item.active { color:var(--ink-2); }
.nav-tabs { border-bottom:1px solid var(--line); }
.nav-tabs .nav-link { color:var(--ink-3); border:none; border-bottom:2px solid transparent; border-radius:0; }
.nav-tabs .nav-link.active, .nav-tabs .nav-link:hover {
  background:transparent; color:var(--ink); border-bottom-color:var(--a1);
}
.page-link { background:var(--panel); border-color:var(--line); color:var(--ink-2); }
.page-item.active .page-link { background:var(--a1); border-color:var(--a1); color:var(--a-ink); }

/* ── footer ──────────────────────────────────────────────────────────── */
#footer, footer.footer, .footer {
  background:var(--bg-2) !important; border-top:1px solid var(--line-soft);
  color:var(--ink-3);
}
#footer a, .footer a { color:var(--ink-2); }
#footer a:hover { color:var(--ink); }

/* ── misc WHMCS chrome ───────────────────────────────────────────────── */
.modal-backdrop { background:#0B0D12; }
.tooltip-inner { background:var(--panel-2); border:1px solid var(--line); color:var(--ink); }
.progress { background:rgba(255,255,255,.07); border-radius:3px; }
.progress-bar { background:linear-gradient(90deg,var(--a1),var(--a2)); }
code, kbd, pre { background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--ink); border-radius:6px; }
::selection { background:rgba(var(--glow),.35); color:#fff; }
:focus-visible { outline:2px solid var(--a2); outline-offset:3px; }

/* A few Twenty-One specifics that ship with hard-coded light colours. */
.bg-light, .bg-white { background:var(--panel) !important; }
.text-dark { color:var(--ink) !important; }
.border { border-color:var(--line) !important; }
.shadow, .shadow-sm { box-shadow:0 20px 50px -30px rgba(0,0,0,.9) !important; }

/* ── Bootstrap's navbar-light variants ───────────────────────────────────
 * `.navbar-light .navbar-brand` (0,2,0) beats a plain `.navbar-brand` rule,
 * so the brand and the links kept Bootstrap's near-black on our near-black
 * header. The wrapper also carries a light background that showed as a white
 * band under the nav.
 */
.navbar-light .navbar-brand,
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus { color:var(--ink) !important; font-weight:640; letter-spacing:-.03em; }
.navbar-light .navbar-nav .nav-link { color:var(--ink-2) !important; }
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link { color:var(--ink) !important; }
.navbar-light .navbar-toggler { border-color:var(--line); color:var(--ink-2); }
.navbar-light .navbar-toggler-icon { filter:invert(1) opacity(.7); }

header, #header, .header,
.main-navbar-wrapper, .navbar.navbar-light, .navbar-expand-xl {
  background:transparent !important;
  background-color:transparent !important;
  border-bottom:none !important;
  color:var(--ink-2);
}
#header.header {
  background:rgba(17,20,27,.86) !important;
  border-bottom:1px solid var(--line-soft) !important;
}

/* Search box and cart button in the top bar */
.navbar .input-group.search .form-control,
.navbar .input-group.search .input-group-text {
  background:rgba(255,255,255,.04) !important;
  border-color:var(--line) !important;
  color:var(--ink) !important;
}
.navbar .input-group.search .form-control::placeholder { color:var(--ink-3); }
.navbar .cart-btn, .navbar .btn {
  background:rgba(255,255,255,.04) !important;
  border:1px solid var(--line) !important;
  color:var(--ink-2) !important;
}
.navbar .cart-btn:hover { color:var(--ink) !important; border-color:#2A3142 !important; }

/* Logo: keep it legible on a dark bar whatever the uploaded file looks like. */
.navbar-brand .logo-img { max-height:36px; }

/* The breadcrumb bar is its own <nav class="master-breadcrumb">, not a
   .breadcrumb, so the generic rule above never reached it — it rendered as a
   full-width light grey band under the header. */
.master-breadcrumb, nav.master-breadcrumb {
  background:transparent !important;
  border-bottom:1px solid var(--line-soft) !important;
}
.master-breadcrumb .breadcrumb { background:transparent !important; margin-bottom:0; }
.master-breadcrumb a { color:var(--ink-3) !important; }
.master-breadcrumb a:hover { color:var(--a2) !important; }
.master-breadcrumb .active { color:var(--ink-2) !important; }

/* Bootstrap's tab panel keeps a near-white background inside the cart. */
.tab-content, .tab-pane { background:transparent !important; color:var(--ink-2); }
#order-standard_cart .tab-content { background:var(--panel) !important; border-color:var(--line) !important; }

/* ── client dashboard ────────────────────────────────────────────────────
 * The stock tiles carry Bootstrap accent colours (bg-color-blue and friends)
 * and the panel opens on billing. These rules put it in brand and give the
 * header block above the tiles its layout.
 */
.aih-dash {
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:18px;
  margin-bottom:22px;
}
.aih-dash-main, .aih-dash-side {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px;
}
.aih-dash-main {
  background:radial-gradient(ellipse 90% 140% at 0% 0%,rgba(var(--glow),.13),transparent 62%),var(--panel);
}
.aih-kicker {
  display:block; font-family:var(--mono); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--a1); margin-bottom:12px;
}
.aih-title { font-size:1.65rem; font-weight:620; letter-spacing:-.03em; color:var(--ink); margin:0; }
.aih-sub { margin-top:11px; color:var(--ink-2); font-size:.96rem; max-width:58ch; }
.aih-sub b { color:var(--a2); }
.aih-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.aih-dash-side { display:flex; flex-direction:column; gap:2px; }
.aih-dash-side a {
  color:var(--ink-2); font-size:.92rem; padding:9px 0;
  border-bottom:1px solid var(--line-soft);
}
.aih-dash-side a:last-child { border-bottom:none; }
.aih-dash-side a:hover { color:var(--a2); }
@media(max-width:900px){ .aih-dash{ grid-template-columns:1fr; } }

/* Stat tiles */
.tiles .tile {
  background:var(--panel) !important; border:1px solid var(--line) !important;
  border-radius:var(--radius); color:var(--ink-2) !important; padding:20px 18px;
  transition:.2s var(--ease);
}
.tiles .tile:hover {
  border-color:color-mix(in oklab,var(--a1) 45%,var(--line)) !important;
  transform:translateY(-2px); color:var(--ink) !important;
}
.tiles .tile i { color:var(--a1); }
.tiles .tile .stat { color:var(--ink); font-weight:620; font-variant-numeric:tabular-nums; }
.tiles .tile .title { color:var(--ink-3); font-size:.82rem; }
/* The stock highlight bar ships one colour per tile; make them all ember. */
.tiles .tile .highlight,
.tiles .tile .highlight[class*="bg-color-"] {
  background:linear-gradient(90deg,var(--a1),var(--a2)) !important;
}
/* We do not sell domains, so a tile that can only ever read zero is noise. */
.tiles .col:has(a.tile[href*="action=domains"]) { display:none; }

/* ══ OUR SHELL ═══════════════════════════════════════════════════════════
 * header.tpl and footer.tpl now render the marketing site's chrome instead of
 * WHMCS's. These rules are the same ones the static site uses, repeated here
 * because the two codebases cannot share a stylesheet.
 */
.aih-header {
  position:sticky; top:0; z-index:1030;
  background:rgba(17,20,27,.86) !important;
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft) !important;
}
.aih-nav {
  width:100%; max-width:1200px; margin-inline:auto; padding:0 24px;
  height:66px; display:flex; align-items:center; gap:24px;
}
.aih-brand {
  display:flex; align-items:center; gap:10px;
  font-weight:640; letter-spacing:-.03em; font-size:1.06rem; color:var(--ink) !important;
}
.aih-brand:hover { color:var(--ink) !important; }
.aih-brand img { width:30px; height:30px; }
.aih-brand .bx { color:var(--a2); }
.aih-links { display:flex; gap:2px; margin-left:6px; }
.aih-links a {
  padding:8px 12px; border-radius:9px; font-size:.93rem; color:var(--ink-2) !important;
  transition:color .15s, background .15s;
}
.aih-links a:hover { color:var(--ink) !important; background:rgba(255,255,255,.04); }
.aih-right { margin-left:auto; display:flex; align-items:center; gap:10px; }

.aih-cart {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border:1px solid var(--line); border-radius:9px;
  background:rgba(255,255,255,.03); color:var(--ink-2) !important;
}
.aih-cart:hover { color:var(--ink) !important; border-color:#2A3142; }
.aih-cart-count {
  position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px;
  border-radius:99px; background:var(--a1); color:#fff; font-size:.68rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.btn-ghost-sm {
  height:38px; padding:0 14px; display:inline-flex; align-items:center; border-radius:9px;
  background:rgba(255,255,255,.03) !important; border:1px solid var(--line) !important;
  color:var(--ink) !important; font-size:.86rem;
}
.btn-ghost-sm:hover { background:rgba(255,255,255,.07) !important; }

/* account dropdown — <details>, so it needs no WHMCS javascript */
.aih-acct { position:relative; }
.aih-acct summary {
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  height:38px; padding:0 14px; border:1px solid var(--line); border-radius:9px;
  background:rgba(255,255,255,.03); color:var(--ink); font-size:.88rem;
}
.aih-acct summary::-webkit-details-marker { display:none; }
.aih-acct[open] summary svg { transform:rotate(180deg); }
.aih-acct summary svg { opacity:.6; transition:transform .2s; }
.aih-acct-menu {
  position:absolute; right:0; top:calc(100% + 8px); min-width:220px; padding:8px; z-index:50;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.95);
}
.aih-acct-menu a {
  display:block; padding:9px 12px; border-radius:9px; font-size:.9rem; color:var(--ink-2) !important;
}
.aih-acct-menu a:hover { background:rgba(255,255,255,.06); color:var(--ink) !important; }
.aih-acct-out { border-top:1px solid var(--line-soft); margin-top:6px; padding-top:11px !important; color:var(--a2) !important; }

/* mobile drawer */
.aih-mnav { display:none; position:relative; }
.aih-mnav summary {
  list-style:none; cursor:pointer; width:40px; height:38px; border:1px solid var(--line);
  border-radius:9px; background:rgba(255,255,255,.03);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.aih-mnav summary::-webkit-details-marker { display:none; }
.aih-mnav summary span { width:16px; height:1.5px; background:var(--ink-2); border-radius:2px; transition:.2s; }
.aih-mnav[open] summary span:nth-child(1) { transform:translateY(5.5px) rotate(45deg); }
.aih-mnav[open] summary span:nth-child(2) { opacity:0; }
.aih-mnav[open] summary span:nth-child(3) { transform:translateY(-5.5px) rotate(-45deg); }
/* The header is sticky and carries a backdrop-filter, which makes it the
   containing block for fixed children — the same trap the marketing site hit. */
.aih-mnav-panel {
  position:fixed; left:0; right:0; top:100%; z-index:60;
  height:calc(100vh - 66px); height:calc(100dvh - 66px); overflow-y:auto;
  background:var(--bg); border-top:1px solid var(--line-soft); padding:18px 24px 60px;
}
.aih-mnav-panel a {
  display:block; padding:13px 2px; font-size:1rem; color:var(--ink-2) !important;
  border-bottom:1px solid var(--line-soft);
}
@media(max-width:980px){
  .aih-links { display:none; }
  .aih-mnav { display:block; }
  .aih-nav { gap:12px; }
}

/* ── footer ──────────────────────────────────────────────────────────── */
.aih-footer {
  background:var(--bg-2) !important; border-top:1px solid var(--line-soft);
  padding:52px 0 30px; margin-top:60px;
}
.aih-footer-inner { width:100%; max-width:1200px; margin-inline:auto; padding:0 24px; }
.aih-f-grid { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:32px; }
.aih-f-grid h2 {
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 14px; font-weight:500;
}
.aih-f-grid ul { list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.aih-f-grid a { font-size:.9rem; color:var(--ink-2) !important; }
.aih-f-grid a:hover { color:var(--ink) !important; }
.aih-f-co { font-size:.86rem; color:var(--ink-3); line-height:1.8; margin-top:14px; }
.aih-f-bot {
  margin-top:38px; padding-top:22px; border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.82rem; color:var(--ink-3);
}
.aih-f-mono { font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; }
@media(max-width:900px){ .aih-f-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .aih-f-grid{ grid-template-columns:1fr; } }

/* ══ CLIENT AREA — rebuilt pages ═════════════════════════════════════════
 * clientareaproducts.tpl and clientareaproductdetails.tpl are ours now, not
 * restyled stock. These are their styles.
 */
.aih-inst-head {
  display:flex; align-items:flex-end; justify-content:space-between; gap:18px;
  flex-wrap:wrap; margin-bottom:22px;
}
.aih-inst-head h1 { font-size:1.7rem; font-weight:620; letter-spacing:-.03em; color:var(--ink); margin:0; }
.aih-inst-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.aih-inst {
  display:flex; flex-direction:column; gap:16px; padding:22px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  transition:.2s var(--ease); color:var(--ink-2) !important;
}
.aih-inst:hover {
  transform:translateY(-2px); border-color:color-mix(in oklab,var(--a1) 45%,var(--line));
  color:var(--ink-2) !important;
}
.aih-inst-top { display:flex; align-items:center; gap:13px; }
.aih-inst-top img {
  width:42px; height:42px; object-fit:contain; border-radius:11px; padding:5px; flex:none;
  background:rgba(255,255,255,.05); border:1px solid var(--line);
}
.aih-inst-name { min-width:0; flex:1; }
.aih-inst-name b { display:block; color:var(--ink); font-size:1rem; font-weight:600; letter-spacing:-.015em; }
.aih-inst-name span {
  display:block; font-family:var(--mono); font-size:.72rem; color:var(--ink-3);
  margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.aih-inst-meta { display:flex; gap:20px; flex-wrap:wrap; padding-top:14px; border-top:1px solid var(--line-soft); }
.aih-inst-meta .k, .aih-svc-facts .k {
  display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:4px;
}
.aih-inst-meta b, .aih-svc-facts b { color:var(--ink); font-weight:600; font-size:.92rem; font-variant-numeric:tabular-nums; }
.aih-inst-go { font-size:.85rem; color:var(--a2); }

/* status pill — stock used a full-width green bar */
.aih-state {
  flex:none; font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 9px; border-radius:99px; border:1px solid var(--line); color:var(--ink-3);
  background:rgba(255,255,255,.04); white-space:nowrap;
}
.aih-state-active { color:#7FE3B0; border-color:rgba(69,212,131,.4); background:rgba(69,212,131,.10); }
.aih-state-suspended, .aih-state-terminated, .aih-state-cancelled {
  color:#F2A9A3; border-color:rgba(199,57,47,.4); background:rgba(199,57,47,.10);
}
.aih-state-pending { color:var(--a2); border-color:color-mix(in oklab,var(--a1) 40%,var(--line)); background:rgba(var(--glow),.10); }

/* Empty states. A centred bordered panel is still a box, and "you have nothing"
   does not deserve a frame around it — it reads as an error. Flat and
   left-aligned, in the same rhythm as the lists it replaces. */
.aih-empty { padding:28px 0 4px; text-align:left; }
.aih-empty p { color:var(--ink-2); max-width:56ch; margin:0 0 20px; }

@media(max-width:640px){
  .aih-inst-grid { grid-template-columns:1fr; }
  .aih-svc, .aih-svc-included, .aih-svc-addons { padding:20px; }
  .aih-svc-actions { flex-direction:column; align-items:stretch; }
  .aih-svc-actions .btn { width:100%; justify-content:center; }
  .aih-svc-cancel { margin:6px 0 0; text-align:center; }
  .aih-inst-head { flex-direction:column; align-items:stretch; }
  .aih-inst-head .btn { width:100%; justify-content:center; }
}

/* ── service detail: flat ────────────────────────────────────────────────
 * No panels. Sections are separated by hairlines, the facts sit in one strip,
 * and the only coloured thing on the page is the button you might press. A
 * customer opening this page is looking at one object, not a filing cabinet.
 */
.aih-flat { max-width:860px; }
.aih-flat-head { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.aih-flat-logo {
  width:52px; height:52px; object-fit:contain; border-radius:13px; padding:6px; flex:none;
  background:rgba(255,255,255,.05); border:1px solid var(--line);
}
.aih-flat-id { flex:1; min-width:0; }
.aih-flat-id h1 {
  font-size:clamp(1.4rem,2.6vw,1.85rem); font-weight:620; letter-spacing:-.03em;
  color:var(--ink); margin:0;
}
.aih-flat-host {
  display:inline-block; margin-top:5px; font-family:var(--mono); font-size:.8rem;
  color:var(--a2) !important;
}
.aih-flat-host:hover { color:var(--a1) !important; }

/* Fact strip: label above value, hairline between columns, no container. */
.aih-facts {
  display:flex; flex-wrap:wrap; gap:0;
  margin:26px 0 0; padding:20px 0; border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.aih-facts > div {
  padding:0 26px; border-left:1px solid var(--line-soft); flex:0 0 auto; min-width:118px;
}
.aih-facts > div:first-child { padding-left:0; border-left:none; }
.aih-facts span {
  display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:6px;
}
.aih-facts b { color:var(--ink); font-weight:600; font-size:.98rem; font-variant-numeric:tabular-nums; }

.aih-flat-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:24px; }
/* margin-left:auto tek bir sessiz bağlantıyı sağa itmek içindi (iptal talebi).
   İki tanesi yan yana olunca her biri kendi otomatik boşluğunu alıp satıra
   dağılıyor ve alakasız üç kontrol gibi duruyor. Otomatik itme sadece
   satırdaki SON sessiz bağlantıya uygulanıyor. */
.aih-quiet { font-size:.86rem; color:var(--ink-3) !important; }
.aih-flat-actions > .aih-quiet:last-child { margin-left:auto; }
.aih-quiet:hover { color:#F2A9A3 !important; }

.aih-flat-sec { margin-top:38px; padding-top:24px; border-top:1px solid var(--line-soft); }
.aih-flat-sec h2 {
  font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; margin:0 0 16px;
}
.aih-ticks { list-style:none; padding:0; margin:0; }
.aih-ticks li {
  position:relative; padding-left:22px; margin-bottom:10px; color:var(--ink-2); font-size:.94rem;
}
.aih-ticks li::before {
  content:""; position:absolute; left:4px; top:.6em; width:6px; height:6px;
  border-radius:2px; background:var(--a1);
}
.aih-quiet-link { display:inline-block; margin-top:14px; font-size:.88rem; color:var(--a2) !important; }
.aih-rows { display:flex; flex-direction:column; }
.aih-row {
  display:flex; align-items:center; gap:14px; padding:13px 0;
  border-bottom:1px solid var(--line-soft); color:var(--ink-2); font-size:.93rem;
}
.aih-row:last-child { border-bottom:none; }
.aih-row b { color:var(--ink); flex:1; font-weight:600; }
.aih-amt { color:var(--ink); font-variant-numeric:tabular-nums; }

/* The stock sidebar on this page offers "Information" and "Request
   Cancellation" — both already on the page, so it was saying everything twice.
   WHMCS adds no per-page body class, so the page is identified by the only
   thing unique to it: our own wrapper. */
.row:has(.aih-flat) .sidebar,
.row:has(.aih-flat) .col-lg-4,
.row:has(.aih-flat) .col-xl-3 { display:none !important; }
.row:has(.aih-flat) .primary-content,
.row:has(.aih-flat) .col-lg-8,
.row:has(.aih-flat) .col-xl-9 { flex:0 0 100%; max-width:100%; }

@media(max-width:640px){
  .aih-facts > div { padding:0 16px; min-width:98px; }
  .aih-facts > div:nth-child(3n+1) { padding-left:0; border-left:none; }
  .aih-flat-actions { flex-direction:column; align-items:stretch; }
  .aih-flat-actions .btn { width:100%; justify-content:center; }
  .aih-quiet { margin:8px 0 0; text-align:center; }
}

/* ══ LISTS, INVOICES, TICKETS, FUNDS ══════════════════════════════════════
 *
 * These pages shipped as DataTables grids. DataTables writes its own light
 * styling from JS after our stylesheet has parsed — white header cells, a white
 * "no records" row, a white search box and pager — so they could not be fixed
 * with CSS alone and the tables were replaced with our own markup. What remains
 * here is the skin for that markup, plus a defensive dark pass over any stock
 * table still reachable elsewhere in the client area.
 */

.aih-list-head {
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  flex-wrap:wrap; padding-bottom:18px; border-bottom:1px solid var(--line-soft); margin-bottom:4px;
}
.aih-list-head h1 { margin:2px 0 0; font-size:1.85rem; }
.aih-kicker {
  display:block; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
}
.aih-lede { color:var(--ink-2); max-width:62ch; margin:18px 0 22px; }
.aih-hint { display:block; color:var(--ink-3); margin-top:8px; font-size:.82rem; }
.aih-due {
  color:var(--a2); font-weight:560; font-size:.9rem;
  border:1px solid color-mix(in oklab,var(--a2) 40%,var(--line));
  border-radius:999px; padding:6px 14px;
}
.aih-bal { text-align:right; }
.aih-bal i { display:block; font-style:normal; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); }
.aih-bal b { font-size:1.5rem; color:var(--ink); font-weight:650; }

/* Row lists. One hairline between rows, no card per item. */
.aih-rows { margin:20px 0 0; }
.aih-inv, .aih-tix-row, .aih-dept {
  display:flex; align-items:center; gap:18px; padding:17px 4px;
  border-bottom:1px solid var(--line-soft); color:var(--ink-2);
  text-decoration:none; transition:.16s var(--ease);
}
.aih-inv:first-child, .aih-tix-row:first-child, .aih-dept:first-child {
  border-top:1px solid var(--line-soft);
}
.aih-inv:hover, .aih-tix-row:hover, .aih-dept:hover {
  background:rgba(255,255,255,.03); color:var(--ink); padding-left:12px; padding-right:12px;
}
.aih-inv-no, .aih-tix-no {
  font-family:var(--mono); font-size:.85rem; color:var(--ink-3); flex:0 0 78px;
}
.aih-inv-dates, .aih-tix-subj { flex:1 1 auto; min-width:0; }
.aih-inv-dates b, .aih-tix-subj b {
  display:block; color:var(--ink); font-weight:560; font-size:.97rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.aih-inv-dates i, .aih-tix-subj i {
  font-style:normal; font-size:.82rem; color:var(--ink-3);
}
.aih-inv-amt { font-weight:650; color:var(--ink); font-size:1.02rem; flex:0 0 auto; }
.aih-inv.is-due .aih-inv-amt { color:var(--a2); }
.aih-tix-row.is-unread .aih-tix-subj b { color:var(--a2); }
.aih-inv-go { color:var(--ink-3); flex:0 0 auto; }
.aih-inv:hover .aih-inv-go, .aih-tix-row:hover .aih-inv-go,
.aih-dept:hover .aih-inv-go { color:var(--a1); }
.aih-dept { flex-wrap:wrap; }
.aih-dept-name { color:var(--ink); font-weight:600; font-size:1.05rem; flex:0 0 auto; }
.aih-dept-desc { color:var(--ink-3); font-size:.88rem; flex:1 1 260px; }
.aih-state-custom { background:transparent !important; border:1px solid; }

/* Forms on our own pages. */
.aih-field { margin:0 0 20px; }
.aih-field > label {
  display:block; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 8px; font-weight:600;
}
.aih-grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0 20px; }
.aih-amounts { display:flex; flex-wrap:wrap; gap:9px; margin:0 0 10px; }
.aih-amt-btn {
  background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--ink-2);
  border-radius:10px; padding:9px 18px; font-weight:560; font-size:.95rem;
  cursor:pointer; transition:.16s var(--ease);
}
.aih-amt-btn:hover { border-color:color-mix(in oklab,var(--a1) 45%,var(--line)); color:var(--ink); }
.aih-amt-btn.on { background:var(--a1); border-color:var(--a1); color:var(--a-ink); }

/* Anything still rendered by a stock template: no white surfaces. DataTables
   chrome included, since a stock page we have not rewritten yet can still be
   reached from a link we do not control. */
.client-home-panels .panel, .panel, .card, .well,
.dataTables_wrapper, .table-container {
  background:transparent !important; border-color:var(--line) !important;
}
.table, .table-list { color:var(--ink-2) !important; background:transparent !important; }
.table > thead > tr > th, .table thead th, table.dataTable thead th, th.sorting,
th.sorting_asc, th.sorting_desc {
  background:transparent !important; color:var(--ink-3) !important;
  border-bottom:1px solid var(--line) !important; border-top:0 !important;
  font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
}
.table > tbody > tr > td, .table tbody td, table.dataTable tbody td,
td.dataTables_empty {
  background:transparent !important; color:var(--ink-2) !important;
  border-top:1px solid var(--line-soft) !important;
}
.table-striped tbody tr:nth-of-type(odd),
table.dataTable.stripe tbody tr.odd { background:rgba(255,255,255,.02) !important; }
.table-hover tbody tr:hover, table.dataTable tbody tr:hover { background:rgba(255,255,255,.04) !important; }
.dataTables_filter input, .dataTables_length select {
  background:rgba(255,255,255,.04) !important; border:1px solid var(--line) !important;
  color:var(--ink) !important; border-radius:9px; padding:7px 12px;
}
.dataTables_info, .dataTables_length, .dataTables_filter { color:var(--ink-3) !important; }
.dataTables_paginate .paginate_button {
  background:transparent !important; border:1px solid var(--line) !important;
  color:var(--ink-2) !important; border-radius:8px !important;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button:hover {
  background:rgba(var(--glow),.14) !important; color:var(--ink) !important;
  border-color:color-mix(in oklab,var(--a1) 45%,var(--line)) !important;
}

@media (max-width:640px) {
  .aih-inv, .aih-tix-row { flex-wrap:wrap; gap:6px 14px; }
  .aih-inv-dates, .aih-tix-subj { flex:1 1 100%; order:2; }
  .aih-inv-amt { order:3; }
  .aih-inv-go { display:none; }
  .aih-list-head { align-items:flex-start; }
  .aih-list-head .btn { width:100%; text-align:center; }
}

/* Aynısı müşteri paneli tarafı için. Stok alert'ler açık sarı/yeşil/kırmızı
   zeminle geliyor ve koyu sayfada göz alıyor. */
.alert {
  background:rgba(255,255,255,.03) !important; border:1px solid var(--line) !important;
  border-left:2px solid var(--line) !important; border-radius:var(--radius) !important;
  color:var(--ink-2) !important;
}
.alert-warning { border-left-color:var(--a1) !important; }
.alert-danger  { border-left-color:#FF8B6B !important; }
.alert-success { border-left-color:var(--ok) !important; }
.alert-info    { border-left-color:var(--ink-3) !important; }
.alert a, .alert .alert-link { color:var(--a2) !important; font-weight:560; }
.alert h4, .alert strong { color:var(--ink) !important; }

/* ── ticket thread ───────────────────────────────────────────────────────
 *
 * viewticket.tpl is ours now, so this styles our markup rather than fighting
 * stock cards. One column of messages, hairline between, a rail down the left
 * of each. Staff replies get the ember rail because those are the ones the
 * customer is waiting on; their own messages stay quiet.
 */
.aih-ticket .aih-facts { margin-top:22px; }
.aih-closed {
  margin:22px 0 0; padding:12px 16px; color:var(--ink-2); font-size:.9rem;
  border-left:2px solid var(--a1); background:rgba(var(--glow),.06); border-radius:0 10px 10px 0;
}

.aih-thread { margin:34px 0 0; }
.aih-msg {
  border-left:2px solid var(--line); padding:0 0 0 20px; margin:0 0 30px;
}
.aih-msg.is-staff { border-left-color:var(--a1); }
.aih-msg-head {
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0 0 10px;
}
.aih-msg-head b { color:var(--ink); font-weight:600; font-size:.98rem; }
.aih-msg-head time { color:var(--ink-3); font-size:.82rem; margin-left:auto; }
.aih-who {
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  color:var(--ink-3); background:rgba(255,255,255,.06); border-radius:6px; padding:3px 8px;
}
.aih-msg.is-staff .aih-who { background:rgba(var(--glow),.14); color:var(--a2); }
.aih-msg-body { color:var(--ink-2); line-height:1.68; }
.aih-msg-body > *:first-child { margin-top:0; }
.aih-msg-body > *:last-child { margin-bottom:0; }
.aih-msg-body pre, .aih-msg-body code {
  background:rgba(255,255,255,.05); border:1px solid var(--line-soft);
  border-radius:8px; font-family:var(--mono); font-size:.86em;
}
.aih-msg-body pre { padding:12px 14px; overflow-x:auto; }
.aih-msg-body code { padding:2px 5px; }
.aih-msg-body pre code { background:none; border:0; padding:0; }
.aih-msg-body blockquote {
  border-left:2px solid var(--line); padding-left:14px; margin-left:0; color:var(--ink-3);
}
.aih-msg-ip { display:block; margin-top:12px; font-size:.78rem; color:var(--ink-3); }

.aih-att { margin:16px 0 0; }
.aih-att-label {
  display:block; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 8px; font-weight:600;
}
.aih-att ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.aih-att li a, .aih-att-gone {
  display:inline-flex; align-items:center; gap:8px; padding:8px 13px;
  border:1px solid var(--line); border-radius:9px; font-size:.86rem;
  color:var(--ink-2) !important; background:rgba(255,255,255,.03);
}
.aih-att li a:hover {
  border-color:color-mix(in oklab,var(--a1) 45%,var(--line)); color:var(--ink) !important;
}
.aih-att-gone { opacity:.5; text-decoration:line-through; }
.aih-att i { color:var(--ink-3); }

.aih-rate { margin:14px 0 0; }
.aih-rate .star { cursor:pointer; }
.aih-rate .rated { color:var(--ink-3); font-size:.8rem; }

/* The reply form heading reuses the section rule; its own container needs the
   scroll target to land clear of the sticky header. */
#ticketReplyContainer { scroll-margin-top:90px; }

@media (max-width:560px) {
  .aih-msg { padding-left:14px; }
  .aih-msg-head time { margin-left:0; flex:1 1 100%; }
}

/* ── registration ────────────────────────────────────────────────────────
 *
 * clientregister.tpl is left stock on purpose. Its 303 lines carry the
 * required/optional field logic, custom fields, currency selection, security
 * questions and linked accounts; rewriting it to remove four <div class="card">
 * wrappers would put all of that at risk to win a visual change CSS can make on
 * its own. Scoped to #frmCheckout, which is the registration form's id.
 */
#frmCheckout .card {
  border:0 !important; background:transparent !important;
  box-shadow:none !important; margin:0 !important;
}
#frmCheckout .card-body { padding:0 !important; }
#frmCheckout .card + .card,
#frmCheckout #containerNewUserSecurity,
#frmCheckout .marketing-email-optin {
  border-top:1px solid var(--line-soft) !important; margin-top:30px !important; padding-top:26px !important;
}
#frmCheckout .card-title, #frmCheckout h3 {
  font-size:.79rem !important; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3) !important; margin:0 0 18px !important;
}
#frmCheckout .card-title small, #frmCheckout .card-title i { letter-spacing:0; text-transform:none; }
#frmCheckout .marketing-email-optin h4 {
  font-size:.79rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}

/* WHMCS's built-in image captcha ships a pale blue sprite that reads as a
   rendering fault on a dark page. It stays — unverified signup plus a funded
   balance is exactly what bots look for — but it is framed like a field. */
#frmCheckout .captcha-container, .captcha-container {
  display:flex; align-items:center; justify-content:center; gap:14px;
  flex-wrap:wrap; margin:22px 0 6px;
}
img[src*="captcha"], #inputCaptchaImage, .captcha-image {
  border:1px solid var(--line); border-radius:10px; padding:5px 8px;
  background:rgba(255,255,255,.06); filter:invert(1) hue-rotate(180deg) contrast(1.15);
}
input[name="code"], #inputCaptcha { max-width:170px; text-align:center; letter-spacing:.22em; }

/* The mailing-list opt-in ships as a green bootstrap-switch. */
.toggle-switch-success ~ .bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-success {
  background:var(--a1) !important; color:var(--a-ink) !important;
}
.bootstrap-switch { border:1px solid var(--line) !important; border-radius:9px !important; }
.bootstrap-switch .bootstrap-switch-label { background:var(--panel) !important; color:var(--ink-2) !important; }
.bootstrap-switch .bootstrap-switch-default { background:rgba(255,255,255,.06) !important; color:var(--ink-3) !important; }

/* ── markdown editor & file input ────────────────────────────────────────
 *
 * The ticket message box is bootstrap-markdown, which builds its own chrome
 * (.md-header toolbar, .md-input, .md-footer) at runtime with light defaults —
 * a full-width white slab in the middle of a dark page, on the two pages where
 * a customer actually has to type something. Same for Bootstrap's custom file
 * input, whose label and ::after "Browse" button both ship white.
 */
.md-editor {
  border:1px solid var(--line) !important; border-radius:11px !important;
  background:rgba(17,20,27,.65) !important; overflow:hidden;
}
.md-editor.active { border-color:var(--a1) !important; box-shadow:none !important; }
.md-editor > .md-header, .md-editor > .md-footer {
  background:rgba(255,255,255,.03) !important; border-color:var(--line-soft) !important;
  color:var(--ink-3) !important; padding:8px 10px !important;
}
.md-editor > .md-header { border-bottom:1px solid var(--line-soft) !important; }
.md-editor > .md-footer { border-top:1px solid var(--line-soft) !important; font-size:.78rem; }
/* ⚠ Bu üçünü yenmek için seçici derinliği gerekiyor. theme.min.css'te
   `.md-editor>.md-preview,.md-editor>textarea.markdown-editor{...
   background-color:#fff!important}` var — (0,2,1) ve !important. Benim ilk
   yazdığım `.md-editor > textarea` (0,1,1) olduğu için kaybediyordu ve yazı
   alanı bembeyaz kalıyordu. Sınıfları ekleyip (0,3,1)'e çıkarıyoruz. */
.md-editor > textarea.markdown-editor.md-input,
.md-editor > textarea.markdown-editor,
.md-editor > textarea,
.md-editor > .md-input {
  background:transparent !important; background-color:transparent !important;
  border:0 !important; border-top:0 !important; border-bottom:0 !important;
  color:var(--ink) !important; padding:14px !important; resize:vertical;
}
.md-editor > .btn-toolbar {
  background-color:rgba(255,255,255,.03) !important;
  border-bottom:1px solid var(--line-soft) !important;
}
.md-editor > textarea:focus { box-shadow:none !important; outline:none !important; }
.md-editor > .md-preview, .md-editor .md-preview {
  background-color:transparent !important; color:var(--ink-2) !important;
  border-top:0 !important; border-bottom:0 !important; padding:14px !important;
}
.md-preview table { background-color:transparent !important; border:1px solid var(--line) !important; }
.md-preview table > thead > tr > th {
  background-color:rgba(255,255,255,.04) !important; border:1px solid var(--line) !important;
  color:var(--ink-2) !important;
}
.md-preview pre { background-color:rgba(255,255,255,.05) !important; color:var(--ink) !important; }
.md-header .btn-default, .md-header .btn {
  background:transparent !important; border:1px solid var(--line) !important;
  color:var(--ink-3) !important; border-radius:7px !important;
}
.md-header .btn:hover { color:var(--ink) !important; background:rgba(255,255,255,.06) !important; }
.md-header .btn.active, .md-header .btn-success {
  background:rgba(var(--glow),.16) !important;
  border-color:color-mix(in oklab,var(--a1) 45%,var(--line)) !important; color:var(--a2) !important;
}
.md-fullscreen-mode .md-editor { background:var(--bg) !important; }

.custom-file-label, .custom-file-label::after {
  background:rgba(17,20,27,.65) !important; border-color:var(--line) !important;
  color:var(--ink-3) !important;
}
.custom-file-label { border-radius:10px !important; height:auto !important; padding:12px 14px !important; }
.custom-file-label::after {
  background:rgba(255,255,255,.06) !important; color:var(--ink-2) !important;
  border-left:1px solid var(--line) !important; height:100% !important;
  display:flex !important; align-items:center;
}
.custom-file, .custom-file-input { height:auto !important; min-height:46px; cursor:pointer; }

/* Action rows: the primary button left, quiet links beside it — not one at each
   edge, which read as unrelated controls. */
.aih-flat-actions { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin:26px 0 0; }
.aih-flat-actions .aih-quiet { color:var(--ink-3); font-size:.88rem; }
.aih-flat-actions .aih-quiet:hover { color:var(--a2); }

/* WHMCS renders the invoice pay button itself ($paymentbutton), so it arrives
   as a bare input. It is the whole point of the page — give it the weight the
   other primary buttons have. */
.payment-btn-container .btn,
.payment-btn-container input[type=submit],
.payment-btn-container button {
  padding:13px 30px !important; font-size:1rem !important; font-weight:650 !important;
  border-radius:11px !important; width:auto !important;
}

/* Service detail: instance login rows (label left, value right, hairlines). */
.aih-login > div {
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding:12px 0; border-bottom:1px solid var(--line-soft);
}
.aih-login > div:last-child { border-bottom:none; }
.aih-login span {
  flex:0 0 170px; font-family:var(--mono); font-size:.6rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);
}
.aih-login b { color:var(--ink); font-weight:600; word-break:break-all; }
.aih-login code { font-family:var(--mono); font-size:.92rem; color:var(--ink); background:none; padding:0; }
.aih-login a b { color:var(--a2); }
.aih-pw-btn { background:none; border:none; padding:0 4px; cursor:pointer; }
.aih-pw-btn:hover { color:var(--a1) !important; }
.aih-login-go { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
@media (max-width:600px) { .aih-login span { flex-basis:100%; } }

/* Instance controls (power buttons via aihb-agent). */
.aih-flat-sec h2 .aih-state { margin-left:10px; vertical-align:middle; font-size:.62rem; }
.aih-state-running { color:#7FE3B0; border-color:rgba(69,212,131,.4); background:rgba(69,212,131,.10); }
.aih-state-starting { color:var(--a2); border-color:rgba(255,197,61,.4); background:rgba(255,197,61,.08); }
.aih-state-stopped, .aih-state-unknown { color:var(--ink-3); border-color:var(--line-soft); background:transparent; }
.aih-power { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:14px; }
.aih-power .form-control { max-width:320px; }
.aih-power-wait { font-size:.86rem; color:var(--ink-3); }
.aih-flash { margin:12px 0 0; font-size:.9rem; }
.aih-flash-ok { color:#7FE3B0; }
.aih-flash-err { color:#F2A9A3; }
.aih-reset { margin-top:22px; }
.aih-reset summary { cursor:pointer; font-size:.86rem; color:var(--ink-3); }
.aih-reset summary:hover { color:#F2A9A3; }
.aih-reset p { margin:10px 0 0; font-size:.86rem; color:var(--ink-3); max-width:640px; }

/* ── billing details after quick checkout (26 Eki 2026) ──────────────────
 * Order confirmation (orderforms complete.tpl) and /complete-details.php
 * share includes/aih-details-form.tpl. Lives here, not in cart-custom.css,
 * because the second page is a client area page. */
.aih-done { max-width:720px; margin:0 auto; }
.aih-done-lead { color:var(--ink-2); margin:0 0 6px; }
.aih-done-num { display:block; margin-top:6px; font-size:.84rem; color:var(--ink-3); }
.aih-details {
  border:1px solid color-mix(in oklab,var(--a1) 40%,var(--line)); border-radius:22px;
  background:rgba(var(--glow),.04); padding:22px; margin:22px 0;
}
.aih-details h2 { font-size:1.2rem; margin:0 0 6px; color:var(--ink); }
.aih-details-lead { color:var(--ink-2); font-size:.92rem; margin:0 0 16px; }
.aih-details-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; margin-bottom:18px; }
.aih-f { display:block; margin:0; font-weight:400; }
.aih-f > span { display:block; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; }
.aih-f > span em { font-style:normal; text-transform:none; letter-spacing:0; opacity:.8; }
.aih-f-wide { grid-column:1/-1; }
.aih-f.has-error .form-control { border-color:#FF8B6B !important; }
.aih-err { display:block; color:#FF8B6B; font-size:.8rem; margin-top:4px; }
@media (max-width:600px) {
  .aih-details { padding:18px 16px; }
  .aih-details-grid { grid-template-columns:1fr; }
  .aih-details .btn { width:100%; }
}

/* Promo strip above the header (30 Eki 2026) — mirrors .promo-bar in theme.css */
.aih-promo {
  position:relative; z-index:1031; font-size:.82rem; color:var(--ink);
  background:linear-gradient(90deg,rgba(var(--glow),.18),rgba(255,197,61,.08));
  border-bottom:1px solid var(--line-soft);
}
.aih-promo-in {
  width:100%; max-width:1200px; margin-inline:auto; padding:6px 24px; min-height:36px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.aih-promo a { color:var(--ink-2) !important; white-space:nowrap; }
.aih-promo a:hover { color:var(--ink) !important; }
.aih-promo a.aih-promo-deal { color:var(--ink) !important; }
.aih-promo b { color:var(--a2); font-weight:650; }
.aih-promo code {
  font-family:var(--mono); font-size:.78rem; font-weight:650; color:var(--a2); letter-spacing:.04em;
  background:rgba(255,255,255,.05); border:1px dashed rgba(255,197,61,.5); border-radius:6px; padding:1px 7px; margin-left:2px;
}
@media (max-width:760px) {
  .aih-promo-in { justify-content:center; text-align:center; }
  .aih-promo-tk { display:none; }
  .aih-promo a { white-space:normal; }
}