/* =====================================================================
   Your WP Guy Domains - WHMCS client theme (child of Nexus)
   Version ywp-1.0.5 (bump the ?v= in includes/head.tpl on every change)

   Brand values: brand guide PDF via SEO-Toolkit/brands/ywp.md and
   brands/wpguydomains.md. Only the 7 brand hexes + white, the chartreuse
   hover #b9c528, the Cream tint #f3f2ee, and the functional status colors.
   Contrast ratios (WCAG 2.x) are noted beside each pair.

   This file REPLACES Nexus's custom.css, so every Nexus token below must
   stay defined (theme.css and the nexus_cart Shadow DOM read them).
   ===================================================================== */

/* ---------- Fonts (self-hosted, latin subset, OFL) ---------- */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Lora";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/lora-latin-700-italic.woff2") format("woff2");
}
/* Metric-matched fallback so the swap to Poppins does not shift layout */
@font-face {
    font-family: "Poppins Fallback";
    src: local("Arial");
    size-adjust: 112%;
    ascent-override: 93%;
    descent-override: 31%;
    line-gap-override: 9%;
}

:root {
    /* ---------- Brand palette (brand guide PDF) ---------- */
    --ywp-dark-blue: #355f76;
    --ywp-bright-blue: #4584a9;   /* large display only */
    --ywp-chartreuse: #cfdd2d;    /* primary actions only */
    --ywp-chartreuse-hover: #b9c528;
    --ywp-cream: #e2e0d7;
    --ywp-cream-tint: #f3f2ee;
    --ywp-midnight: #353f47;
    --ywp-serious-gray: #595a5c;
    --ywp-light-gray: #aeb0b2;    /* borders/placeholders only, never text on light */
    --white: #fff;

    /* Functional status colors (wpguy-brand skill; never decorative) */
    --ywp-success: #2e7d52;       /* white text 5.03 */
    --ywp-success-light: #f0faf4; /* success text 4.72 */
    --ywp-warning: #b45309;       /* white text 5.02 */
    --ywp-warning-light: #fffbeb; /* warning text 4.84 */
    --ywp-danger: #c0392b;        /* white text 5.44 */
    --ywp-danger-light: #fdf2f1;  /* danger text 4.96 */

    --ywp-font: "Poppins", "Poppins Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ywp-font-accent: "Lora", Georgia, serif;
    --ywp-focus-light: 2px solid var(--ywp-midnight);   /* 10.75 on white */
    --ywp-focus-dark: 2px solid var(--ywp-chartreuse);  /* 7.18 on Midnight */
    --ywp-shadow-sm: 0 1px 3px rgba(53,63,71,0.08), 0 1px 2px rgba(53,63,71,0.06);
    --ywp-shadow-lg: 0 8px 32px rgba(53,95,118,0.12);

    /* ---------- Nexus tokens, mapped to brand roles ---------- */
    /* Neutral ramp: brand neutrals only (no Tailwind grays) */
    --neutral-50: #f3f2ee;
    --neutral-100: #f3f2ee;
    --neutral-200: #e2e0d7;
    --neutral-300: #e2e0d7;
    --neutral-400: #595a5c;
    --neutral-500: #595a5c;
    --neutral-600: #595a5c;
    --neutral-700: #353f47;
    --neutral-800: #353f47;
    --neutral-900: #353f47;
    --neutral-950: #353f47;

    --primary-50: #f3f2ee;
    --primary-100: #e2e0d7;
    --primary-200: #e2e0d7;
    --primary-300: #4584a9;
    --primary-400: #4584a9;
    --primary-500: #355f76;
    --primary-600: #355f76;
    --primary-700: #353f47;
    --primary-800: #353f47;
    --primary-900: #353f47;
    --primary-950: #353f47;

    /* Primary = Dark Blue (white text 6.89); hover one step darker = Midnight */
    --primary: #355f76;
    --primary-lifted: #353f47;
    --primary-accented: #353f47;

    --secondary: #595a5c;
    --secondary-lifted: #353f47;
    --secondary-accented: #353f47;

    --success: #2e7d52;
    --success-lifted: #2e7d52;
    --success-accented: #2e7d52;

    --info: #355f76;
    --info-lifted: #353f47;
    --info-accented: #353f47;

    --notice: #353f47;
    --notice-lifted: #353f47;
    --notice-accented: #353f47;

    --warning: #b45309;
    --warning-lifted: #b45309;
    --warning-accented: #b45309;

    --error: #c0392b;
    --error-lifted: #c0392b;
    --error-accented: #c0392b;

    /* Nexus paints most "dark" buttons with grayscale: Dark Blue, hover Midnight */
    --grayscale: #355f76;
    --grayscale-lifted: #353f47;
    --grayscale-accented: #353f47;

    --neutral: #595a5c;
    --neutral-lifted: #353f47;
    --neutral-accented: #353f47;

    --text-inverted: #fff;
    --text-muted: #595a5c;   /* Light Gray fails as text on light grounds */
    --text-lifted: #595a5c;
    --text-accented: #353f47;
    --text: #353f47;

    --border-muted: #e2e0d7;
    --border: #e2e0d7;
    --border-lifted: #595a5c;    /* control borders: 6.90 on white */
    --border-accented: #595a5c;

    --bg: #fff;
    --bg-muted: #f3f2ee;
    --bg-lifted: #f3f2ee;
    --bg-accented: #e2e0d7;
    --bg-inverted: #353f47;

    /* Nexus accent swatches -> brand-safe equivalents (no off-brand colors) */
    --yellow-200: #fffbeb;
    --yellow-300: #fffbeb;
    --teal-300: #e2e0d7;
    --teal-400: #e2e0d7;
    --emerald-300: #f0faf4;
    --pink-400: #e2e0d7;

    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-md: 0.9375rem;
    --text-lg: 1rem;

    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Corner recipe (brands/wpguydomains.md): controls 6px, cards 12px, pills */
    --rounding-sm: 6px;
    --rounding-md: 12px;
    --rounding-lg: 12px;

    --letter-spacing: 0em;
    --disabled-opacity: 40%;
}

/* ---------- Base ---------- */
html {
    scroll-padding-top: 96px; /* focused fields never hide under the header */
}
html, body {
    background-color: var(--ywp-midnight);
}
body {
    font-family: var(--ywp-font);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ywp-midnight);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ywp-font);
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--ywp-midnight);
    line-height: 1.2;
}
h1, .h1 { font-size: clamp(32px, 4vw, 44px); }
h2, .h2 { font-size: clamp(23px, 2.6vw, 29px); }
h3, .h3 { font-size: 20px; }
.btn, .form-control, .custom-select, .dropdown-menu, .tooltip, .popover {
    font-family: var(--ywp-font);
}
a {
    color: var(--ywp-dark-blue); /* 6.89 on white, 6.15 on Cream tint */
}
a:hover, a:focus {
    color: var(--ywp-midnight);
}
.text-muted {
    color: var(--ywp-serious-gray) !important;
}
::placeholder {
    color: var(--ywp-serious-gray) !important;
    opacity: 1;
}

/* Main body sits on the Cream tint; cards stay white */
main#main-body {
    display: block;
    margin: 0;
    padding: 32px 0 48px;
    background-color: var(--ywp-cream-tint);
    min-height: calc(100vh - 146px - 40px - 140px);
}
main#main-body:focus {
    outline: none; /* programmatic focus target of the skip link only */
}

/* ---------- Focus: solid ring, never removed (Bootstrap strips it) ---------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.form-control:focus,
.custom-select:focus {
    outline: var(--ywp-focus-light) !important;
    outline-offset: 2px;
    box-shadow: none !important;
}
.ywp-sitebar a:focus-visible,
.ywp-sitebar button:focus-visible,
.ywp-footer a:focus-visible,
.ywp-footer button:focus-visible,
header.header .topbar a:focus-visible,
header.header .topbar button:focus-visible {
    outline: var(--ywp-focus-dark) !important;
}
.form-control:focus {
    border-color: var(--ywp-dark-blue);
}

/* Skip link */
.ywp-skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 2000;
    padding: 12px 20px;
    background: var(--ywp-chartreuse);
    color: var(--ywp-midnight); /* 7.18 */
    font-weight: 700;
    border-radius: 0 0 6px 6px;
}
.ywp-skip-link:focus {
    top: 0;
    color: var(--ywp-midnight);
    outline: var(--ywp-focus-light);
}

/* ---------- Header ---------- */
header.header {
    background-color: #fff;
}
header.header .topbar {
    background-color: var(--ywp-midnight);
    border-bottom: 1px solid rgba(255,255,255,0.15); /* derived: white at 15% */
}
header.header .topbar,
header.header .topbar .btn,
header.header .topbar .active-client .btn,
header.header .topbar .active-client .input-group-text {
    color: rgba(255,255,255,0.85);
}
header.header .topbar .active-client .btn.btn-active-client span {
    border-bottom-color: rgba(255,255,255,0.85);
}

/* Site bar = WordPress header (Midnight band) */
header.header .ywp-sitebar {
    min-height: 72px;
    padding: 10px 0;
    background-color: var(--ywp-midnight);
}
.ywp-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
header.header .ywp-brand .logo-img {
    width: auto;
    height: 46px;
    max-height: 46px;
}
.ywp-brand-label {
    font-family: var(--ywp-font);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #fff;
    padding-left: 12px;
    border-left: 1px solid rgba(255,255,255,0.35);
}
header.header .ywp-sitenav {
    flex-direction: row;
    gap: 4px;
    margin: 0;
}
header.header .ywp-sitebar .nav-link {
    color: rgba(255,255,255,0.85); /* 8.29 on Midnight */
    font-size: 15px;
    font-weight: 600;
    padding: 12px 10px;
}
header.header .ywp-sitebar .nav-link:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 6px;
}
header.header .ywp-sitebar .toolbar .nav-link {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    text-decoration: none;
}
header.header .ywp-sitebar .toolbar .nav-link:hover {
    background-color: rgba(255,255,255,0.08);
}
header.header .ywp-sitebar .cart-btn .badge {
    background-color: #fff;
    color: var(--ywp-midnight); /* 10.75 */
}

/* WHMCS account nav (white bar under the site bar) */
header.header .main-navbar-wrapper {
    background-color: #fff;
    border-bottom: 1px solid var(--ywp-cream);
}
header.header .main-navbar-wrapper .navbar-nav a,
header.header .navbar a {
    color: var(--ywp-midnight);
}
header.header .main-navbar-wrapper .navbar-nav > li > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 15px;
    font-weight: 600;
}
header.header .main-navbar-wrapper .navbar-nav > li > a:hover {
    color: var(--ywp-dark-blue);
}
header.header .main-navbar-wrapper .navbar-nav > li.active > a {
    color: var(--ywp-dark-blue);
    box-shadow: inset 0 -3px 0 var(--ywp-dark-blue);
}
header.header .ywp-sitenav-mobile {
    border-bottom: 1px solid var(--ywp-cream);
    padding-bottom: 8px;
    margin-bottom: 8px;
}
header.header .search {
    border-color: var(--ywp-serious-gray);
}
header.header .search .btn {
    color: var(--ywp-serious-gray);
}
header.header .search:focus-within {
    border-color: var(--ywp-dark-blue);
}
header.header .dropdown-item.active,
header.header .dropdown-item:active,
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--ywp-cream);
    color: var(--ywp-midnight);
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--ywp-cream-tint);
    color: var(--ywp-midnight);
}

/* Breadcrumb */
.master-breadcrumb,
.master-breadcrumb .breadcrumb {
    background-color: var(--ywp-cream-tint);
}
.master-breadcrumb {
    border-bottom: 1px solid var(--ywp-cream);
}
.master-breadcrumb .breadcrumb {
    font-size: 14px;
}
.master-breadcrumb .breadcrumb a {
    color: var(--ywp-dark-blue); /* 6.15 */
}
.master-breadcrumb .breadcrumb .breadcrumb-item.active {
    color: var(--ywp-serious-gray); /* 6.16 */
}

/* ---------- Buttons ---------- */
.btn {
    font-weight: 700;
    border-radius: var(--rounding-sm);
    min-height: 44px;
    padding: 0.5rem 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn-sm {
    min-height: 36px; /* 24px target minimum met; used inside dense tables */
    padding: 0.3rem 0.85rem;
}
.btn-lg {
    min-height: 52px;
    font-size: 16px;
}
.btn-block {
    display: flex;
}

/* Standard action: Dark Blue fill, white label (6.89); hover Midnight (10.75) */
.btn-primary,
.btn-success,
#main-body .btn-primary,
body .sidebar .btn-success,
body #frmDomainHomepage #btnTransfer,
body .primary-content .client-home-cards .card .btn-success,
body #order-standard_cart .products .product footer .btn-order-now {
    color: #fff;
    background-color: var(--ywp-dark-blue);
    border: 2px solid var(--ywp-dark-blue);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled):active,
body .sidebar .btn-success:hover,
body #frmDomainHomepage #btnTransfer:hover,
body .primary-content .client-home-cards .card .btn-success:hover,
body #order-standard_cart .products .product footer .btn-order-now:hover {
    color: #fff;
    background-color: var(--ywp-midnight);
    border-color: var(--ywp-midnight);
}

/* Money actions: Chartreuse with Midnight label (7.18) and a 2px Midnight
   border so it holds 3:1 on white grounds (brand rule, JW 2026-10-09).
   Hover #b9c528 (Midnight label 5.67). One per screen by placement. */
#btnCompleteOrder,
.btn-checkout,
#btnDomainSearch,
#btnDomainSearch2,
#btnCheckAvailability,
.domain-check-availability,
#btnMassPayMakePayment,
.ywp-btn-action {
    color: var(--ywp-midnight) !important;
    background-color: var(--ywp-chartreuse) !important;
    border: 2px solid var(--ywp-midnight) !important;
    /* 1.0.1: sentence case like every other button (was uppercase, and
       "SEARCH" sat beside "Transfer") */
    text-transform: none !important;
    letter-spacing: 0.02em;
}
#btnCompleteOrder:hover,
.btn-checkout:hover,
#btnDomainSearch:hover,
#btnDomainSearch2:hover,
#btnCheckAvailability:hover,
.domain-check-availability:hover,
#btnMassPayMakePayment:hover,
.ywp-btn-action:hover {
    color: var(--ywp-midnight) !important;
    background-color: var(--ywp-chartreuse-hover) !important;
}

/* Low-emphasis: outline Dark Blue */
.btn-default,
.btn-outline-primary,
.btn-outline-secondary,
#main-body .btn-outline-primary,
body .sidebar .btn-default {
    color: var(--ywp-dark-blue);
    background-color: #fff;
    border: 2px solid var(--ywp-dark-blue);
}
.btn-default:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
#main-body .btn-outline-primary:hover,
body .sidebar .btn-default:hover {
    color: #fff;
    background-color: var(--ywp-dark-blue);
    border-color: var(--ywp-dark-blue);
}
.btn-danger {
    color: #fff;
    background-color: var(--ywp-danger);
    border: 2px solid var(--ywp-danger);
}
.btn-danger:hover {
    background-color: #a93226;
    border-color: #a93226;
}
.btn-link {
    color: var(--ywp-dark-blue);
    font-weight: 600;
}
.btn.disabled, .btn:disabled {
    opacity: 0.55;
}

/* ---------- Cards, panels, sidebar ---------- */
.card,
.primary-content .card,
.sidebar .card {
    background-color: #fff;
    border: 1px solid var(--ywp-cream);
    border-radius: var(--rounding-md);
    box-shadow: var(--ywp-shadow-sm);
}
.card-header {
    background-color: #fff;
    border-bottom: 1px solid var(--ywp-cream);
    font-weight: 700;
}
.card-header:first-child {
    border-radius: var(--rounding-md) var(--rounding-md) 0 0;
}
.card-footer {
    background-color: var(--ywp-cream-tint);
    border-top: 1px solid var(--ywp-cream);
}
.primary-content .card-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.sidebar .card-title,
.sidebar .card-header {
    font-size: 14px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ywp-midnight);
}
.sidebar .list-group-item {
    color: var(--ywp-midnight);
    font-size: 15px;
}
.sidebar .list-group-item.active,
.list-group-item.active {
    background-color: var(--ywp-cream);
    border-color: var(--ywp-cream);
    color: var(--ywp-midnight);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--ywp-dark-blue);
}
.list-group-item-action:hover {
    background-color: var(--ywp-cream-tint);
    color: var(--ywp-midnight);
}

/* ---------- Forms ---------- */
.form-control,
.custom-select {
    min-height: 44px;
    border: 1px solid var(--ywp-serious-gray); /* 3:1+ control border */
    border-radius: var(--rounding-sm);
    color: var(--ywp-midnight);
    font-size: 16px; /* stops iOS zoom on focus */
}
label,
.control-label {
    font-weight: 600;
    color: var(--ywp-midnight);
}
.form-control.is-invalid,
.has-error .form-control {
    border-color: var(--ywp-danger);
}
.invalid-feedback,
.text-danger {
    color: var(--ywp-danger) !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--ywp-dark-blue);
    border-color: var(--ywp-dark-blue);
}

/* ---------- Alerts ---------- */
.alert {
    border-radius: var(--rounding-sm);
    border-width: 1px;
    border-left-width: 4px;
}
.alert-success { background: var(--ywp-success-light); border-color: var(--ywp-success); color: var(--ywp-midnight); }
.alert-warning { background: var(--ywp-warning-light); border-color: var(--ywp-warning); color: var(--ywp-midnight); }
.alert-danger  { background: var(--ywp-danger-light);  border-color: var(--ywp-danger);  color: var(--ywp-midnight); }
.alert-info    { background: var(--ywp-cream-tint);    border-color: var(--ywp-dark-blue); color: var(--ywp-midnight); }
.alert a { color: var(--ywp-dark-blue); text-decoration: underline; }

/* ---------- Status pills and labels (functional only) ---------- */
.label, .status, .badge {
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 9999px;
}
.label-success,
.status-active, .status-open, .status-completed, .status-paid {
    background-color: var(--ywp-success);
    color: #fff; /* 5.03 */
}
.label-danger,
.status-unpaid, .status-overdue, .status-terminated, .status-cancelled, .status-fraud {
    background-color: var(--ywp-danger);
    color: #fff; /* 5.44 */
}
.label-warning,
.status-pending, .status-pending-transfer, .status-suspended, .status-refunded,
.status-payment-pending {
    background-color: var(--ywp-warning-light);
    color: var(--ywp-midnight); /* 10.37 */
    border: 1px solid var(--ywp-warning);
}
.label-info,
.status-onhold, .status-answered, .status-customer-reply, .status-in-progress {
    background-color: var(--ywp-cream);
    color: var(--ywp-midnight); /* 8.13 */
}
.label-default,
.status-expired, .status-transferred-away, .status-closed, .status-inactive,
.status-delivered, .status-lost, .status-dead {
    background-color: var(--ywp-cream);
    color: var(--ywp-serious-gray); /* 5.22 */
}

/* ---------- Tables ---------- */
.table {
    color: var(--ywp-midnight);
}
.table thead th,
.dataTables_wrapper table.table-list thead th {
    background-color: var(--ywp-cream);
    color: var(--ywp-serious-gray); /* 5.22 */
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ywp-cream);
}
.table td, .table th {
    border-top-color: var(--ywp-cream);
}
.table-hover tbody tr:hover,
.dataTables_wrapper table.table-list tbody tr:hover {
    background-color: rgba(226,224,215,0.4); /* derived: Cream at 40% */
}
.page-item.active .page-link {
    background-color: var(--ywp-dark-blue);
    border-color: var(--ywp-dark-blue);
    color: #fff;
}
.page-link {
    color: var(--ywp-dark-blue);
}

/* ---------- Domain search band (homepage) ----------
   Stays WHITE: the TLD logo images (.com/.net) are dark artwork made for light
   grounds, and the Midnight site bar above already carries the brand band.
   Search = chartreuse money button with 2px Midnight border (rule for white grounds);
   Transfer = Dark Blue fill (6.89). */
.home-domain-search {
    border-bottom: 1px solid var(--ywp-cream);
}
.home-domain-search h2 {
    color: var(--ywp-midnight);
}
.home-domain-search .input-group {
    border-radius: var(--rounding-sm);
}

/* ---------- Order form (standard_cart) ---------- */
#order-standard_cart .header-lined h1,
#order-standard_cart .header-lined .h1 {
    font-weight: 700;
}
#order-standard_cart .products .product,
#order-standard_cart .sub-heading span,
#order-standard_cart .order-summary {
    border-radius: var(--rounding-md);
}
#order-standard_cart .products .product {
    border: 1px solid var(--ywp-cream);
    background: #fff;
    box-shadow: var(--ywp-shadow-sm);
}
#order-standard_cart .products .product header {
    background: #fff;
    border-bottom: 1px solid var(--ywp-cream);
}
#order-standard_cart .products .product header span {
    color: var(--ywp-midnight);
    font-weight: 700;
}
#order-standard_cart .products .product .price {
    color: var(--ywp-midnight);
    font-weight: 700;
}
#order-standard_cart .order-summary {
    background-color: var(--ywp-midnight);
    border: 0;
}
#order-standard_cart .order-summary h2 {
    color: #fff;
}
#order-standard_cart .summary-container {
    background-color: #fff;
    border-radius: 0 0 var(--rounding-md) var(--rounding-md);
}
#order-standard_cart .sub-heading span {
    color: var(--ywp-midnight);
    background: var(--ywp-cream-tint);
    font-weight: 700;
}

/* ---------- 1.0.1: nexus_cart (Shadow DOM cart) ----------
   Rules set on the host element from outside beat the cart's own :host
   defaults, so the cart picks up Poppins (it was drawing in the system font). */
#nexus-root {
    --font-sans: var(--ywp-font);
    --default-font-family: var(--ywp-font);
}
/* The cart paints its left column white (--bg). Make the whole cart page
   white so the column doesn't float as a white slab on the Cream tint. */
main#main-body:has(#nexus-root) {
    background-color: #fff;
}

/* ---------- 1.0.1: Domain pricing featured TLD bars ----------
   Nexus paints .com bright blue and .net yellow with white text
   (2.80 and 1.72, both fail). Midnight with white = 10.75. */
.featured-tld .price,
.featured-tld .price.com,
.featured-tld .price.net,
.featured-tld .price.org {
    background-color: var(--ywp-midnight) !important;
    color: #fff !important;
}

/* ---------- 1.0.1: Off-brand Bootstrap colors in the order form ---------- */
/* "Already Registered?" was Bootstrap teal with white text (3.04, fails) */
.btn-info,
#btnAlreadyRegistered,
#btnNewUserSignup {
    color: var(--ywp-dark-blue) !important;
    background-color: #fff !important;
    border: 2px solid var(--ywp-dark-blue) !important;
}
.btn-info:hover,
#btnAlreadyRegistered:hover,
#btnNewUserSignup:hover {
    color: #fff !important;
    background-color: var(--ywp-dark-blue) !important;
}
/* Mailing-list Yes/No switch: Bootstrap green with white text was 2.48 */
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info {
    background-color: var(--ywp-success) !important; /* white 5.03 */
    color: #fff !important;
}
.bootstrap-switch .bootstrap-switch-handle-off {
    background-color: var(--ywp-cream) !important;
    color: var(--ywp-midnight) !important; /* 8.13 */
}

/* ---------- 1.0.1: Visible field labels + address note (added by js/ywp.js) ---------- */
#main-body .ywp-field-label {
    display: block;
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ywp-midnight);
}
.ywp-address-note {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--ywp-serious-gray); /* 6.16 on Cream tint, 7.00 on white */
}
/* checkout centres its section headings, so centre the note there only */
#order-standard_cart .ywp-address-note {
    text-align: center;
}

/* ---------- 1.0.1: Empty sections hidden until they have content ----------
   Knowledgebase and Downloads are empty, and Announcements only holds the
   stock "Thank you for choosing WHMCS!" sample. Delete the matching selectors
   below once a section has real content. */
#Primary_Navbar-Knowledgebase,
#Primary_Navbar-Announcements,
#Primary_Navbar-Support-Knowledgebase,
#Primary_Navbar-Support-Announcements,
#Primary_Navbar-Support-Downloads,
.card[menuitemname="Recent News"],
header.header form[action*="rp=/knowledgebase"],
.action-icon-btns > div:has(> a[href*="rp=/knowledgebase"]),
.action-icon-btns > div:has(> a[href*="rp=/download"]),
.action-icon-btns > div:has(> a[href*="rp=/announcements"]),
.sidebar a[href*="rp=/knowledgebase"],
.sidebar a[href*="rp=/download"],
.sidebar a[href*="rp=/announcements"] {
    display: none !important;
}

/* ---------- 1.0.2: Order form on phones ----------
   Below 992px the order form puts "Categories" and "Actions" dropdowns above
   the hosting list and the checkout form, so buyers scroll past two menus
   first. Every one of those links is also in the header menu. */
@media (max-width: 991.98px) {
    .sidebar-collapsed {
        display: none !important;
    }
}

/* ---------- 1.0.4: Client area (logged in) ---------- */
/* Account home stat tiles: Nexus colors each underline (green, red, and a
   near-invisible pale yellow). Status colors are never decorative, so all
   four get the same Dark Blue bar. */
.tiles .tile .highlight {
    background-color: var(--ywp-dark-blue) !important;
}
/* Account home "Register a New Domain" panel: the half-width card squeezed
   the input to ~90px beside two buttons. Input on its own line, buttons under it. */
#registerDomainPanel .input-group {
    flex-wrap: wrap;
    gap: 8px;
}
#registerDomainPanel .input-group > .form-control {
    flex: 1 1 100%;
    width: 100%;
    border-radius: var(--rounding-sm) !important;
}
#registerDomainPanel .input-group-append {
    flex: 1 1 100%;
    display: flex;
    gap: 8px;
    margin-left: 0;
}
#registerDomainPanel .input-group-append .btn {
    flex: 1 1 0;
    border-radius: var(--rounding-sm) !important;
}
/* Bootstrap "info" teal text (3.04 on white, e.g. usage "Last Updated") */
.text-info {
    color: var(--ywp-dark-blue) !important; /* 6.89 */
}
/* Info alerts: one look everywhere (some rendered plain white, e.g. the
   domain "Verification Required" notice, which needs to stand out) */
#main-body .alert-info {
    background-color: var(--ywp-cream-tint) !important;
    border-color: var(--ywp-cream) !important;
    border-left: 4px solid var(--ywp-dark-blue) !important;
    color: var(--ywp-midnight);
}
/* View invoice: Nexus's standalone invoice page sat on our Midnight page
   ground, so the "Back to Client Area" link (Dark Blue) was 1.56. Cream tint
   ground = 6.15. Ledger bar was Bootstrap teal (white 3.04) -> Midnight 10.75. */
html:has(.invoice-container),
body:has(.invoice-container) {
    background-color: var(--ywp-cream-tint);
}
.invoice-container .bg-info {
    background-color: var(--ywp-midnight) !important;
    color: #fff !important;
}

/* ---------- 1.0.5: Full-site QA pass (desktop 1280 + phone 390) ---------- */
/* Bootstrap blue #007bff (off-brand) on the 404 "Oops!" and other .text-primary */
.text-primary {
    color: var(--ywp-dark-blue) !important; /* 6.89 white, 6.15 Cream tint */
}
/* 404 / error pages: "Oops!" at Bootstrap display-1 overflowed phones */
#main-body .display-1 {
    font-size: clamp(3rem, 14vw, 6rem);
}
/* Pages with no main container (404) left a .row's -15px gutters hanging
   off both sides: 15px of sideways scroll at every width */
main#main-body > div:not(.container) > .row {
    margin-left: 0;
    margin-right: 0;
}
/* Account home stat tile labels: Nexus gray was 3.34 on white */
.tiles .tile .title {
    color: var(--ywp-serious-gray) !important; /* 7.00 */
}
/* Portal home .com / .net prices beside the TLD logos: #888 was 3.54 */
.home-domain-search .tld-logos li,
.tld-logos li {
    color: var(--ywp-serious-gray) !important;
}
/* Ticket / contact message editor footer ("lines: 0 words: 0", "saved"): 2.73 */
.markdown-editor-status,
.markdown-editor-status .small-font,
.markdown-save {
    color: var(--ywp-serious-gray) !important;
}
/* Small text links that stand alone (not inside a sentence) get a 24px+ target */
#main-body .card-footer a:not(.btn),
#main-body a[href*="password/reset"]:not(.btn),
#main-body a[href*="register.php"]:not(.btn) {
    display: inline-block;
    padding-top: 4px;
    padding-bottom: 4px;
}

@media (max-width: 767.98px) {
    /* My Domains bulk-action buttons ran 92px off a 390px screen */
    #main-body .btn-group.btn-group-sm {
        flex-wrap: wrap;
    }
}
@media (max-width: 575.98px) {
    /* Plain tables inside cards (Payment Methods, User Management) were wider
       than the card on phones; let them scroll inside the card instead of
       pushing the page sideways. DataTables lists have their own wrapper. */
    #main-body .card-body table.table:not(.dataTable) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* View invoice: the paper card was full width plus a 15px margin */
    .invoice-container {
        width: auto !important;
        margin: 0 !important;
        padding: 24px 16px !important;
    }
}

/* ---------- Footer = WordPress footer (Midnight) ---------- */
footer.footer.ywp-footer {
    padding: 40px 0 24px;
    background-color: var(--ywp-midnight);
    color: #fff;
    font-size: 15px;
}
.ywp-footer-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.ywp-footer-brand img {
    height: 44px;
    width: auto;
}
footer.footer .ywp-footer-nav {
    gap: 4px 20px;
}
footer.footer .ywp-footer-nav .nav-link {
    color: rgba(255,255,255,0.85); /* 8.29 */
    padding: 8px 0;
    font-weight: 600;
}
footer.footer .ywp-footer-nav .nav-link:hover {
    color: #fff;
    text-decoration: underline;
}
.ywp-footer-tools {
    margin: 0;
}
footer.footer .copyright {
    margin: 24px 0 0;
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    text-align: left;
}

/* ---------- Motion: feedback only, and none under reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Small screens ---------- */
@media (max-width: 575.98px) {
    header.header .ywp-brand .logo-img {
        height: 38px;
    }
    .ywp-brand-label {
        font-size: 12px;
        padding-left: 8px;
    }
    header.header .ywp-sitebar .container {
        justify-content: space-between !important;
    }
    .ywp-footer-top {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* 1.0.6: intro line in the YWP account-home panels (hooks/ywp-home-panels.php) */
.client-home-cards .ywp-panel-intro {
    margin: 0;
    font-size: var(--text-md);
    color: var(--ywp-serious-gray); /* 6.9 on white */
}

/* 1.0.7: YWP account-home panels. Nexus caps home lists at 170px (scrolls)
   and sets badges in small caps; these panels hold at most 6 rows, so show
   them all, left-aligned, with the date line in sentence case under the name. */
.client-home-cards .card:has(.ywp-panel-intro) .card-body {
    padding: 16px 20px;
    text-align: left;
}
.client-home-cards .card:has(.ywp-panel-intro) .ywp-panel-intro {
    padding: 0;
    text-align: left;
}
.client-home-cards .card:has(.ywp-panel-intro) .list-group {
    max-height: none;
    overflow: visible;
}
.client-home-cards .card:has(.ywp-panel-intro) .list-group-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.client-home-cards .card:has(.ywp-panel-intro) .list-group-item .badge {
    order: 2;
    float: none;
    margin: 0;
    padding: 0;
    background: none;
    color: var(--ywp-serious-gray); /* 6.9 on white */
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    text-align: left;
}