/* Cross-page visual QA, 2026-10-07. Native controls, states and vendor output remain authoritative. */
.rk-native .rk-page-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:2px 0 30px;min-width:0}
.rk-native .rk-page-intro h1{margin:0;color:#0b1730;font:600 30px/1.45 'Anuphan',sans-serif;letter-spacing:-.4px;overflow-wrap:anywhere}
.rk-native .rk-page-intro .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 20px;flex-shrink:0;font-size:14px}
.rk-native .rk-page-intro svg{width:18px;height:18px;flex:0 0 18px}
.rk-native #rk-main-content:not([data-rk-page="clientareahome"])>.card,.rk-native #rk-main-content:not([data-rk-page="clientareahome"])>form>.card{border:1px solid #e4ebf6;border-radius:20px;background:#fff;box-shadow:0 8px 28px -26px #1b3d7040;margin-bottom:26px}
.rk-native #rk-main-content:not([data-rk-page="clientareahome"])>.card>.card-body,.rk-native #rk-main-content:not([data-rk-page="clientareahome"])>form>.card>.card-body{padding:28px}
.rk-native #rk-main-content:not([data-rk-page="clientareahome"])>.card .card-title,.rk-native #rk-main-content:not([data-rk-page="clientareahome"])>form>.card .card-title{font-size:19px;line-height:1.6;margin-bottom:24px;color:#0b1730}
.rk-native #rk-main-content[data-rk-page="user-password"]>.card>.card-body>.card-title{display:none}
.rk-native #rk-main-content[data-rk-page="announcements"]>.card>.card-body>.card-title{display:none}
.rk-native #rk-main-content:not([data-rk-page="clientareahome"]) .form-group{margin-bottom:22px}
.rk-native #rk-main-content:not([data-rk-page="clientareahome"]) .col-form-label{font-size:13px;font-weight:500;color:#657491;padding-bottom:8px}
.rk-native #rk-main-content:not([data-rk-page="clientareahome"]) :is(input[type=submit],input[type=reset],button.btn,a.btn){min-height:42px;font-size:14px;padding:9px 18px;line-height:1.6}
.rk-native #rk-main-content:not([data-rk-page="clientareahome"]) :is(.btn-xs,.btn-sm){min-height:36px;font-size:13px;padding:7px 13px}
.rk-native #rk-main-content:not([data-rk-page="clientareahome"]) :is(.input-group-prepend,.input-group-append) .btn{height:100%;min-height:44px}
.rk-native #rk-main-content:not([data-rk-page="clientareahome"]) .form-control[type=file]::file-selector-button{border:0;border-right:1px solid #dce5f2;background:#eff5ff;color:#2356e8;padding:10px 14px;margin:-10px 14px -10px -14px;font:inherit}
.rk-native #rk-main-content:not([data-rk-page="clientareahome"]) .dataTables_wrapper{border-top:1px solid #e5edf7;padding-top:20px}
.rk-native #rk-main-content:not([data-rk-page="clientareahome"]) .dataTables_info{color:#6c7c95;font-size:13px;line-height:1.7}
.rk-native #rk-main-content:not([data-rk-page="clientareahome"]) .dataTables_filter input{min-width:220px;border-radius:12px}
.rk-native #rk-main-content:not([data-rk-page="clientareahome"]) table.table-list{font-size:14px;line-height:1.7}
.rk-native #rk-main-content:not([data-rk-page="clientareahome"]) table.table-list thead th{font-size:13px;background:#f5f8fd;color:#657491;padding:15px 18px}
.rk-native #rk-main-content:not([data-rk-page="clientareahome"]) table.table-list tbody td{padding:20px 18px;vertical-align:middle}
.rk-native #rk-main-content:not([data-rk-page="clientareahome"]) table.table-list tbody strong{font-weight:500;color:#172a4b}
.rk-native #rk-main-content:not([data-rk-page="clientareahome"]) table.table-list .status{font-size:12px;white-space:normal;line-height:1.6}
.rk-native #rk-main-content:not([data-rk-page="clientareahome"]) table.table-list .dataTables_empty{height:150px;text-align:center!important;color:#8190a7;background:linear-gradient(180deg,#fbfdff,#fff)}
.rk-native #rk-main-content:not([data-rk-page="clientareahome"]) .dataTables_length,.rk-native #rk-main-content:not([data-rk-page="clientareahome"]) .dataTables_paginate{margin-top:16px;font-size:13px}
.rk-native #rk-main-content:not([data-rk-page="clientareahome"]) .dataTables_paginate .page-link{min-height:38px;min-width:38px;display:flex;align-items:center;justify-content:center}
.rk-native #rk-main-content:not([data-rk-page="clientareahome"]) .table-striped{font-size:14px;line-height:1.7}
.rk-native #rk-main-content:not([data-rk-page="clientareahome"]) .table-striped th{background:#f5f8fd;border-color:#e4ebf6;color:#657491;font-weight:500;padding:15px 18px}
.rk-native #rk-main-content:not([data-rk-page="clientareahome"]) .table-striped td{padding:18px;border-color:#e8eef7;vertical-align:middle;overflow-wrap:anywhere}
.rk-native #rk-main-content:not([data-rk-page="clientareahome"]) .table-striped tbody tr:nth-of-type(odd){background:#fafcff}
.rk-native #rk-main-content:not([data-rk-page="clientareahome"]) .kb-search{padding:8px;background:#fff;border:1px solid #e2eaf6;border-radius:16px;box-shadow:0 7px 22px -18px #24477830;align-items:stretch;margin-bottom:28px}
.rk-native #rk-main-content:not([data-rk-page="clientareahome"]) .kb-search .form-control{border:0;background:transparent;border-radius:10px;min-height:46px}
.rk-native #rk-main-content:not([data-rk-page="clientareahome"]) .kb-search .btn{border-radius:10px;padding-left:24px;padding-right:24px}
.rk-native #rk-main-content:not([data-rk-page="clientareahome"])>.alert-info{padding:24px;border-color:#e2eaf6;background:#f5f9ff;color:#657491;border-radius:16px}
.rk-native #rk-main-content[data-rk-page="clientareaaddfunds"]>.row>.col-md-8{margin:0;width:100%;max-width:780px;flex-basis:100%}
.rk-native #rk-main-content[data-rk-page="user-accounts"] .list-group-item{padding:22px;border:1px solid #e2eaf6;border-radius:14px;background:#fff;color:#2356e8;margin-bottom:12px}
.rk-native #rk-main-content[data-rk-page="account-user-management"] td .btn{margin:3px 4px 3px 0}
.rk-native #rk-main-content[data-rk-page="account-user-management"] .label-info{display:inline-flex;padding:3px 8px;border-radius:99px;background:#eaf2ff;color:#2356e8;font-size:11px;margin-left:6px}
/* Keep all configurable native footer links and currency controls, without a second tall footer. */
.rk-native #footer{padding:16px 0 20px;border-top:1px solid #e8eef7;background:#fff;font-size:12px}
.rk-native #footer>.container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 24px}
.rk-native #footer .mb-7{margin-bottom:0!important}
.rk-native #footer .list-inline{order:2;margin:0!important;float:none!important}
.rk-native #footer .nav{order:1;margin:0!important;gap:4px}
.rk-native #footer .nav-link{padding:8px 6px}
.rk-native #footer .copyright{order:3;width:100%;font-size:11px;color:#8c9ab1;margin-top:6px}
.rk-native #footer .btn{min-height:36px;padding:6px 12px;font-size:12px}
@media(max-width:767px){
 .rk-native .rk-page-intro{align-items:flex-start;flex-wrap:wrap;gap:16px;margin:0 0 24px}
 .rk-native .rk-page-intro h1{font-size:26px}
 .rk-native .rk-page-intro .btn{font-size:13px}
 .rk-native #rk-main-content:not([data-rk-page="clientareahome"])>.card>.card-body,.rk-native #rk-main-content:not([data-rk-page="clientareahome"])>form>.card>.card-body{padding:22px 18px}
 .rk-native #rk-main-content:not([data-rk-page="clientareahome"]) .form-control:not([type=file]):not([type=range]){font-size:16px}
 .rk-native #rk-main-content:not([data-rk-page="clientareahome"]) .dataTables_filter input{min-width:0;width:100%;font-size:16px}
 .rk-native #rk-main-content:not([data-rk-page="clientareahome"]) .dataTables_filter{float:none;width:100%}
 .rk-native #rk-main-content:not([data-rk-page="clientareahome"]) .dataTables_filter label{width:100%}
 .rk-native #rk-main-content:not([data-rk-page="clientareahome"]) .kb-search .btn{padding:10px 16px}
 .rk-native #rk-main-content[data-rk-page="account-user-management"] .table-striped{display:block;overflow:auto}
 .rk-native #rk-main-content[data-rk-page="account-user-management"] .table-striped td{min-width:160px}
 .rk-native #rk-main-content[data-rk-page="clientareadomains"] .btn-group{display:flex;flex-wrap:wrap;gap:6px}
 .rk-native #footer>.container{justify-content:center;gap:4px 12px}
 .rk-native #footer .copyright{text-align:center}
}

/* The page heading replaces only the equivalent first section title. */
.rk-native #rk-main-content[data-rk-page="clientareadetails"]>form>.card:first-of-type>.card-body>.card-title,
.rk-native #rk-main-content[data-rk-page="account-user-management"]>.card:not(.card ~ .card)>.card-body>.card-title{display:none}
.rk-native #rk-main-content[data-rk-page="user-switch-account"] .select-account a{display:block;padding:18px;border:1px solid #e2eaf6;border-radius:14px;background:#f7faff;color:#2356e8}
.rk-native .modal .btn{min-height:40px;padding:8px 15px;font-size:13px;line-height:1.6}
.rk-native .modal .modal-footer{gap:8px;flex-wrap:wrap}
.rk-native .modal .modal-footer .btn{margin:0}
@media(max-width:480px){.rk-native .modal .modal-footer .btn-primary{flex:1}.rk-native .modal .modal-body .btn{margin-top:6px}}

@media(max-width:767px){
 .rk-native #rk-main-content table.table-list thead th{white-space:nowrap}
 .rk-native #rk-main-content table.table-list .dataTables_empty{text-align:left!important;padding-left:24px}
 .rk-native #rk-main-content[data-rk-page="contact"] .col-form-label{text-align:left!important}
 .rk-native #rk-main-content .table-container{scrollbar-width:thin;scrollbar-color:#b8cbee #f5f8fd}
}

.rk-native #rk-main-content[data-rk-page="user-profile"]>.card:not(.card ~ .card)>.card-body>.card-title{display:none}

/* Section surfaces on every client page (COO 12 Oct 2026), the same language as the dashboard groups:
   soft canvas, white 20px surfaces with a hairline border, list tables framed as one surface. */
body.rk-native:has(.rk-workspace-with-nav){background:radial-gradient(ellipse 75% 430px at 100% 0,rgba(220,239,255,.45),transparent 75%),linear-gradient(180deg,#fafcff,#f5f7fb 560px);background-repeat:no-repeat;background-color:#f5f7fb}
.rk-native #rk-main-content{--rk-surface-line:#e4eaf4;--rk-surface-divider:#edf1f8;--rk-surface-shadow:0 1px 2px rgba(15,36,84,.04),0 14px 32px -24px rgba(15,36,84,.22)}
.rk-native #rk-main-content:not([data-rk-page="clientareahome"])>.card,.rk-native #rk-main-content:not([data-rk-page="clientareahome"])>form>.card{border-color:var(--rk-surface-line);box-shadow:var(--rk-surface-shadow);margin-bottom:20px}
.rk-native #rk-main-content>.card .card-header,.rk-native #rk-main-content>form>.card .card-header{background:none;border-bottom:1px solid var(--rk-surface-divider)}
.rk-native #rk-main-content>.card .card-footer,.rk-native #rk-main-content>form>.card .card-footer{background:#fafbfe;border-top:1px solid var(--rk-surface-divider)}
.rk-native #rk-main-content>.table-container{margin-bottom:20px;padding:20px 24px 16px;background:#fff;border:1px solid var(--rk-surface-line);border-radius:20px;box-shadow:var(--rk-surface-shadow)}
.rk-native #rk-main-content>.table-container .dataTables_wrapper{margin:0;padding-top:0;border-top:0}
.rk-native #rk-main-content>.alert,.rk-native #rk-main-content>.kb-search,.rk-native #rk-main-content>form.mb-4{margin-bottom:20px}
@media(max-width:767px){.rk-native #rk-main-content>.table-container{padding:16px 16px 12px;border-radius:18px}}
/* Domain management menu, moved in-page from the collapsed drawer (includes/domain-manage-nav.tpl) */
.rk-native .rk-domain-manage-nav{margin:0 0 20px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.rk-native .rk-domain-manage-nav .nav{flex-wrap:wrap;gap:8px}
.rk-native .rk-domain-manage-nav .nav-link{display:inline-flex;align-items:center;min-height:38px;padding:8px 14px;border:1px solid #dce6f7;border-radius:999px;background:#fff;color:#1e2a4a;font-size:13px;font-weight:600;line-height:1.4;white-space:nowrap}
.rk-native .rk-domain-manage-nav .nav-link:hover,.rk-native .rk-domain-manage-nav .nav-link:focus-visible{background:#edf3ff;border-color:#bdcff7;color:#2356e8}
.rk-native .rk-domain-manage-nav .nav-link.active{background:#2356e8;border-color:#2356e8;color:#fff}
.rk-native .rk-domain-manage-nav .nav-link.disabled{opacity:.5;pointer-events:none}
@media(max-width:767px){.rk-native .rk-domain-manage-nav .nav{flex-wrap:nowrap}}
/* Ticket rating: theme.css draws stars with a private-use glyph from the "Font Awesome 6 Pro" family;
   when that family name does not match the Font Awesome build WHMCS loads, they render as empty boxes.
   Use the Unicode star in a text font instead so it no longer depends on the icon font. */
.ticket-reply .rating span.star,.ticket-reply .rating-done span.star{font-family:"Segoe UI Symbol","Apple Symbols","DejaVu Sans","Noto Sans Symbols 2",sans-serif;font-weight:400}
.ticket-reply .rating span.star:before,.ticket-reply .rating-done span.star:before,.ticket-reply .rating span.star:hover:before,.ticket-reply .rating span.star:hover~span.star:before,.ticket-reply .rating-done span.star.active:before{content:"\2605"}