/* ============================================================================
   corePTT client area — light palette of coreWiki on top of Twenty-One.

   Colors (the corePTT manual, as coreWiki uses them):
     almond  #f9f1e4  page background, inputs, hover
     white   #ffffff  cards, header, footer
     wine    #300202  text; secondary tones are wine with transparency
     orange  #ff3c00  actions, active navigation, focus
   ========================================================================== */

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --cp-almond: #f9f1e4;
    --cp-white: #ffffff;
    --cp-wine: #300202;
    --cp-wine-muted: rgba(48, 2, 2, 0.74);
    --cp-wine-faint: rgba(48, 2, 2, 0.6);
    --cp-line: rgba(48, 2, 2, 0.1);
    --cp-line-strong: rgba(48, 2, 2, 0.2);
    --cp-orange: #ff3c00;
    --cp-orange-dark: #e03500;
    --cp-orange-soft: rgba(255, 60, 0, 0.1);
    --cp-green: #0ca300;
    --cp-red: #dd0000;
    --cp-shadow-card: 0 1px 2px rgba(48, 2, 2, 0.05), 0 6px 20px -12px rgba(48, 2, 2, 0.16);
    --cp-shadow-lift: 0 2px 4px rgba(48, 2, 2, 0.05), 0 16px 36px -16px rgba(48, 2, 2, 0.26);
    --cp-radius: 14px;
    --cp-radius-sm: 10px;

    --primary: var(--cp-orange);
    --font-family-sans-serif: 'Raleway', system-ui, -apple-system, sans-serif;
}

/* ---------------------------------------------------------------- base */

html,
body,
.primary-bg-color {
    background-color: var(--cp-almond);
}

body {
    font-family: 'Raleway', system-ui, -apple-system, sans-serif;
    color: var(--cp-wine);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--cp-wine);
    font-weight: 700;
}

.text-muted,
small,
.small {
    color: var(--cp-wine-muted) !important;
}

a {
    color: var(--cp-wine);
    text-decoration-color: rgba(255, 60, 0, 0.6);
}

a:hover,
a:focus {
    color: var(--cp-orange);
}

::selection {
    background-color: rgba(255, 60, 0, 0.18);
    color: var(--cp-wine);
}

:focus-visible {
    outline: 2px solid var(--cp-orange);
    outline-offset: 2px;
}

hr {
    border-top-color: var(--cp-line);
}

/* -------------------------------------------------------------- header */

header.header {
    background-color: var(--cp-white);
    border-bottom: 1px solid var(--cp-line);
    box-shadow: var(--cp-shadow-card);
}

header.header .topbar {
    background-color: var(--cp-almond);
    color: var(--cp-wine-muted);
    border-bottom: 1px solid var(--cp-line);
}

header.header .topbar .btn,
header.header .topbar .active-client .btn,
header.header .topbar .active-client .input-group-text {
    color: var(--cp-wine-muted);
}

header.header .topbar .btn:hover,
header.header .topbar .active-client .btn:hover {
    color: var(--cp-orange);
}

header.header .topbar .btn-return-to-admin {
    background-color: var(--cp-orange-soft);
    color: var(--cp-orange);
    border-radius: 999px;
}

/* The logo is set in General Settings > Logo URL to
   /templates/coreptt/img/logo-horizontal.png (symbol + wordmark, tight crop). */
/* The logo uploaded in WHMCS has wide margins and shrinks to a dot at header
   height; the header shows the tight horizontal mark instead. */
header.header .navbar-brand .logo-img {
    display: none;
}

header.header .navbar-brand::before {
    content: "";
    display: block;
    width: 214px;
    height: 32px;
    background: url('../img/logo-horizontal.png') no-repeat left center / contain;
}

/* Knowledge base search and shopping cart: customers only come to pay. */
header.header form[action*="knowledgebase"],
header.header .cart-btn {
    display: none !important;
}

header.header .main-navbar-wrapper {
    border-top: 1px solid var(--cp-line);
}

header.header .main-navbar-wrapper .navbar-nav .nav-link {
    color: var(--cp-wine);
    font-weight: 600;
    border-bottom: 2px solid transparent;
}

header.header .main-navbar-wrapper .navbar-nav .nav-link:hover,
header.header .main-navbar-wrapper .navbar-nav .nav-link:focus,
header.header .main-navbar-wrapper .navbar-nav .active > .nav-link,
header.header .main-navbar-wrapper .navbar-nav .show > .nav-link {
    color: var(--cp-orange);
    border-bottom-color: var(--cp-orange);
}

header.header .main-navbar-wrapper .cp-back-to-panel {
    margin-right: 1.5rem;
}

header.header .main-navbar-wrapper .cp-back-to-panel > a {
    color: var(--cp-orange);
    font-weight: 700;
}

.dropdown-menu {
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius-sm);
    box-shadow: var(--cp-shadow-lift);
    padding: 6px;
}

.dropdown-item {
    color: var(--cp-wine);
    border-radius: 8px;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--cp-almond);
    color: var(--cp-orange);
}

/* --------------------------------------------------------- breadcrumb */

.master-breadcrumb {
    background-color: transparent;
}

.master-breadcrumb .breadcrumb {
    background-color: transparent;
}

.master-breadcrumb .breadcrumb-item,
.master-breadcrumb .breadcrumb-item a {
    color: var(--cp-wine-faint);
}

.master-breadcrumb .breadcrumb-item.active {
    color: var(--cp-wine);
}

/* --------------------------------------------------------------- cards */

.card,
.panel,
.sidebar .card,
.client-home-cards .card,
.tiles .tile,
section#main-body .primary-content > .card {
    background-color: var(--cp-white);
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius);
    box-shadow: var(--cp-shadow-card);
}

.card-header,
.card-footer,
.sidebar .card .card-header {
    background-color: var(--cp-white);
    border-color: var(--cp-line);
    color: var(--cp-wine);
}

.card-header:first-child {
    border-radius: var(--cp-radius) var(--cp-radius) 0 0;
}

/* Twenty-One colors each home card's top edge and header button by topic;
   corePTT keeps one accent. */
.card[class*="card-accent-"] {
    border-top: 3px solid var(--cp-orange);
}

.card-header .btn[class*="bg-color-"] {
    background-color: var(--cp-orange-soft) !important;
    border-color: transparent !important;
    color: var(--cp-orange) !important;
}

.card-header .btn[class*="bg-color-"]:hover {
    background-color: var(--cp-orange) !important;
    color: #fff !important;
}

.card-title,
.sidebar .card .card-title {
    color: var(--cp-wine);
    font-weight: 700;
}

.list-group-item {
    border-color: var(--cp-line);
    color: var(--cp-wine);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--cp-almond);
    color: var(--cp-orange);
}

.list-group-item.active,
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:focus,
.sidebar .list-group-item.active:hover {
    background-color: var(--cp-orange-soft);
    border-color: var(--cp-line);
    color: var(--cp-orange);
    font-weight: 700;
}

/* Home tiles count services, domains and tickets, none of which corePTT
   customers manage here; the unpaid invoices card below says what matters. */
.tiles {
    display: none;
}

.tiles .tile:hover {
    background-color: var(--cp-almond);
}

.tiles .tile .stat {
    color: var(--cp-wine);
}

.tiles .tile .highlight {
    background-color: var(--cp-orange) !important;
}

/* ------------------------------------------------------------- buttons */

.btn {
    border-radius: var(--cp-radius-sm);
    font-weight: 600;
}

.btn-primary,
.btn-success,
.btn-info {
    background-color: var(--cp-orange);
    border-color: var(--cp-orange);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-success:hover,
.btn-success:focus,
.btn-info:hover,
.btn-info:focus {
    background-color: var(--cp-orange-dark);
    border-color: var(--cp-orange-dark);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(255, 60, 0, 0.35), 0 14px 32px -14px rgba(255, 60, 0, 0.28);
}

.btn-default,
.btn-secondary,
.btn-light,
.btn-outline-secondary {
    background-color: var(--cp-almond);
    border-color: var(--cp-line);
    color: var(--cp-wine);
}

.btn-default:hover,
.btn-secondary:hover,
.btn-light:hover,
.btn-outline-secondary:hover {
    background-color: var(--cp-white);
    border-color: var(--cp-line-strong);
    color: var(--cp-orange);
}

.btn-outline-primary {
    color: var(--cp-orange);
    border-color: var(--cp-orange);
}

.btn-outline-primary:hover {
    background-color: var(--cp-orange);
    border-color: var(--cp-orange);
    color: #fff;
}

.btn-link {
    color: var(--cp-wine);
}

.btn-link:hover {
    color: var(--cp-orange);
}

/* --------------------------------------------------------------- forms */

.form-control,
.custom-select,
select.form-control {
    background-color: var(--cp-almond);
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius-sm);
    color: var(--cp-wine);
}

.form-control:hover,
.custom-select:hover {
    border-color: var(--cp-line-strong);
}

.form-control:focus,
.custom-select:focus {
    background-color: var(--cp-white);
    border-color: var(--cp-orange);
    box-shadow: 0 0 0 3px rgba(255, 60, 0, 0.15);
    color: var(--cp-wine);
}

.form-control::placeholder {
    color: var(--cp-wine-faint);
}

label,
.control-label {
    color: var(--cp-wine-muted);
    font-weight: 600;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--cp-orange);
    border-color: var(--cp-orange);
}

.input-group-text {
    background-color: var(--cp-almond);
    border-color: var(--cp-line);
    color: var(--cp-wine-muted);
}

/* -------------------------------------------------------------- tables */

.table {
    color: var(--cp-wine);
}

.table th,
.table td,
.table thead th {
    border-color: var(--cp-line);
}

.table thead th {
    color: var(--cp-wine-faint);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* DataTables shades the sorted column grey. */
table.dataTable thead th,
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    background-color: var(--cp-white) !important;
}

table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    color: var(--cp-orange);
}

.table-hover tbody tr:hover,
.table-list tbody tr:hover {
    background-color: var(--cp-almond);
}

.page-link {
    color: var(--cp-wine);
    border-color: var(--cp-line);
}

.page-item.active .page-link {
    background-color: var(--cp-orange);
    border-color: var(--cp-orange);
}

/* ------------------------------------------------------ status, alerts */

.label,
.badge {
    border-radius: 999px;
    font-weight: 600;
    padding: 0.35em 0.75em;
}

.status-paid,
.status-active,
.status-completed,
.label-success,
.badge-success {
    background-color: rgba(12, 163, 0, 0.12) !important;
    color: var(--cp-green) !important;
}

.status-unpaid,
.status-overdue,
.status-pending,
.label-warning,
.badge-warning {
    background-color: var(--cp-orange-soft) !important;
    color: var(--cp-orange) !important;
}

.status-cancelled,
.status-suspended,
.status-terminated,
.status-refunded,
.label-danger,
.badge-danger {
    background-color: rgba(221, 0, 0, 0.1) !important;
    color: var(--cp-red) !important;
}

.badge-info,
.badge-primary {
    background-color: var(--cp-orange);
}

.alert {
    border-radius: var(--cp-radius-sm);
    border: 1px solid var(--cp-line);
}

.alert-info {
    background-color: var(--cp-white);
    color: var(--cp-wine);
}

.alert-warning {
    background-color: var(--cp-orange-soft);
    color: var(--cp-wine);
}

.alert-success {
    background-color: rgba(12, 163, 0, 0.1);
    color: var(--cp-wine);
}

.alert-danger {
    background-color: rgba(221, 0, 0, 0.08);
    color: var(--cp-wine);
}

/* -------------------------------------------------------------- footer */

footer.footer {
    background-color: var(--cp-white);
    border-top: 1px solid var(--cp-line);
    color: var(--cp-wine-muted);
    padding: 32px 0 48px;
}

footer.footer a,
footer.footer .nav-link {
    color: var(--cp-wine-muted);
}

footer.footer a:hover {
    color: var(--cp-orange);
}

footer.footer .btn {
    background-color: var(--cp-almond);
    color: var(--cp-wine);
    border: 1px solid var(--cp-line);
}

footer.footer .btn:hover {
    color: var(--cp-orange);
}

/* WHMCS "Powered by" and the like stay legible on white. */
footer.footer .copyright,
footer.footer .notices {
    color: var(--cp-wine-faint);
}

/* ------------------------------------------------------------- payment */

/* Card verification (3-D Secure) opens in an iframe: give it the card look. */
#frmPayment iframe,
iframe[name="ccframe"] {
    border: 0;
    border-radius: var(--cp-radius);
    background: transparent;
}

.payment-methods .list-group-item,
.paymethod-info {
    border-radius: var(--cp-radius-sm);
}

/* Stripe puts expiry and CVC in col-sm-2, too narrow to show "MM / AA". */
@media (min-width: 576px) {
    #stripeElements .cc-billing-address > .col-sm-2 {
        flex: 0 0 9.5rem;
        max-width: 9.5rem;
    }
}

/* A saved card on one line: radio, brand, "Visa-4242", description, expiry. */
#frmPayment div.three-column-grid {
    display: grid;
    grid-template-columns: auto auto auto 1fr auto;
    align-items: center;
    width: 100%;
    font-size: 0.9rem;
}

#frmPayment div.three-column-grid label {
    white-space: nowrap;
}

/* The summary beside the card form scrolled inside a 300px box, hiding
   "Credit" and "Total due" behind the card's edge. */
.invoice-summary .invoice-summary-table {
    max-height: none;
    overflow: visible;
    margin: 16px 0;
}

.invoice-summary .invoice-summary-table td {
    font-size: 0.85rem;
    padding: 8px 10px;
}

.invoice-summary .invoice-summary-table td.total-row {
    background-color: var(--cp-almond);
}

.invoice-summary .cp-view-invoice {
    display: block;
    margin-top: 12px;
    text-align: center;
    font-size: 0.9rem;
}

.modal-content {
    border: 1px solid var(--cp-line);
    border-radius: var(--cp-radius);
    box-shadow: var(--cp-shadow-lift);
}

.modal-header,
.modal-footer {
    border-color: var(--cp-line);
}