/* KIRE client area — match the marketing terminal chrome.
   Does not change billing logic. Visual layer only. */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Source+Sans+3:wght@400;600&display=swap");

:root {
  --k-bg: #0b0d10;
  --k-bg2: #101318;
  --k-bg3: #15191f;
  --k-hover: #1b212a;
  --k-green: #7dff6b;
  --k-green-dim: #4aa83e;
  --k-glow: rgba(125, 255, 107, 0.14);
  --k-amber: #e6b325;
  --k-text: #c5cdd6;
  --k-dim: #8b939e;
  --k-bright: #eef2f6;
  --k-line: #232833;
  --k-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --k-sans: "Source Sans 3", "Source Sans Pro", "Open Sans", sans-serif;
}

html, body {
  background: var(--k-bg) !important;
  color: var(--k-text) !important;
  font-family: var(--k-sans) !important;
}

h1, h2, h3, h4, h5, h6,
.navbar-main,
.logo-text,
.kire-wordmark {
  font-family: var(--k-mono) !important;
  font-weight: 500 !important;
  color: var(--k-bright);
}
h2 { font-size: 1.25rem !important; line-height: 1.3; }
#order-slider h1,
#order-slider h2,
#order-slider h3 {
  font-size: 1.15rem !important;
  line-height: 1.3;
}

a { color: var(--k-green); }
a:hover { color: var(--k-bright); }

/* status bar injected in header.tpl */
.kire-status {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  height: 34px;
  padding: 0 1rem;
  background: #080a0c;
  border-bottom: 1px solid var(--k-line);
  color: var(--k-dim);
  font-family: var(--k-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow-x: auto;
}
.kire-status .host { color: var(--k-green); }
.kire-status .sep { color: var(--k-line); }
.kire-status .ok { color: var(--k-green-dim); }
.kire-status a { color: var(--k-dim); text-decoration: none; }
.kire-status a:hover { color: var(--k-green); }

section#header {
  background: var(--k-bg) !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--k-line);
  padding: 12px 0 !important;
}
section#header .logo img { display: none; }
section#header .kire-wordmark {
  display: inline-block;
  color: var(--k-bright);
  font-size: 20px;
  letter-spacing: 0.08em;
  text-decoration: none;
}
section#header .kire-wordmark span { color: var(--k-dim); letter-spacing: 0; }
section#header .kire-wordmark:hover { color: var(--k-green); text-decoration: none; }
section#header .logo-text {
  color: var(--k-green) !important;
  font-size: 1.4em !important;
}

section#header .top-nav > li > a {
  color: var(--k-dim) !important;
  font-family: var(--k-mono);
  font-size: 12px;
}
section#header .top-nav > li > a:hover { color: var(--k-green) !important; }
section#header .top-nav .btn,
section#header .primary-action .btn {
  background: transparent !important;
  border: 1px solid var(--k-amber) !important;
  color: var(--k-amber) !important;
  border-radius: 0 !important;
  font-family: var(--k-mono);
  font-size: 12px;
}
section#header .primary-action .btn:hover {
  background: var(--k-amber) !important;
  color: var(--k-bg) !important;
}

#main-menu,
.navbar-main {
  background: var(--k-bg2) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--k-line) !important;
  border-radius: 0 !important;
  font-family: var(--k-mono) !important;
  min-height: 44px;
}
.navbar-main .navbar-nav > li > a {
  color: var(--k-dim) !important;
  font-size: 13px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .open > a,
.navbar-main .navbar-nav > .active > a:hover,
.navbar-main .navbar-nav > .open > a:hover {
  color: var(--k-green) !important;
  background: var(--k-glow) !important;
}
.navbar-main .dropdown-menu {
  background: #0e1115 !important;
  border: 1px solid var(--k-line) !important;
  border-radius: 0 !important;
}
.navbar-main .dropdown-menu > li > a { color: var(--k-text) !important; }
.navbar-main .dropdown-menu > li > a:hover {
  background: var(--k-green) !important;
  color: var(--k-bg) !important;
}
.navbar-main li.account { background: transparent !important; }
.navbar-main .navbar-toggle { border-color: var(--k-line) !important; }
.navbar-main .navbar-toggle .icon-bar { background: var(--k-green) !important; }

section#main-body {
  background: var(--k-bg) !important;
  color: var(--k-text);
}
.main-content { color: var(--k-text); }

.panel,
.panel-default,
.panel-sidebar,
.card {
  background: var(--k-bg3) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: 0 !important;
  color: var(--k-text) !important;
  box-shadow: none !important;
}
.panel-heading,
.panel-default > .panel-heading,
.panel-sidebar > .panel-heading,
.card-header {
  background: var(--k-bg2) !important;
  border-bottom: 1px solid var(--k-line) !important;
  color: var(--k-green) !important;
  font-family: var(--k-mono);
  font-size: 13px;
  border-radius: 0 !important;
}
.panel-body,
.card-body { color: var(--k-text) !important; }
.panel-footer,
.card-footer {
  background: var(--k-bg2) !important;
  border-top: 1px solid var(--k-line) !important;
  color: var(--k-dim) !important;
}

.list-group-item {
  background: var(--k-bg3) !important;
  border-color: var(--k-line) !important;
  color: var(--k-text) !important;
}
.list-group-item:hover,
.list-group-item.active,
a.list-group-item:hover {
  background: var(--k-hover) !important;
  color: var(--k-green) !important;
  border-color: var(--k-line) !important;
}

.tiles .tile {
  background: var(--k-bg3) !important;
  border: 1px solid var(--k-line) !important;
  color: var(--k-text) !important;
}
.tiles .tile:hover {
  border-color: var(--k-green-dim) !important;
  background: var(--k-hover) !important;
}

.btn {
  border-radius: 0 !important;
  font-family: var(--k-mono);
  font-size: 13px;
}
.btn-primary,
.btn-success,
.btn-info {
  background: transparent !important;
  border: 1px solid var(--k-green) !important;
  color: var(--k-green) !important;
}
.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-primary:focus,
.btn-success:focus {
  background: var(--k-green) !important;
  color: var(--k-bg) !important;
  border-color: var(--k-green) !important;
}
.btn-default,
.btn-secondary {
  background: transparent !important;
  border: 1px solid var(--k-line) !important;
  color: var(--k-text) !important;
}
.btn-default:hover {
  border-color: var(--k-green) !important;
  color: var(--k-green) !important;
  background: transparent !important;
}
.btn-danger {
  background: transparent !important;
  border: 1px solid #e85d5d !important;
  color: #e85d5d !important;
}

.form-control,
.form-control:focus,
select.form-control,
textarea.form-control {
  background: var(--k-bg2) !important;
  border: 1px solid var(--k-line) !important;
  color: var(--k-bright) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
label { color: var(--k-dim); font-family: var(--k-mono); font-size: 12px; font-weight: 400; }

.table { color: var(--k-text); }
.table > thead > tr > th {
  border-bottom-color: var(--k-line) !important;
  color: var(--k-dim);
  font-family: var(--k-mono);
  font-weight: 400;
  font-size: 12px;
}
.table > tbody > tr > td { border-top-color: var(--k-line) !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--k-bg2) !important; }
.table-hover > tbody > tr:hover { background: var(--k-hover) !important; }
.dataTables_wrapper { color: var(--k-text); }

.pagination > li > a,
.pagination > li > span {
  background: var(--k-bg3) !important;
  border-color: var(--k-line) !important;
  color: var(--k-text) !important;
}
.pagination > .active > a,
.pagination > .active > span {
  background: var(--k-green) !important;
  border-color: var(--k-green) !important;
  color: var(--k-bg) !important;
}

.alert { border-radius: 0; }
.alert-info { background: var(--k-glow); border-color: var(--k-green-dim); color: var(--k-bright); }
.alert-success { background: var(--k-glow); border-color: var(--k-green-dim); color: var(--k-bright); }
.alert-warning { background: rgba(230,179,37,0.12); border-color: var(--k-amber); color: var(--k-bright); }
.alert-danger { background: rgba(232,93,93,0.12); border-color: #e85d5d; color: var(--k-bright); }

.breadcrumb {
  background: transparent !important;
  font-family: var(--k-mono);
  font-size: 12px;
}
.breadcrumb a { color: var(--k-dim); }
.breadcrumb .active { color: var(--k-green); }

section#home-banner {
  background: var(--k-bg2) !important;
  border-bottom: 1px solid var(--k-line);
  color: var(--k-text);
}
section#home-banner h2 {
  color: var(--k-green) !important;
  font-family: var(--k-mono) !important;
}
.home-shortcuts {
  background: var(--k-bg3) !important;
  border-bottom: 1px solid var(--k-line);
}
.home-shortcuts li a { color: var(--k-text) !important; }
.home-shortcuts li a:hover { color: var(--k-green) !important; }

.sidebar .panel-heading { color: var(--k-green) !important; }

.popover {
  background: #0e1115;
  border: 1px solid var(--k-line);
  color: var(--k-text);
}
.popover-title {
  background: var(--k-bg2);
  border-bottom: 1px solid var(--k-line);
  color: var(--k-green);
  font-family: var(--k-mono);
}
.popover.bottom > .arrow:after { border-bottom-color: #0e1115; }

.modal-content {
  background: var(--k-bg3);
  border: 1px solid var(--k-line);
  border-radius: 0;
  color: var(--k-text);
}
.modal-header, .modal-footer {
  background: var(--k-bg2);
  border-color: var(--k-line);
}

.logincontainer {
  background: var(--k-bg3);
  border: 1px solid var(--k-line);
  padding: 24px;
}

section#footer {
  background: #080a0c !important;
  border-top: 1px solid var(--k-line) !important;
  color: var(--k-dim) !important;
  font-family: var(--k-mono);
  font-size: 12px;
}
section#footer a { color: var(--k-text); }
section#footer a:hover { color: var(--k-green); }
section#footer .back-to-top i {
  background: var(--k-bg3) !important;
  color: var(--k-green) !important;
  border-radius: 0 !important;
}
.kire-foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-bottom: 0.6rem;
}
.kire-colophon { color: var(--k-dim); }

/* cart / order form sitting inside the client area */
#order-standard_cart .products .product,
#order-standard_cart .categories-collapsed,
#order-standard_cart .panel-addon {
  background: var(--k-bg3) !important;
  border: 1px solid var(--k-line) !important;
  color: var(--k-text) !important;
}
#order-standard_cart .products .product header,
#order-standard_cart .panel-addon .panel-price {
  background: var(--k-bg2) !important;
  color: var(--k-bright) !important;
}
#order-standard_cart .products .product header span { color: var(--k-green) !important; }
#order-standard_cart .sub-heading { border-top-color: var(--k-line) !important; }
#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading-borderless span {
  background: var(--k-bg) !important;
  color: var(--k-green) !important;
  font-family: var(--k-mono);
}
#order-standard_cart label { color: var(--k-dim) !important; }
#order-standard_cart .panel-addon .panel-body label { color: var(--k-text) !important; }

.text-muted { color: var(--k-dim) !important; }
.well {
  background: var(--k-bg2) !important;
  border-color: var(--k-line) !important;
  color: var(--k-text);
}

@media (max-width: 767px) {
  .kire-status { font-size: 11px; }
}

/* Card Type on checkout (bare select, not .form-control) */
select#cctype,
select#cctype option,
select#inputCardType,
select#inputCardType option {
  background-color: #101318 !important;
  color: #eef2f6 !important;
  border: 1px solid #2e3542 !important;
  color-scheme: dark;
}

/* Checkout captcha: light pad so the GD image is readable on dark theme */
#kire-checkout-captcha {
  margin: 18px auto;
  padding: 14px 16px;
  max-width: 380px;
  background: #eef3f8;
  color: #101318;
  border: 1px solid #2e3542;
  text-align: center;
}
#kire-checkout-captcha p {
  margin: 0 0 10px 0;
  color: #101318;
  font-size: 13px;
}
#kire-checkout-captcha img,
#kire-checkout-captcha #inputCaptchaImage {
  display: inline-block;
  vertical-align: middle;
  width: 200px;
  height: 48px;
  background: #cfe6ff;
  border: 1px solid #8aa0b5;
}
#kire-checkout-captcha #inputCaptcha {
  display: inline-block;
  vertical-align: middle;
  width: 7em;
  height: 48px;
  margin-left: 10px;
  background: #ffffff !important;
  color: #101318 !important;
  border: 1px solid #2e3542 !important;
  font-size: 20px;
  letter-spacing: 0.12em;
  text-align: center;
}

/* Invoice pay summary (index.php?rp=/cart/invoice/{id}/pay)
   Default is #f8f8f8 with inherited light text. Visual only. */
.invoice-summary,
#invoiceIdSummary {
  background-color: var(--k-bg2) !important;
  border: 1px solid var(--k-line) !important;
  color: var(--k-text) !important;
  height: auto;
  min-height: 0;
}
.invoice-summary h2,
#invoiceIdSummary h2 {
  color: var(--k-bright) !important;
  font-family: var(--k-mono) !important;
}
.invoice-summary p,
.invoice-summary strong,
.invoice-summary td,
.invoice-summary th,
.invoice-summary .table,
.invoice-summary-table,
.invoice-summary-table td {
  color: var(--k-text) !important;
  border-color: var(--k-line) !important;
}
.invoice-summary .table,
.invoice-summary-table table {
  background-color: transparent !important;
}
.invoice-summary .table > tbody > tr > td,
.invoice-summary .table > tbody > tr > th,
.invoice-summary .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: transparent !important;
  border-top-color: var(--k-line) !important;
}
.invoice-summary td.total-row,
.invoice-summary-table td.total-row {
  background-color: var(--k-bg3) !important;
  color: var(--k-bright) !important;
  font-weight: 600;
}
#frmPayment .control-label {
  color: var(--k-dim) !important;
}

/* 2026-08-29: ticket markdown editor was white-on-white.
   all.min.css sets .md-editor>textarea.markdown-editor { background:#fff }
   while this file sets textarea.form-control { color: --k-bright }.
   Same widget on submitticket.php and viewticket.php. */
.md-editor {
  border-color: var(--k-line) !important;
  background: var(--k-bg2) !important;
}
.md-editor > .btn-toolbar {
  background-color: var(--k-bg3) !important;
}
.md-editor > .md-preview,
.md-editor > textarea.markdown-editor {
  background-color: var(--k-bg2) !important;
  color: var(--k-bright) !important;
  border-top-color: var(--k-line) !important;
  border-bottom-color: var(--k-line) !important;
}
.md-editor .btn-default,
.md-editor .btn-toolbar .btn {
  background: transparent !important;
  border-color: var(--k-line) !important;
  color: var(--k-text) !important;
}
.markdown-editor-status {
  color: var(--k-dim) !important;
}

/* 2026-08-29b: compose contrast. Cover textarea/md-input/focus so typed
   text is not dark-on-dark after the dark-bg override. Same widget on
   submitticket.php and viewticket.php. Thread body too. */
.md-editor textarea,
.md-editor textarea.markdown-editor,
.md-editor textarea.md-input,
.md-editor textarea.form-control,
.md-editor > textarea:focus,
.md-editor .md-preview {
  background-color: #0b0d10 !important;
  color: #f5f7fa !important;
  caret-color: #f5f7fa !important;
}
.ticket-reply .message,
.ticket-reply .markdown-content,
.markdown-content,
.markdown-content p,
.markdown-content li {
  color: #eef2f6 !important;
}