/* Kre8iv Hosting — WHMCS client area skin (child of Twenty-One)
   Mirrors brand/tokens.css. Covers: client area, standard_cart, and Nexus Cart (via its CSS variables).
   Loaded after theme.min.css, so plain selectors win; !important only where Twenty-One uses it. */

@import url("https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400..800;1,400..600&display=swap");

:root {
  --k8-paper: #FAF8F4; --k8-paper-2: #F2EFE8; --k8-paper-3: #EDE9E0; --k8-white: #FFFFFF;
  --k8-navy: #0E1B33; --k8-navy-hover: #1D2E52; --k8-link: #2B4A8B;
  --k8-ink-muted: #4A5468; --k8-ink-faint: #6B7385; --k8-ink-on-navy: #D6DAE3;
  --k8-yellow: #FFC93C; --k8-yellow-hover: #FFD666; --k8-yellow-tint: #FFF1C7;
  --k8-green: #2B7A4B; --k8-green-tint: #E4F0E8;
  --k8-red: #A33A2B; --k8-red-tint: #F7E6E2;
  --k8-line: #E3DFD6; --k8-line-strong: #C9C3B6;
  --k8-font: "Public Sans", system-ui, sans-serif;
  --k8-pat-dots: radial-gradient(rgba(14,27,51,.16) 1px, transparent 1.5px);
  --k8-pat-grid: linear-gradient(rgba(14,27,51,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(14,27,51,.07) 1px, transparent 1px);
  --k8-pat-grid-navy: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  --k8-pat-hatch: repeating-linear-gradient(135deg, rgba(14,27,51,.09) 0 1px, transparent 1px 11px);

  /* Nexus Cart variables (replaces parent custom.css) */
  --white: #fff;
  --neutral-50: #FAF8F4; --neutral-100: #F2EFE8; --neutral-200: #E3DFD6; --neutral-300: #C9C3B6;
  --neutral-400: #6B7385; --neutral-500: #4A5468; --neutral-600: #3A4458; --neutral-700: #1D2E52;
  --neutral-800: #14223F; --neutral-900: #0E1B33; --neutral-950: #08111F;
  --primary-50: var(--neutral-50); --primary-100: var(--neutral-100); --primary-200: var(--neutral-200);
  --primary-300: var(--neutral-300); --primary-400: var(--neutral-400); --primary-500: var(--neutral-500);
  --primary-600: var(--neutral-600); --primary-700: var(--neutral-700); --primary-800: var(--neutral-800);
  --primary-900: var(--neutral-900); --primary-950: var(--neutral-950);
  --primary: #0E1B33; --primary-lifted: #1D2E52; --primary-accented: #2B4A8B;
  --secondary: #4A5468; --secondary-lifted: #3A4458; --secondary-accented: #1D2E52;
  --success: #2B7A4B; --success-lifted: #236840; --success-accented: #1B5232;
  --info: #2B4A8B; --info-lifted: #223C72; --info-accented: #1D2E52;
  --notice: #2B4A8B; --notice-lifted: #223C72; --notice-accented: #1D2E52;
  --warning: #8A5A00; --warning-lifted: #6E4800; --warning-accented: #523600;
  --error: #A33A2B; --error-lifted: #8A3124; --error-accented: #70281D;
  --grayscale: #0E1B33; --grayscale-lifted: #1D2E52; --grayscale-accented: #3A4458;
  --neutral: #4A5468; --neutral-lifted: #3A4458; --neutral-accented: #1D2E52;
  --text-inverted: #FFFFFF; --text-muted: #6B7385; --text-lifted: #4A5468; --text-accented: #3A4458; --text: #0E1B33;
  --border-muted: #E3DFD6; --border: #C9C3B6; --border-lifted: #6B7385; --border-accented: #0E1B33;
  --bg: #FFFFFF; --bg-muted: #FAF8F4; --bg-lifted: #F2EFE8; --bg-accented: #E3DFD6; --bg-inverted: #0E1B33;
  --yellow-200: #FFF1C7; --yellow-300: #FFC93C; --teal-300: #FFC93C; --teal-400: #FFC93C; --emerald-300: #E4F0E8; --pink-400: #FFC93C;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 0.9375rem; --text-lg: 1.0625rem;
  --outline-sm: 1px; --outline-md: 1.5px; --outline-lg: 2px;
  --rounding-sm: 4px; --rounding-md: 6px; --rounding-lg: 8px;
  --letter-spacing: 0em; --disabled-opacity: 40%;
}

/* Base */
html { font-size: 16px; }
body, .primary-bg-color, body.primary-bg-color { background: var(--k8-paper); color: var(--k8-navy); font-family: var(--k8-font); line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 { font-family: var(--k8-font); color: var(--k8-navy); font-weight: 800; letter-spacing: -.02em; }
h1, .h1 { letter-spacing: -.03em; }
a { color: var(--k8-link); text-underline-offset: 3px; }
a:hover, a:focus { color: var(--k8-navy); }
.text-muted, small.text-muted { color: var(--k8-ink-muted) !important; }
hr { border-top-color: var(--k8-line); }
::placeholder { color: var(--k8-ink-faint) !important; }
:focus-visible { outline: 2px solid var(--k8-navy); outline-offset: 2px; }
::selection { background: var(--k8-yellow); color: var(--k8-navy); }

/* Header */
header.header { background: var(--k8-paper); border-bottom: 1px solid var(--k8-line); }
header.header .topbar { background: var(--k8-navy); color: var(--k8-ink-on-navy); font-size: 13px; }
header.header .topbar a, header.header .topbar .btn { color: var(--k8-ink-on-navy); }
header.header .topbar a:hover, header.header .topbar .btn:hover { color: #fff; }
header.header .navbar { background: var(--k8-paper); }
header.header .navbar-brand { color: var(--k8-navy); font-weight: 800; font-size: 21px; letter-spacing: -.03em; }
header.header .logo-img { max-height: 34px; width: auto; }
header.header .search .form-control, header.header .search .btn { background: #fff; border-color: var(--k8-line-strong); }
header.header .search:focus-within { box-shadow: 0 0 0 1px var(--k8-navy); border-radius: 6px; }
header.header .toolbar .nav-link { color: var(--k8-navy); border-color: var(--k8-line-strong); border-radius: 6px; }
header.header .toolbar .nav-link:hover { background: var(--k8-paper-2); color: var(--k8-navy); }
header.header .toolbar .nav-link .badge { background: var(--k8-yellow); color: var(--k8-navy); font-weight: 700; }
header.header .main-navbar-wrapper { background: var(--k8-paper); border-top: 1px solid var(--k8-line); }
header.header .navbar-nav a, header.header .navbar-light .navbar-nav .nav-link { color: var(--k8-navy); font-weight: 600; font-size: 15px; }
header.header .navbar-light .navbar-nav .nav-link:hover { color: var(--k8-navy); box-shadow: inset 0 -2px 0 var(--k8-yellow); }
header.header .navbar-light .navbar-nav .active > .nav-link, header.header .navbar-light .navbar-nav .nav-link.active { color: var(--k8-navy); box-shadow: inset 0 -2px 0 var(--k8-yellow); }
header.header .navbar-toggler { border: 1.5px solid var(--k8-navy); border-radius: 6px; }

/* Dropdowns */
.dropdown-menu { border: 1px solid var(--k8-line); border-radius: 8px; box-shadow: 0 18px 40px rgba(14,27,51,.12); padding: 6px; font-size: 15px; }
.dropdown-item { border-radius: 6px; color: var(--k8-navy); padding: 9px 12px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--k8-paper-2); color: var(--k8-navy); }
.dropdown-item.active, .dropdown-item:active, header.header .dropdown-item.active, header.header .dropdown-item:active { background: var(--k8-navy); color: #fff; }
.dropdown-divider { border-top-color: var(--k8-line); }

/* Breadcrumb */
.master-breadcrumb { background: var(--k8-paper-2); border-bottom: 1px solid var(--k8-line); }
.master-breadcrumb .breadcrumb { background: transparent; font-size: 14px; }
.breadcrumb-item a { color: var(--k8-ink-muted); }
.breadcrumb-item.active { color: var(--k8-navy); font-weight: 600; }

/* Cards, sidebar */
.card { border: 1px solid var(--k8-line); border-radius: 8px; box-shadow: none; background: #fff; }
.card-header, .card-footer { background: #fff; border-color: var(--k8-line); }
.card-header { border-radius: 8px 8px 0 0 !important; }
.card-title, .card-header h3, .card-header .card-title { font-weight: 800; font-size: 18px; letter-spacing: -.015em; color: var(--k8-navy); }
.sidebar .card-title { font-size: 16px; }
.sidebar .list-group-item { border-color: var(--k8-line); color: var(--k8-navy); font-size: 15px; }
.sidebar .list-group-item:hover { background: var(--k8-paper-2); color: var(--k8-navy); }
.sidebar .list-group-item.active, .sidebar .list-group-item.active:hover, .sidebar .list-group-item.active:focus { background: var(--k8-paper-2); color: var(--k8-navy); font-weight: 700; border-color: var(--k8-line); }
.sidebar .list-group-item .badge { background: var(--k8-paper-3); color: var(--k8-navy); }
.list-group-item { border-color: var(--k8-line); }

/* Dashboard tiles */
.tiles .tile { background: #fff; border: 1px solid var(--k8-line); border-radius: 8px; color: var(--k8-navy); }
.tiles .row > div:last-child .tile, .tiles .tile { border-right: 1px solid var(--k8-line); }
.tiles .tile .stat { color: var(--k8-navy); font-weight: 800; letter-spacing: -.04em; }
.tiles .tile .title { color: var(--k8-ink-muted); font-weight: 600; text-transform: none; letter-spacing: 0; }
.tiles .tile .highlight { background: var(--k8-yellow) !important; height: 3px; }
.tiles .tile i { display: none; }
.tiles .tile:hover { background: var(--k8-paper-2); }

/* Buttons — success is WHMCS's main CTA (Order now, Checkout), so it carries the brand yellow */
.btn { font-family: var(--k8-font); font-weight: 700; border-radius: 6px; box-shadow: none !important; }
.btn-primary { background: var(--k8-navy); border-color: var(--k8-navy); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active { background: var(--k8-navy-hover); border-color: var(--k8-navy-hover); color: #fff; }
.btn-success, .btn-order-now, .btn-checkout { background: var(--k8-yellow); border-color: var(--k8-yellow); color: var(--k8-navy); }
.btn-success:hover, .btn-success:focus, .btn-success:not(:disabled):not(.disabled):active, .btn-order-now:hover, .btn-checkout:hover { background: var(--k8-yellow-hover); border-color: var(--k8-yellow-hover); color: var(--k8-navy); }
.btn-default, .btn-secondary, .btn-outline-secondary, .btn-outline-primary, .btn-light { background: #fff; border: 1.5px solid var(--k8-navy); color: var(--k8-navy); }
.btn-default:hover, .btn-secondary:hover, .btn-outline-secondary:hover, .btn-outline-primary:hover, .btn-light:hover { background: var(--k8-navy); border-color: var(--k8-navy); color: #fff; }
.btn-danger { background: var(--k8-red); border-color: var(--k8-red); color: #fff; }
.btn-danger:hover { background: #8A3124; border-color: #8A3124; }
.btn-info, .btn-warning { background: var(--k8-navy); border-color: var(--k8-navy); color: #fff; }
.btn-link { color: var(--k8-link); font-weight: 700; }

/* Forms */
.form-control, .custom-select, .input-group-text { border: 1.5px solid var(--k8-line-strong); border-radius: 6px; color: var(--k8-navy); background-color: #fff; }
.form-control:focus, .custom-select:focus { border-color: var(--k8-navy); box-shadow: 0 0 0 1px var(--k8-navy); }
.input-group-text { background: var(--k8-paper-2); }
label, .control-label, .col-form-label { font-weight: 700; font-size: 15px; color: var(--k8-navy); }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--k8-navy); border-color: var(--k8-navy); }
.form-check-input:checked, input[type="checkbox"], input[type="radio"] { accent-color: var(--k8-navy); }

/* Tables */
.table { color: var(--k8-navy); }
.table thead th, table.dataTable thead th { border-top: 0; border-bottom: 1.5px solid var(--k8-navy) !important; font-weight: 700; font-size: 14px; color: var(--k8-navy); background: #fff; }
.table td, .table th { border-color: var(--k8-line); }
.table-hover tbody tr:hover, table.dataTable tbody tr:hover { background: var(--k8-paper); }
.page-item.active .page-link { background: var(--k8-navy); border-color: var(--k8-navy); }
.page-link { color: var(--k8-navy); border-color: var(--k8-line); }

/* Status labels */
.label, .badge { border-radius: 4px; font-weight: 700; font-size: 12px; padding: 4px 8px; }
.status-active, .status-paid, .status-completed, .status-open, .status-answered, .label-success, .badge-success { background: var(--k8-green-tint) !important; color: var(--k8-green) !important; }
.status-pending, .status-customer-reply, .status-in-progress, .status-pending-transfer, .label-warning, .badge-warning { background: var(--k8-yellow-tint) !important; color: var(--k8-navy) !important; }
.status-unpaid, .status-overdue, .status-suspended, .status-expired, .status-fraud, .label-danger, .badge-danger { background: var(--k8-red-tint) !important; color: var(--k8-red) !important; }
.status-cancelled, .status-terminated, .status-closed, .status-refunded, .status-collections, .label-default, .badge-secondary { background: var(--k8-paper-3) !important; color: var(--k8-ink-muted) !important; }
.badge-info, .badge-primary { background: var(--k8-navy); color: #fff; }

/* Alerts */
.alert { border-radius: 8px; border: 1px solid var(--k8-line); color: var(--k8-navy); }
.alert-success { background: var(--k8-green-tint); border-color: #C6DECE; }
.alert-warning { background: var(--k8-yellow-tint); border-color: #F2DB97; }
.alert-danger { background: var(--k8-red-tint); border-color: #E8C4BC; }
.alert-info { background: var(--k8-paper-2); border-color: var(--k8-line); }
.alert a { color: var(--k8-navy); font-weight: 700; }

/* Nav tabs / pills */
.nav-tabs { border-bottom-color: var(--k8-line); }
.nav-tabs .nav-link { color: var(--k8-ink-muted); font-weight: 600; border: 0; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--k8-navy); background: transparent; box-shadow: inset 0 -2px 0 var(--k8-yellow); }
.nav-pills .nav-link.active { background: var(--k8-navy); }

/* Login / register */
.login-form .card, .card.mw-540 { border-radius: 8px; }
.login-form h6, .login-form .h3 { font-weight: 800; }

/* Footer */
footer.footer { background: var(--k8-navy); color: var(--k8-ink-on-navy); font-size: 14px; }
footer.footer a, footer.footer .nav-link { color: var(--k8-ink-on-navy); }
footer.footer a:hover, footer.footer .nav-link:hover { color: #fff; }
footer.footer .btn { background: transparent; border: 1px solid rgba(255,255,255,.25); color: #fff; }
footer.footer .copyright { color: var(--k8-ink-on-navy); }

/* Kre8iv utility bar (injected by includes/hooks/kre8iv_theme.php) */
.k8-util { background: var(--k8-navy); color: var(--k8-ink-on-navy); font-size: 13px; }
.k8-util .container { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between; align-items: center; padding-top: 8px; padding-bottom: 8px; }
.k8-util nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.k8-util a { color: var(--k8-ink-on-navy); text-decoration: none; }
.k8-util a:hover { color: #fff; }

/* ===== Store landing pages (SSL, SiteLock, CodeGuard, marketgoo, NordVPN, …) ===== */
.landing-page .hero, .landing-page .header, .landing-page .feature-hero { background: var(--k8-navy) !important; background-image: none !important; color: #fff; }
.landing-page .hero h1, .landing-page .hero h2 { color: #fff; }
.landing-page .btn-primary, .landing-page .btn-success { background: var(--k8-yellow); border-color: var(--k8-yellow); color: var(--k8-navy); }
.landing-page .pricing-card, .landing-page .plan, .landing-page .card { border-radius: 8px; border-color: var(--k8-line); }
.landing-page .popular-plan, .landing-page .plan.featured { border-color: var(--k8-navy); }

/* ===== Audited against installed Twenty-One (WHMCS 8.13.7) ===== */
/* Dashboard cards use .card-accent-{gold|green|red|blue} (3px coloured top) and .bg-color-* badges */
.card[class*="card-accent-"] { border-top: 1px solid var(--k8-line) !important; }
.card-header .badge[class*="bg-color-"], .badge[class*="bg-color-"] { background: var(--k8-navy) !important; color: #fff; }
.ticket-reply { border: 1px solid var(--k8-line); border-radius: 8px; background: #fff; overflow: hidden; }
.ticket-reply.staff { background: var(--k8-paper-2); }
.ticket-reply .posted-by { padding: 10px 16px; border-bottom: 1px solid var(--k8-line); font-size: 14px; color: var(--k8-ink-muted); }
.ticket-reply .posted-by-name { color: var(--k8-navy); font-weight: 700; }
.ticket-reply .rating span.star:hover:before, .ticket-reply .rating-done span.star.active:before { color: var(--k8-yellow); }
.kb-category { border-radius: 8px; }
.kb-category .card-title, .kb-article-item { color: var(--k8-navy); font-weight: 700; }
.kb-search .form-control { border-width: 1.5px; }
.announcements .announcement h2, .announcements .announcement .h2 { font-weight: 800; letter-spacing: -.02em; }
.status-pending-registration, .status-redemption, .status-grace, .status-pending-transfer { background: var(--k8-yellow-tint) !important; color: var(--k8-navy) !important; }

/* ===== Page-specific (from public Twenty-One; harmless if unused) ===== */
/* Product / service details */
.product-details .product-icon { background: var(--k8-paper-2); border: 1px solid var(--k8-line); border-radius: 8px; color: var(--k8-navy); }
.product-details .product-icon h3, .product-details .product-icon h4 { color: var(--k8-navy); font-weight: 800; }
.product-details .product-status { border-radius: 4px; font-weight: 700; text-transform: none; }
.product-status-active { background: var(--k8-green-tint); color: var(--k8-green); }
.product-status-pending { background: var(--k8-yellow-tint); color: var(--k8-navy); }
.product-status-suspended, .product-status-fraud { background: var(--k8-red-tint); color: var(--k8-red); }
.product-status-terminated, .product-status-cancelled { background: var(--k8-paper-3); color: var(--k8-ink-muted); }
.progress { background: var(--k8-paper-2); border-radius: 4px; height: 8px; }
.progress-bar { background: var(--k8-navy); }
.progress-bar.bg-danger, .progress-bar-danger { background: var(--k8-red); }
.module-client-area .btn, .cpanel-feature-row a { border-radius: 6px; }
.cpanel-usage-stats, .cpanel-feature-row { border-color: var(--k8-line); }

/* Domain details / DNS / nameservers */
.domain-details-tabs .nav-link, #tabs .nav-link { color: var(--k8-ink-muted); font-weight: 600; }
.domain-details-tabs .nav-link.active, #tabs .nav-link.active { color: var(--k8-navy); box-shadow: inset 0 -2px 0 var(--k8-yellow); }
.domain-renewals .card, .domain-renewal { border-color: var(--k8-line); }

/* Tickets */
.ticket-reply, .view-ticket .card { border: 1px solid var(--k8-line); border-radius: 8px; background: #fff; }
.ticket-reply.staff, .ticket-reply.requestor-type-operator, .ticket-reply .requestor-type-operator { background: var(--k8-paper-2); }
.ticket-reply .posted-by, .ticket-reply .user { color: var(--k8-navy); font-weight: 700; }
.ticket-reply .requestor-badge, .requestor-badge { background: var(--k8-navy); color: #fff; border-radius: 4px; font-weight: 700; }
.ticket-reply .message, .markdown-content { color: var(--k8-navy); font-size: 16px; line-height: 1.6; }
.ticket-subject, .ticket-number { font-weight: 800; }
.ticket-reply .attachments { border-top-color: var(--k8-line); }

/* Knowledgebase & announcements */
.kb-category, .kb-article-item, .announcement-single { border-color: var(--k8-line); }
.kb-category .kb-category-title, .kb-article-title, .announcement-single h3, .announcement-single h1 { color: var(--k8-navy); font-weight: 800; }
.kb-article-content, .announcement-single .card-body { font-size: 17px; line-height: 1.65; }
.kb-search .form-control, .kb-search .btn { min-height: 48px; }
.kb-rate-article .btn { border: 1.5px solid var(--k8-navy); }

/* Network status */
.network-issue, .server-status { border-color: var(--k8-line); }
.network-issue .label, .network-issue .badge { text-transform: none; }

/* Account / security / 2FA */
.two-factor-auth .card, .twofa-setup { border-radius: 8px; }
.password-strength-meter .progress-bar { background: var(--k8-navy); }
.client-home-cards .card-header .card-title, .client-home-panels .panel-title { font-weight: 800; }

/* Login / register / password reset */
.login-form .card-body, .pwreset .card-body, #registration .card-body { padding: 32px; }
.providerLinkingFeedback, .social-signin-btns .btn { border-radius: 6px; }

/* Order complete / error pages */
.order-confirmation, .complete-order { font-weight: 800; }
.error-container h1, .error-page h1 { font-weight: 800; letter-spacing: -.04em; color: var(--k8-navy); }

/* Modals, popovers, tooltips */
.modal-content { border: 1px solid var(--k8-line); border-radius: 8px; }
.modal-header { background: #fff; border-bottom-color: var(--k8-line); }
.modal-title { font-weight: 800; }
.modal-footer { background: var(--k8-paper-2); border-top-color: var(--k8-line); }
.modal-header.bg-primary, .modal-header.panel-heading { background: var(--k8-navy) !important; color: #fff; }
.tooltip-inner { background: var(--k8-navy); }
.popover { border-color: var(--k8-line); border-radius: 8px; }
.cookie-consent, .cookie-consent-container { background: var(--k8-navy); color: var(--k8-ink-on-navy); }

/* ===== Login (login.tpl override) ===== */
.k8-auth { display: flex; flex-wrap: wrap; gap: 0; max-width: 1040px; margin: 8px auto 32px; background: #fff; border: 1px solid var(--k8-line); border-radius: 8px; overflow: hidden; }
.k8-auth-panel { flex: 1 1 340px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; background: linear-gradient(rgba(14,27,51,.82), rgba(14,27,51,.92)), var(--k8-navy) url("../img/login-bg.jpg") center / cover no-repeat; color: var(--k8-ink-on-navy); padding: clamp(28px, 4vw, 48px); }
.k8-auth-eyebrow { display: block; font-size: 14px; font-weight: 600; color: var(--k8-yellow); }
.k8-auth-title { margin: 12px 0 0; color: #fff; font-weight: 800; font-size: clamp(28px, 3vw, 38px); line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.k8-auth-points { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.k8-auth-points li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
.k8-auth-points li::before { content: "✓"; color: var(--k8-yellow); font-weight: 800; }
.k8-auth-panel-foot { display: flex; flex-wrap: wrap; gap: 6px 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.2); font-size: 14px; }
.k8-auth-panel-foot a { color: #fff; font-weight: 600; text-decoration: none; }
.k8-auth-panel-foot a:hover { color: var(--k8-yellow); }
.k8-auth-main { flex: 1 1 400px; padding: clamp(28px, 4vw, 52px); min-width: 0; }
.k8-auth-form { max-width: 420px; margin: 0 auto; }
.k8-auth-h1 { margin: 0; font-weight: 800; font-size: 32px; letter-spacing: -.03em; }
.k8-auth-sub { margin: 6px 0 24px; color: var(--k8-ink-muted); font-size: 15px; }
.k8-auth .form-group { margin-bottom: 16px; }
.k8-auth .form-control { height: auto; padding: 12px 14px; font-size: 16px; }
.k8-auth-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.k8-auth-forgot { font-size: 14px; font-weight: 600; }
.k8-auth .btn-reveal-pw { border: 1.5px solid var(--k8-line-strong); border-left: 0; border-radius: 0 6px 6px 0; background: #fff; color: var(--k8-ink-muted); }
.k8-auth .input-group .form-control:not(:last-child) { border-radius: 6px 0 0 6px; }
.k8-auth-remember { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 15px; margin: 4px 0 18px; }
.k8-auth-remember input { width: 18px; height: 18px; accent-color: var(--k8-navy); }
.k8-auth-captcha { margin-bottom: 16px; }
.k8-auth-submit { padding: 13px 18px; font-size: 16px; }
.k8-auth .social-signin-btns, .k8-auth .linked-accounts { margin-top: 18px; }
.k8-auth-foot { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--k8-line); font-size: 15px; color: var(--k8-ink-muted); }
.k8-auth-foot a { font-weight: 700; }


/* ===== Background patterns (match the marketing site; see DESIGN.md → Patterns) ===== */
#main-body { position: relative; isolation: isolate; }
#main-body::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: min(100%, 640px); z-index: -1; pointer-events: none;
  background-image: var(--k8-pat-dots); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 100% 0%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse 70% 80% at 100% 0%, #000 0%, transparent 72%); }
.master-breadcrumb { position: relative; isolation: isolate; }
.master-breadcrumb::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--k8-pat-grid); background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(to right, #000, transparent 70%); mask-image: linear-gradient(to right, #000, transparent 70%); }
footer.footer { position: relative; isolation: isolate; }
footer.footer::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--k8-pat-grid-navy); background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 100% 50%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse 70% 80% at 100% 50%, #000 0%, transparent 72%); }
.k8-auth-panel { background: var(--k8-pat-grid-navy), linear-gradient(rgba(14,27,51,.82), rgba(14,27,51,.92)), var(--k8-navy) url("../img/login-bg.jpg");
  background-size: 32px 32px, 32px 32px, cover, cover; background-position: 0 0, 0 0, center, center; background-repeat: repeat, repeat, no-repeat, no-repeat; }

/* ===== Mobile ===== */
@media (max-width: 767px) {
  /* iOS zooms into any field under 16px */
  input, select, textarea, .form-control, .custom-select { font-size: 16px !important; }
  .btn, .nav-link, .dropdown-item, .list-group-item { min-height: 44px; }
  .btn { display: inline-flex; align-items: center; justify-content: center; }
  .btn-sm { min-height: 40px; }
  h1, .h1 { font-size: 28px; }
  h2, .h2 { font-size: 24px; }
  .k8-util .container { justify-content: center; text-align: center; }
  .k8-util nav { justify-content: center; gap: 4px 16px; }
  .k8-util nav a { padding: 6px 0; }
  .k8-auth { margin: 0 -15px 24px; border-radius: 0; border-left: 0; border-right: 0; }
  .k8-auth-panel { gap: 24px; }
  .k8-auth-points { display: none; }
  .k8-auth-title { font-size: 24px; }
  .tiles .tile { padding: 14px; }
  .tiles .tile .stat { font-size: 32px; }
  .table-responsive, .dataTables_wrapper { -webkit-overflow-scrolling: touch; }
  .card-body { padding: 16px; }
  .ticket-reply .posted-by { padding: 10px 12px; }
  .master-breadcrumb .breadcrumb { padding-left: 0; padding-right: 0; white-space: nowrap; overflow-x: auto; flex-wrap: nowrap; }
}

/* Keep the account icon and dropdown chevron aligned and separated from cart. */
header.header .main-navbar-wrapper .wdes-account-area > a.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 10px;
    line-height: 1;
    vertical-align: middle;
}
header.header .main-navbar-wrapper .wdes-account-area > a.dropdown-toggle::after {
    display: inline-block;
    position: static;
    margin: 0;
    vertical-align: middle;
    flex: 0 0 auto;
    border-top: 4px solid currentColor;
    border-right: 4px solid transparent;
    border-bottom: 0;
    border-left: 4px solid transparent;
    transform: none;
}
header.header .main-navbar-wrapper .wdes-account-area {
    margin-right: 10px;
}