/* Ruk-Com: นำเฉพาะ design tokens จาก Ruk-Com Home มาใช้ ไม่ import CSS ทั้งเว็บ */
@import url('../fonts/fonts.css');

:root {
    --rk-blue: #2356e8;
    --rk-blue-hover: #1b43bd;
    --rk-blue-50: #f0f6ff;
    --rk-blue-100: #dbe8ff;
    --rk-blue-200: #bfd4ff;
    --rk-paper: #fff;
    --rk-surface: #f4f7fd;
    --rk-ink: #0b1730;
    --rk-text: #1e2a4a;
    --rk-muted: #54618a;
    --rk-line: #e5ecf7;
    --rk-line-strong: #cfd9ec;
    --rk-radius: 12px;
    --rk-radius-lg: 18px;
    --rk-shadow: 0 2px 4px rgba(20, 43, 115, .05), 0 6px 14px -4px rgba(20, 43, 115, .12);
    --rk-font: 'Plus Jakarta Sans', 'Anuphan', system-ui, sans-serif;
}

body.rukcom {
    --primary: var(--rk-blue);
    --primary-lifted: var(--rk-blue-hover);
    --primary-accented: #1a3691;
    font-family: var(--rk-font);
    font-size: 15px;
    line-height: 1.7;
    color: var(--rk-text);
    background: var(--rk-surface);
}
.rukcom h1, .rukcom h2, .rukcom h3, .rukcom h4, .rukcom h5, .rukcom h6 {
    font-family: var(--rk-font);
    color: var(--rk-ink);
    font-weight: 700;
    line-height: 1.45;
}
:where(.rukcom) a { color: var(--rk-blue); }
:where(.rukcom) a:hover { color: var(--rk-blue-hover); }
.rukcom .text-muted { color: var(--rk-muted) !important; }
.rukcom :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--rk-blue);
    outline-offset: 3px;
}
.rukcom #main-body { padding: 36px 0 56px; min-height: 60vh; }
.rukcom header.header { border-bottom: 1px solid var(--rk-line); }
.rukcom header.header > .navbar-light { padding: 18px 0; }
.rukcom header.header .logo-img { max-width: 186px; max-height: 42px; height: auto; }
.rukcom header.header .topbar { background: var(--rk-blue-50); padding: 8px 0; }
.rukcom header.header .topbar,
.rukcom header.header .topbar .btn,
.rukcom header.header .topbar .active-client .btn,
.rukcom header.header .topbar .active-client .input-group-text { color: var(--rk-muted); }
.rukcom header.header .topbar .btn.btn-active-client span { border-color: var(--rk-line-strong); }
.rukcom header.header .toolbar .nav-link { color: var(--rk-blue); border-color: var(--rk-blue-100); border-radius: var(--rk-radius); }
.rukcom header.header .search { border-color: var(--rk-line-strong); border-radius: var(--rk-radius); }
.rukcom header.header .search .btn { color: var(--rk-muted); }
.rukcom header.header .search:focus-within { border-color: var(--rk-blue); }
.rukcom header.header .main-navbar-wrapper { border-top: 1px solid var(--rk-line); }
.rukcom header.header .main-navbar-wrapper .navbar-collapse { padding: 8px 0; }
.rukcom header.header .navbar-nav a { color: var(--rk-text); font-weight: 600; }
.rukcom header.header .navbar-nav .nav-link { padding: 10px 14px; }
.rukcom header.header .navbar-nav a:hover,
.rukcom header.header .navbar-nav .active > a,
.rukcom header.header .dropdown-item.active,
.rukcom header.header .dropdown-item:active { background: var(--rk-blue-50); color: var(--rk-blue-hover); }
.rukcom .dropdown-menu { border: 1px solid var(--rk-line); border-radius: var(--rk-radius); box-shadow: var(--rk-shadow); }
.rukcom .master-breadcrumb { background: var(--rk-paper); border-bottom: 1px solid var(--rk-line); }
.rukcom .master-breadcrumb .breadcrumb { padding: 14px 0; background: transparent; }
.rukcom .breadcrumb-item.active { color: var(--rk-muted); }

/* คง Bootstrap grid, visibility, modal และ status variants ของ WHMCS */
.rukcom .card { border-left-color: var(--rk-line); border-right-color: var(--rk-line); border-bottom-color: var(--rk-line); border-radius: var(--rk-radius-lg); box-shadow: var(--rk-shadow); }
.rukcom .card:not([class*="card-accent-"]) { border-top-color: var(--rk-line); }
.rukcom .primary-content .card { margin-bottom: 22px; }
.rukcom .card-header { background: var(--rk-paper); border-bottom-color: var(--rk-line); padding: 18px 22px; }
.rukcom .card-header:first-child { border-radius: 17px 17px 0 0; }
.rukcom .card-footer { background: var(--rk-blue-50); border-top-color: var(--rk-line); padding: 16px 22px; }
.rukcom .card-footer:last-child { border-radius: 0 0 17px 17px; }
.rukcom .primary-content .card-body { padding: 24px; }
.rukcom .card-title { font-size: 17px; }
.rukcom .list-group-item { border-color: var(--rk-line); }
.rukcom a.list-group-item { color: var(--rk-text); }
.rukcom .list-group-item-action:hover { background: var(--rk-blue-50); }
.rukcom .list-group-item.active { background: var(--rk-blue); border-color: var(--rk-blue); color: #fff; }
.rukcom .sidebar .card-header { background: var(--rk-blue-50); }
.rukcom .sidebar .list-group-item { padding: 13px 20px; }

.rukcom .btn { font-family: var(--rk-font); border-radius: 999px; font-weight: 600; transition: background-color .15s, box-shadow .15s; }
.rukcom .btn-primary { background: var(--rk-blue); border-color: var(--rk-blue); color: #fff; box-shadow: 0 8px 24px -6px rgba(35, 86, 232, .28); }
.rukcom .btn-primary:hover,
.rukcom .btn-primary:focus,
.rukcom .btn-primary:not(:disabled):not(.disabled):active,
.rukcom .btn-primary:not(:disabled):not(.disabled).active { background: var(--rk-blue-hover); border-color: var(--rk-blue-hover); color: #fff; }
.rukcom .btn-primary:disabled, .rukcom .btn-primary.disabled { background: var(--rk-blue); border-color: var(--rk-blue); opacity: .65; }
.rukcom .btn-outline-primary { color: var(--rk-blue); border-color: var(--rk-blue); }
.rukcom .btn-outline-primary:hover,
.rukcom .btn-outline-primary:not(:disabled):not(.disabled):active,
.rukcom .btn-outline-primary:not(:disabled):not(.disabled).active { background: var(--rk-blue); border-color: var(--rk-blue); color: #fff; }
.rukcom .btn-default { color: var(--rk-text); background: var(--rk-paper); border-color: var(--rk-line-strong); }
.rukcom .btn-default:hover { color: var(--rk-blue-hover); background: var(--rk-blue-50); }
.rukcom .client-home-cards .card-header .btn-default { color: var(--rk-blue-hover); background: var(--rk-blue-50); }
.rukcom .client-home-cards .card-header .btn-default:hover { color: #fff; background: var(--rk-blue); }
.rukcom .form-control, .rukcom .custom-select, .rukcom .input-group-text { border-color: var(--rk-line-strong); border-radius: var(--rk-radius); }
.rukcom .form-control, .rukcom .custom-select { color: var(--rk-text); font-family: var(--rk-font); }
.rukcom .form-control::placeholder { color: var(--rk-muted); opacity: 1; }
.rukcom .form-control:focus { border-color: var(--rk-blue); box-shadow: 0 0 0 3px rgba(35, 86, 232, .12); }
.rukcom .input-group-text { background: var(--rk-blue-50); color: var(--rk-muted); }
.rukcom .input-group > .form-control:not(:first-child),
.rukcom .input-group > .input-group-append > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.rukcom .input-group > .form-control:not(:last-child),
.rukcom .input-group > .input-group-prepend > .input-group-text,
.rukcom .input-group > .input-group-prepend > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rukcom .form-control.is-invalid { border-color: #dc3545; }
.rukcom .form-control.is-valid { border-color: #28a745; }
.rukcom .login-form .card { border-top: 3px solid var(--rk-blue); }
.rukcom .login-form .btn-primary { padding: 10px 28px; }
.rukcom .nav-tabs { border-color: var(--rk-line); }
.rukcom .nav-tabs .nav-link.active { color: var(--rk-blue); border-color: var(--rk-line) var(--rk-line) #fff; }
.rukcom .page-item.active .page-link { background: var(--rk-blue); border-color: var(--rk-blue); }
.rukcom .table thead th { background: var(--rk-blue-50); color: var(--rk-ink); border-color: var(--rk-line); }
.rukcom .table td { border-color: var(--rk-line); }
.rukcom .table-hover tbody tr:hover { background: var(--rk-blue-50); }
.rukcom .modal-content { border-color: var(--rk-line); border-radius: var(--rk-radius-lg); box-shadow: var(--rk-shadow); }

.rukcom .tiles { background: transparent; }
.rukcom .tiles .row > div .tile { margin: 6px; padding: 24px 18px; border: 1px solid var(--rk-blue-100); border-radius: var(--rk-radius-lg); background: linear-gradient(140deg, #fff, var(--rk-blue-50)); box-shadow: var(--rk-shadow); }
.rukcom .tiles .tile:hover { background: var(--rk-blue-50); border-color: var(--rk-blue-200); text-decoration: none; }
.rukcom .tiles .tile .stat { color: var(--rk-ink); font-weight: 800; }
.rukcom .tiles .tile .title { color: var(--rk-muted); }
.rukcom .tiles .tile > i { color: var(--rk-blue); opacity: .8; }
.rukcom .action-icon-btns a { border-radius: var(--rk-radius-lg); background: var(--rk-paper); box-shadow: var(--rk-shadow); color: var(--rk-text); }
.rukcom .action-icon-btns a:hover { background: var(--rk-blue-50); }
.rukcom .action-icon-btns .ico-container { color: var(--rk-blue); }
.rukcom .home-domain-search { background: radial-gradient(ellipse at 90% 20%, #e0f2fe, transparent 58%), linear-gradient(#fff, var(--rk-blue-50)); color: var(--rk-ink); }
.rukcom footer.footer { background: var(--rk-paper); border-top: 1px solid var(--rk-line); color: var(--rk-muted); padding: 32px 0; }
.rukcom footer.footer .btn { color: var(--rk-muted); }
.rukcom footer.footer .copyright { color: var(--rk-muted); }

@media (min-width: 1200px) {
    .rukcom > header .container, .rukcom > nav .container,
    .rukcom #main-body > .container, .rukcom footer > .container { max-width: 1240px; }
}
@media (max-width: 575.98px) {
    .rukcom #main-body { padding: 22px 0 36px; }
    .rukcom header.header .logo-img { max-width: 145px; }
    .rukcom header.header .navbar-nav .nav-link { padding: 9px 10px; }
    .rukcom .tiles .row > div .tile { padding: 18px 12px; }
    .rukcom .primary-content .card-body { padding: 20px; }
    .rukcom .form-control { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .rukcom .btn, .rukcom .tiles .tile, .rukcom .tiles .tile i { transition: none; }
    .rukcom .tiles .tile:hover i { font-size: 55px; }
}

/* Native WHMCS surfaces — visual rules only.
   Keep Bootstrap visibility/grid, plugin control geometry, modal positioning,
   editor fullscreen, gateway iframe sizing and validation display untouched. */
.rukcom .primary-content .form-group { margin-bottom: 1.25rem; }
.rukcom .primary-content .form-group > label,
.rukcom .modal-body .form-group > label,
.rukcom .form-control-label,
.rukcom .control-label,
.rukcom .col-form-label { color: var(--rk-text); font-weight: 600; }
.rukcom .form-text,
.rukcom .help-block,
.rukcom .markdown-editor-status { color: var(--rk-muted); font-size: .875rem; line-height: 1.65; }
.rukcom .form-control,
.rukcom .custom-select { background-color: var(--rk-paper); }
.rukcom .form-control:disabled,
.rukcom .form-control[readonly],
.rukcom .custom-select:disabled { background-color: #edf1f7; color: var(--rk-muted); }
.rukcom textarea.form-control:not(.markdown-editor) { line-height: 1.75; }
.rukcom .custom-select:focus { border-color: var(--rk-blue); box-shadow: 0 0 0 3px rgba(35, 86, 232, .12); }
.rukcom .has-error .form-control,
.rukcom .form-control.is-invalid,
.rukcom .custom-select.is-invalid,
.rukcom .was-validated .form-control:invalid,
.rukcom .was-validated .custom-select:invalid { border-color: #c63545; }
.rukcom .has-error .form-control:focus,
.rukcom .form-control.is-invalid:focus,
.rukcom .custom-select.is-invalid:focus,
.rukcom .was-validated .form-control:invalid:focus,
.rukcom .was-validated .custom-select:invalid:focus { box-shadow: 0 0 0 3px rgba(198, 53, 69, .14); }
.rukcom .form-control.is-valid:focus,
.rukcom .custom-select.is-valid:focus,
.rukcom .was-validated .form-control:valid:focus,
.rukcom .was-validated .custom-select:valid:focus { border-color: #21805b; box-shadow: 0 0 0 3px rgba(33, 128, 91, .14); }
.rukcom .invalid-feedback,
.rukcom .field-error-msg,
.rukcom .has-error .help-block { color: #b22f3e; font-size: .875rem; }
.rukcom .valid-feedback { color: #21694c; font-size: .875rem; }

/* Native checkboxes keep their Bootstrap/iCheck/toggle positioning and sizing. */
.rukcom .form-check-input { accent-color: var(--rk-blue); }
.rukcom .form-check-label,
.rukcom label.form-check,
.rukcom .controls.form-check > label { line-height: 1.75; color: var(--rk-text); font-weight: 400; }
.rukcom #invitePermissions { padding: 18px; border: 1px solid var(--rk-line); border-radius: var(--rk-radius); background: var(--rk-blue-50); }
.rukcom .twofa-module { border-color: var(--rk-line-strong); border-radius: var(--rk-radius); background: var(--rk-paper); }
.rukcom .twofa-module.active { border-color: var(--rk-blue); background: var(--rk-blue-50); }
.rukcom .twofa-module:focus-within { outline: 2px solid var(--rk-blue); outline-offset: 3px; }
.rukcom .twofa-setup .activation-msg { border-color: var(--rk-blue-200); border-radius: var(--rk-radius); background: var(--rk-blue-50); color: var(--rk-text); }
.rukcom .twofa-setup .backup-code { border: 1px solid var(--rk-line); border-radius: var(--rk-radius); background: var(--rk-surface); color: var(--rk-ink); overflow-wrap: anywhere; }

/* Join grouped controls: standalone buttons remain pills; contiguous edges do not. */
.rukcom .input-group > .custom-select:not(:first-child),
.rukcom .input-group > .input-group-append > .input-group-text,
.rukcom .input-group > .input-group-append > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.rukcom .input-group > .custom-select:not(:last-child),
.rukcom .input-group > .input-group-prepend > .input-group-text,
.rukcom .input-group > .input-group-prepend > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rukcom .input-group > .input-group-prepend > .btn:not(:first-child),
.rukcom .input-group > .input-group-prepend > .input-group-text:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.rukcom .input-group > .input-group-append > .btn:not(:last-child),
.rukcom .input-group > .input-group-append > .input-group-text:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rukcom .btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.rukcom .btn-group > .btn-group:not(:last-child) > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rukcom .btn-group > .btn:not(:first-child),
.rukcom .btn-group > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.rukcom .btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),
.rukcom .btn-group-vertical > .btn-group:not(:last-child) > .btn { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.rukcom .btn-group-vertical > .btn:not(:first-child),
.rukcom .btn-group-vertical > .btn-group:not(:first-child) > .btn { border-top-right-radius: 0; border-top-left-radius: 0; }

/* Alerts retain success/warning/danger semantics and WHMCS visibility hooks. */
.rukcom .alert { border-radius: var(--rk-radius); line-height: 1.75; }
.rukcom .alert-info { color: #20467f; border-color: #bfd4f2; background-color: var(--rk-blue-50); }
.rukcom .alert-success { color: #21694c; border-color: #bde1cd; background-color: #eff9f3; }
.rukcom .alert-warning { color: #805315; border-color: #efd6a9; background-color: #fff7e8; }
.rukcom .alert-danger { color: #9c3040; border-color: #edc1c8; background-color: #fff1f3; }
.rukcom .alert .alert-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.rukcom .alert p:last-child,
.rukcom .alert ul:last-child { margin-bottom: 0; }
.rukcom .alert .close { color: inherit; }

/* Tabs wrap using Bootstrap flex; do not replace tab-pane visibility rules. */
.rukcom .nav-tabs { gap: 4px; }
.rukcom .nav-tabs .nav-link { border-radius: 12px 12px 0 0; padding: 11px 16px; color: var(--rk-muted); font-weight: 600; }
.rukcom .nav-tabs .nav-link:not(.disabled):not(.active):hover { border-color: var(--rk-line); background-color: var(--rk-blue-50); color: var(--rk-blue-hover); }
.rukcom .nav-tabs .nav-link.active,
.rukcom .nav-tabs .nav-item.show .nav-link { background-color: var(--rk-paper); color: var(--rk-blue); border-color: var(--rk-line) var(--rk-line) var(--rk-paper); }
.rukcom .nav-tabs .nav-link.disabled { color: #727b8d; }
.rukcom .nav-pills .nav-link { border-radius: 999px; }
.rukcom .nav-pills .nav-link.active,
.rukcom .nav-pills .show > .nav-link { background-color: var(--rk-blue); color: #fff; }
.rukcom .page-link { color: var(--rk-blue); border-color: var(--rk-line); }
.rukcom .page-link:hover { background-color: var(--rk-blue-50); color: var(--rk-blue-hover); border-color: var(--rk-blue-200); }
.rukcom .page-item.disabled .page-link { color: var(--rk-muted); background-color: var(--rk-surface); border-color: var(--rk-line); }
.rukcom .table:not(.table-sm) > thead > tr > th,
.rukcom .table:not(.table-sm) > tbody > tr > th,
.rukcom .table:not(.table-sm) > tbody > tr > td { padding: 14px 16px; }
.rukcom .table th { font-weight: 600; }
.rukcom .table td { vertical-align: middle; }
.rukcom .table td small { color: var(--rk-muted); }
.rukcom .table td .btn { margin-top: 3px; margin-bottom: 3px; }
.rukcom .dataTables_wrapper .dataTables_info,
.rukcom .dataTables_wrapper .dataTables_length,
.rukcom .dataTables_wrapper .dataTables_filter { color: var(--rk-muted); }

/* Bootstrap owns modal positioning, focus, scroll, backdrop and animation. */
.rukcom .modal-header { border-bottom-color: var(--rk-line); padding: 20px 24px; border-radius: 17px 17px 0 0; }
.rukcom .modal-title { color: var(--rk-ink); font-size: 20px; line-height: 1.5; overflow-wrap: anywhere; }
.rukcom .modal-body { padding: 24px; }
.rukcom .modal-footer { padding: 16px 24px; border-top-color: var(--rk-line); border-radius: 0 0 17px 17px; background-color: var(--rk-blue-50); }
.rukcom .modal-footer > .btn { white-space: normal; }
.rukcom .modal-header .close { color: var(--rk-muted); opacity: 1; text-shadow: none; }
.rukcom .modal-header .close:hover { color: var(--rk-blue); }
.rukcom .modal-body .form-group:last-child { margin-bottom: 0; }

/* File input stays transparent and native; label dimensions remain Bootstrap's. */
.rukcom .custom-file-label { color: var(--rk-muted); background-color: var(--rk-paper); border-color: var(--rk-line-strong); border-radius: var(--rk-radius); }
.rukcom .custom-file-label::after { color: var(--rk-blue-hover); background-color: var(--rk-blue-50); border-left-color: var(--rk-line); border-radius: 0 11px 11px 0; }
.rukcom .custom-file-input:focus ~ .custom-file-label { border-color: var(--rk-blue); box-shadow: 0 0 0 3px rgba(35, 86, 232, .12); }
.rukcom .custom-file-input:disabled ~ .custom-file-label { color: var(--rk-muted); background-color: #edf1f7; }
.rukcom .input-group > .custom-file:not(:last-child) .custom-file-label,
.rukcom .input-group > .custom-file:not(:last-child) .custom-file-label::after { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rukcom .input-group > .custom-file:not(:first-child) .custom-file-label { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.rukcom #fileUploadsContainer .attachment-group { margin-top: 8px; }
.rukcom .view-ticket .posted-by { background-color: var(--rk-blue-50); color: var(--rk-muted); }
.rukcom .view-ticket .posted-by-name { color: var(--rk-ink); }
.rukcom .view-ticket .attachments { border-top-color: var(--rk-blue-200); }
.rukcom .view-ticket .attachment-list li { max-width: 100%; }
.rukcom .view-ticket .attachment-list li span { border-color: var(--rk-line); border-radius: var(--rk-radius); overflow-wrap: anywhere; }
.rukcom .view-ticket .attachment-list li figure { background-color: var(--rk-blue-50); color: var(--rk-blue); }

/* Never set editor display/height/overflow: plugin fullscreen and preview own them. */
.rukcom .md-editor,
.rukcom .md-editor.active { border-color: var(--rk-line-strong); border-radius: var(--rk-radius); }
.rukcom .md-editor:focus-within { border-color: var(--rk-blue); box-shadow: 0 0 0 3px rgba(35, 86, 232, .12); }
.rukcom .md-editor > .btn-toolbar { border-radius: 11px 11px 0 0; }
.rukcom .md-editor .btn-toolbar .btn { border-radius: 6px; box-shadow: none; }
.rukcom .md-editor .btn-toolbar .btn-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.rukcom .md-editor .btn-toolbar .btn-group > .btn:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rukcom .md-editor > textarea.markdown-editor { border-radius: 0; }
.rukcom .md-editor .markdown-editor-status { padding: 6px 12px; }

/* Gateway-generated inputs/iframes retain background icons, dimensions and visibility.
   No iframe, .iframe-input-container, .auth3d-area or #paymentGatewayInput rules. */
@media (max-width: 575.98px) {
    .rukcom .modal-header,
    .rukcom .modal-body { padding: 18px; }
    .rukcom .modal-footer { padding: 14px 18px; }
    .rukcom .modal-title { font-size: 18px; }
    .rukcom .primary-content .form-group { margin-bottom: 1.125rem; }
    .rukcom .nav-tabs .nav-link { padding: 10px 12px; }
    .rukcom .table:not(.table-sm) > thead > tr > th,
    .rukcom .table:not(.table-sm) > tbody > tr > th,
    .rukcom .table:not(.table-sm) > tbody > tr > td { padding: 12px; }
}
/* Validation takes precedence over the file picker's ordinary focus treatment. */
.rukcom .custom-file-input.is-invalid ~ .custom-file-label,
.rukcom .was-validated .custom-file-input:invalid ~ .custom-file-label { border-color: #c63545; }
.rukcom .custom-file-input.is-invalid:focus ~ .custom-file-label,
.rukcom .was-validated .custom-file-input:invalid:focus ~ .custom-file-label { border-color: #c63545; box-shadow: 0 0 0 3px rgba(198, 53, 69, .14); }
.rukcom .custom-file-input.is-valid ~ .custom-file-label,
.rukcom .was-validated .custom-file-input:valid ~ .custom-file-label { border-color: #21805b; }
.rukcom .custom-file-input.is-valid:focus ~ .custom-file-label,
.rukcom .was-validated .custom-file-input:valid:focus ~ .custom-file-label { border-color: #21805b; box-shadow: 0 0 0 3px rgba(33, 128, 91, .14); }

/* Native user-management confirmation headers carry Bootstrap utility !important.
   Match the white Home modal surface without changing their classes or behavior. */
.rukcom .modal-header.bg-primary.text-light {
    background-color: var(--rk-paper) !important;
    color: var(--rk-text) !important;
}
.rukcom .modal-header.bg-primary.text-light .modal-title { color: var(--rk-ink); }
.rukcom .modal-header.bg-primary.text-light .close { color: var(--rk-muted); }
.rukcom .modal-header.bg-primary.text-light .close:hover { color: var(--rk-blue); }

/* Standalone WHMCS entry points do not pass through the client header. */
body.rukcom.rk-document { background: var(--rk-blue-50); }
.rukcom.rk-document .invoice-container { border: 1px solid var(--rk-line); border-radius: 18px; box-shadow: var(--rk-shadow); }
.rukcom.rk-document .invoice-header h3 { font-size: 24px; }
.rukcom.rk-document .table-responsive { border-radius: 12px; }
.rukcom.rk-oauth section#header { background: var(--rk-paper); border-bottom-color: var(--rk-line); padding: 20px 0; }
.rukcom.rk-oauth section#header img { max-width: 186px; max-height: 42px; height: auto; }
.rukcom.rk-oauth section#content { margin: 32px 16px; }
.rukcom.rk-oauth .content-container { border: 1px solid var(--rk-line); border-radius: 18px; box-shadow: var(--rk-shadow); }
.rukcom.rk-oauth .content-padded { padding: 28px; }
.rukcom.rk-oauth .action-buttons { border-color: var(--rk-line); background: var(--rk-blue-50); border-radius: 0 0 17px 17px; padding: 16px; }
body.rukcom.rk-email-popup { padding: 20px; background: var(--rk-blue-50); }
.rukcom.rk-email-popup .popup-header-padding { overflow-wrap: anywhere; }
.rukcom.rk-email-popup .card { max-width: 1000px; margin: 0 auto; }
@media (max-width: 575.98px) {
    .rukcom.rk-document .invoice-container { margin: 12px 8px; padding: 16px 12px; }
    .rukcom.rk-oauth .content-padded { padding: 20px 16px; }
    body.rukcom.rk-email-popup { padding: 10px; }
}
@media print {
    body.rukcom.rk-document { background: #fff; color: #000; }
    .rukcom.rk-document .invoice-container { border: 0; border-radius: 0; box-shadow: none; margin: 0; padding: 0; width: 100%; max-width: none; }
}

/* Native Bootstrap dialogs: constrain the frame, scroll only the body. */
.rukcom .modal-dialog { margin-top: 20px; margin-bottom: 20px; }
.rukcom .modal-content { max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow: hidden; border-radius: 24px; box-shadow: 0 24px 80px rgba(11, 33, 70, .2); }
.rukcom .modal-header { flex-shrink: 0; background-image: linear-gradient(115deg, #fff 25%, #f0f7ff); border-radius: 0; }
.rukcom .modal-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; background-image: linear-gradient(180deg, #fbfdff, #fff 150px); }
.rukcom .modal-footer { flex-shrink: 0; background-color: #fbfdff; border-radius: 0; box-shadow: 0 -8px 20px rgba(35, 67, 108, .02); }
.rukcom .modal-header .close { width: 40px; height: 40px; margin: -6px -8px -6px 12px; padding: 0; border: 1px solid #dbe6f8; border-radius: 50%; background: rgba(255, 255, 255, .7); }
@media (max-width: 575.98px) {
    .rukcom .modal-dialog { margin: 10px; }
    .rukcom .modal-content { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); border-radius: 20px; }
    .rukcom .modal-header .close { min-width: 44px; min-height: 44px; }
}
@media (max-height: 500px) {
    .rukcom .modal-header, .rukcom .modal-footer { padding: 12px 18px; }
    .rukcom .modal-body { padding: 16px 18px; }
}

/* Minimal typography and quiet surface depth; WHMCS control states remain intact. */
body.rukcom { --rk-font: 'Anuphan', 'Plus Jakarta Sans', system-ui, sans-serif; background: radial-gradient(ellipse 75% 430px at 100% 0, #e9f4ff, transparent 80%), #fbfcff; }
.rukcom .primary-content h1, .rukcom .primary-content h2, .rukcom .primary-content h3, .rukcom .modal-title { font-weight: 600; letter-spacing: -.15px; }
.rukcom .primary-content .form-group > label, .rukcom .modal-body .form-group > label { font-weight: 500; margin-bottom: 9px; }
.rukcom .primary-content .form-group { margin-bottom: 1.4rem; }
.rukcom .primary-content .card { border-color: #e4ebf5; box-shadow: 0 4px 18px -8px rgba(25, 59, 104, .07); }
.rukcom .btn { font-weight: 500; transition: background-color .18s, border-color .18s, box-shadow .18s; }
.rukcom .btn-primary { box-shadow: 0 4px 12px -5px rgba(35, 86, 232, .3); }
.rukcom .modal-content { border-color: #e0e8f5; box-shadow: 0 32px 90px -20px rgba(25, 59, 104, .23), 0 3px 12px rgba(18, 37, 72, .04); }
.rukcom .modal-header { background-image: linear-gradient(110deg, #fff, #f4f9ff); border-color: #e8eef7; }
.rukcom .modal-body { padding: 28px; background: #fff; }
.rukcom .modal-footer { background: #fcfdff; border-color: #e8eef7; }
@media (hover: hover) and (pointer: fine) {
    .rukcom .btn-primary:hover { box-shadow: 0 8px 20px -7px rgba(35, 86, 232, .35); }
}
@media (max-width: 575.98px) { .rukcom .modal-body { padding: 22px 18px; } }
@media (max-height: 500px) { .rukcom .modal-body { padding: 18px; } }

/* Native utilities and locale fallback: compact frame, native core events. */
.rukcom .rk-utility-icon { width: 20px; height: 20px; vertical-align: middle; flex-shrink: 0; }
.rukcom #accountNotifications { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; }
.rukcom .rk-notification-count { font-size: 12px; font-variant-numeric: tabular-nums; }
.rukcom .rk-locale-toolbar[hidden] { display: none !important; }
.rukcom header.header .toolbar { flex-direction: row; align-items: center; gap: 8px; }
.rukcom header.header .toolbar > .nav-item { margin-left: 0 !important; }
.rukcom .rk-language-pills { display: flex; flex-wrap: nowrap; gap: 4px; max-width: 320px; padding: 3px; border: 1px solid var(--rk-line); border-radius: 999px; background: var(--rk-paper); overflow-x: auto; scrollbar-width: thin; }
.rukcom .rk-language-pills > .rk-language-pill { flex: 0 0 auto; }
.rukcom .rk-language-pills .rk-language-pill:focus-visible { outline-offset: -3px; outline-color: var(--rk-blue); }
.rukcom .rk-language-pills .rk-language-pill.active:focus-visible { outline-color: white; }
.rukcom .rk-language-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; padding: 7px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--rk-text); font: 500 12px var(--rk-font); cursor: pointer; }
.rukcom .rk-language-pill:hover { background: var(--rk-blue-50); }
.rukcom .rk-language-pill.active { color: white; background: var(--rk-blue); border-color: var(--rk-blue); box-shadow: 0 1px 3px rgba(35, 86, 232, .22); }
.rukcom .rk-locale-flag { display: block; width: 24px; height: 16px; flex: 0 0 24px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(11, 23, 48, .12); }
.rukcom .modal-localisation .modal-dialog { max-width: 520px; min-height: calc(100% - 40px); display: flex; align-items: center; }
.rukcom .modal-localisation .modal-content { background: var(--rk-paper); }
.rukcom .modal-localisation .modal-header { align-items: center; padding: 18px 22px; }
.rukcom .modal-localisation .modal-body { padding: 18px 22px; text-align: left; }
.rukcom .modal-localisation .modal-footer { padding: 14px 22px; }
.rukcom .modal-localisation .modal-footer .btn { min-width: 104px; min-height: 44px; padding: 9px 22px; background: var(--rk-blue); border-color: var(--rk-blue); color: #fff; }
.rukcom .modal-localisation .modal-footer .btn:hover { background: var(--rk-blue-hover); border-color: var(--rk-blue-hover); }
.rukcom .modal-localisation .modal-title { margin: 0; font-size: 19px; }
.rukcom .modal-localisation .h5 { color: var(--rk-ink); padding: 20px 0 8px !important; font-size: 15px; }
.rukcom .modal-localisation .close.text-light { position: static; color: var(--rk-muted) !important; opacity: 1; text-shadow: none; flex-shrink: 0; }
.rukcom .modal-localisation .item-selector { margin: -4px; }
.rukcom .modal-localisation .item-selector > .col-6 { padding: 4px; }
.rukcom .modal-localisation .item-selector > input[name="language"] ~ .col-6 { flex: 0 0 100%; max-width: 100%; }
.rukcom .modal-localisation .item-selector .item { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px; margin: 0; color: var(--rk-text); background: var(--rk-paper); border: 1px solid var(--rk-line); border-radius: 10px; text-decoration: none; font-size: 14px; line-height: 1.5; text-align: left; overflow-wrap: anywhere; }
.rukcom .modal-localisation .item-selector .item:hover { color: var(--rk-blue); background: var(--rk-blue-50); }
.rukcom .modal-localisation .item-selector .item.active { color: var(--rk-blue-hover); background: var(--rk-blue-50); border-color: var(--rk-blue); box-shadow: none; }
.rukcom .rk-locale-check { width: 18px; height: 18px; flex: 0 0 18px; margin-left: auto; visibility: hidden; }
.rukcom .item.active .rk-locale-check { visibility: visible; }
.rukcom .rk-fallback-options { display: flex; flex-wrap: wrap; gap: 8px; }
.rukcom .rk-locale-fallback { display: grid; gap: 10px; max-width: 520px; padding: 24px; }
.rukcom .sidebar .card { border: 1px solid var(--rk-line); box-shadow: none; border-radius: 12px; }
.rukcom .sidebar .card-header { padding: 13px 16px; background: transparent; border-bottom: 0; }
.rukcom .sidebar .card-title { font-size: 15px; font-weight: 600; }
.rukcom .sidebar .list-group-item { padding: 11px 16px; border-color: var(--rk-line); font-size: 14px; }
.rukcom .sidebar .list-group-item.active { color: var(--rk-blue-hover); background: var(--rk-blue-50); border-color: var(--rk-line); font-weight: 600; }
.rukcom .sidebar .list-group-item.active .badge { color: var(--rk-blue-hover); background: var(--rk-blue-100); }
.rukcom .action-icon-btns a { box-shadow: none; border: 1px solid var(--rk-line); }
.rukcom .login-form .card { border: 1px solid var(--rk-line); box-shadow: none; margin-left: auto; margin-right: auto; }
.rukcom .login-form .card-body { padding-top: 32px !important; padding-bottom: 28px !important; }
.rukcom .login-form .h3 { font-size: 27px; font-weight: 600; }
.rukcom .login-form .input-group-text { background: transparent; }
/* Focus ring is drawn inside the field: an outline outside the group was clipped by the card body (overflow:auto).
   The outer edges turn 2px (border + inset shadow); the seams between icon, input and reveal button stay light.
   #rk-main-content outranks form-polish.css (.rk-native :is(#rk-main-content,…) .form-control:focus, outer 3px ring). */
.rukcom .login-form .input-group:focus-within { --rk-login-focus: var(--rk-blue); }
.rukcom #rk-main-content .login-form .input-group:focus-within > .form-control:focus { outline: none; background-color: #fff; }
.rukcom .login-form .input-group:focus-within .input-group-text,
.rukcom #rk-main-content .login-form .input-group:focus-within > .form-control,
.rukcom .login-form .input-group:focus-within .btn-reveal-pw { border-color: var(--rk-login-focus); }
.rukcom .login-form .input-group:focus-within .input-group-text { border-right-color: var(--rk-line); box-shadow: inset 1px 0 0 var(--rk-login-focus), inset 0 1px 0 var(--rk-login-focus), inset 0 -1px 0 var(--rk-login-focus); }
.rukcom #rk-main-content .login-form .input-group:focus-within > .form-control { border-left-color: var(--rk-line); box-shadow: inset 0 1px 0 var(--rk-login-focus), inset 0 -1px 0 var(--rk-login-focus); }
.rukcom #rk-main-content .login-form .input-group:focus-within > .form-control:last-child { box-shadow: inset 0 1px 0 var(--rk-login-focus), inset 0 -1px 0 var(--rk-login-focus), inset -1px 0 0 var(--rk-login-focus); }
.rukcom #rk-main-content .login-form .input-group:focus-within > .form-control:not(:last-child) { border-right-color: var(--rk-line); }
.rukcom .login-form .input-group:focus-within .btn-reveal-pw { box-shadow: inset 0 1px 0 var(--rk-login-focus), inset 0 -1px 0 var(--rk-login-focus), inset -1px 0 0 var(--rk-login-focus); }
/* Reveal button matched the 12px field corners, not a pill. */
.rukcom .login-form .btn-reveal-pw { border-radius: 0 12px 12px 0; }
.rukcom .login-form .has-error .input-group:focus-within,
.rukcom .login-form .input-group:focus-within:has(.form-control.is-invalid),
.rukcom .login-form.was-validated .input-group:focus-within:has(.form-control:invalid) { --rk-login-focus: #c63545; }
.rukcom .login-form .input-group:focus-within:has(.form-control.is-valid),
.rukcom .login-form.was-validated .input-group:focus-within:has(.form-control:valid) { --rk-login-focus: #21805b; }
.rukcom .login-form .form-control { min-height: 48px; }
.rukcom .login-form .btn-reveal-pw { min-width: 48px; }
.rukcom .login-form .card-body > .float-left { float: none !important; }
.rukcom .login-form #login { width: 100%; min-height: 48px; }
.rukcom .login-form .card-body > .text-right { text-align: left !important; margin: 18px 0 0 22px; }
.rukcom .login-form .card-footer { text-align: center; background: transparent; padding-top: 18px; padding-bottom: 18px; }
@media (max-width: 767.98px) {
    .rukcom header.header > .navbar-light { padding: 12px 0; }
    .rukcom header.header .navbar-brand { margin-right: 8px !important; }
    .rukcom header.header .logo-img { max-width: 118px; }
    .rukcom header.header .toolbar { gap: 4px; max-width: 100%; }
    .rukcom .rk-language-pills { max-width: 128px; }
    .rukcom header.header .toolbar .nav-link { padding: 9px 7px; }
    .rukcom header.header .navbar-light > .container { row-gap: 10px; }
    .rukcom .modal-localisation .modal-dialog { margin-left: auto; margin-right: auto; width: calc(100% - 20px); min-height: calc(100% - 20px); }
    .rukcom .modal-localisation .modal-body, .rukcom .modal-localisation .modal-header { padding: 16px; }
}
@media (max-width: 359.98px) { .rukcom .rk-language-pills { max-width: 112px; } .rukcom header.header .logo-img { max-width: 96px; } .rukcom .rk-language-pill { min-width: 32px; padding: 5px; } }
@media (prefers-reduced-motion: reduce) { .rukcom .btn { transition: none; } }
/* Cookie notice bar + locked "necessary cookies" field (rukcom-consent-fields.js) */
.rukcom .rk-cookie-bar { position: fixed; z-index: 1040; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px 16px; max-width: 960px; margin: 0 auto; padding: 12px 16px; border: 1px solid #d6dcf0; border-radius: 12px; background: #fff; box-shadow: 0 8px 28px rgba(16, 32, 84, .16); color: #2b3553; font-size: 14px; }
.rukcom .rk-cookie-bar[hidden] { display: none; }
.rukcom .rk-cookie-bar-text { flex: 1 1 auto; margin: 0; }
.rukcom .rk-cookie-bar-text a { color: #1b43bd; text-decoration: underline; }
.rukcom .rk-cookie-bar .btn { flex: 0 0 auto; }
@media (max-width: 575.98px) { .rukcom .rk-cookie-bar { flex-direction: column; align-items: stretch; } }
.rukcom input.rk-cf-locked { opacity: .6; cursor: not-allowed; }
/* In the cart the bar sits in the page flow so it never covers checkout buttons. */
.rukcom.rk-cart .rk-cookie-bar { position: static; margin: 16px auto; box-shadow: none; }
/* PDPA consent page (modules/addons/rukcomconsent/templates/clientarea.tpl) uses Bootstrap 3 panels and Lagom
   switches; lagom2 supplied those styles, so the rukcom theme provides equivalents scoped to that page. */
.rukcom .rcc-prefs .panel { margin-bottom: 20px; border: 1px solid #e3e8f4; border-radius: 12px; background: #fff; }
.rukcom .rcc-prefs .panel-heading { padding: 14px 18px; border-bottom: 1px solid #eef1f6; border-radius: 12px 12px 0 0; }
.rukcom .rcc-prefs .panel-title { margin: 0; font-size: 17px; font-weight: 600; }
.rukcom .rcc-prefs .panel-body { padding: 16px 18px; }
.rukcom .rcc-prefs .switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.rukcom .rcc-prefs .switch__checkbox { position: absolute; width: 1px; height: 1px; opacity: 0; }
.rukcom .rcc-prefs .switch__container { position: relative; display: inline-block; width: 44px; height: 24px; border-radius: 999px; background: #cbd2e1; transition: background-color .15s; }
.rukcom .rcc-prefs .switch__handle { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 32, 84, .25); transition: transform .15s; }
.rukcom .rcc-prefs .switch__checkbox:checked + .switch__container { background: #1b43bd; }
.rukcom .rcc-prefs .switch__checkbox:checked + .switch__container .switch__handle { transform: translateX(20px); }
.rukcom .rcc-prefs .switch__checkbox:focus-visible + .switch__container { outline: 2px solid #1b43bd; outline-offset: 2px; }
.rukcom .rcc-prefs .rcc-switch-locked .switch__checkbox:checked + .switch__container { background: #2aaa7b; }
@media (prefers-reduced-motion: reduce) { .rukcom .rcc-prefs .switch__container, .rukcom .rcc-prefs .switch__handle { transition: none; } }