/*
 * Plugmind Web's client area (my.plugmindweb.com), in plugmindweb.com's own design, on Plugmind Calm for WHMCS.
 * WHMCS's place for a host's own CSS (templates/plugmind-calm/css/custom.css), loaded after Calm's on every page,
 * cart included, and kept by Plugmind Hub when Calm updates. Put there by ../setup.php, with the DM Mono files in
 * assets/fonts/plugmind-web/. The values are the website's (Website/child-theme/plugmind-child/assets/css/plugmind.css
 * and Website/divi/build.py): Open Sans, DM Mono labels, Midnight and Synapse, white cards on Mist.
 */

@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../../../assets/fonts/plugmind-web/dm-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../../../assets/fonts/plugmind-web/dm-mono-latin-500-normal.woff2') format('woff2'); }

:root {
    --pmw-ink: #141A2E;
    --pmw-deep: #0E1324;
    --pmw-panel: #1F2742;
    --pmw-synapse: #7C5CFF;
    --pmw-synapse-deep: #5B3FE0;
    --pmw-mist: #F5F4FA;
    --pmw-slate: #535A6E;
    --pmw-text: #353B4E;
    --pmw-line: #E6E4EE;
    --pmw-on-dark: #C4C8D6;
    --pmw-muted-on-dark: #A9AEC0;
    --pmw-mono: 'DM Mono', ui-monospace, Menlo, Consolas, monospace;
    /* Calm's own tokens, as the website has them */
    --calm-font: 'Open Sans', Arial, sans-serif;
    --calm-bg: var(--pmw-mist);
    --calm-surface: #FFFFFF;
    --calm-text: var(--pmw-ink);
    --calm-muted: var(--pmw-slate);
    --calm-border: var(--pmw-line);
    --calm-radius: 18px;
    --calm-radius-sm: 12px;
    --calm-shadow: none;
    --calm-shadow-lift: 0 10px 30px rgb(20 26 46 / .08);
    --calm-top-h: 5rem;
}

body { color: var(--pmw-text); }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { color: var(--pmw-ink); font-weight: 700; letter-spacing: -.02em; }
h1, .h1 { letter-spacing: -.035em; }
::selection { background: var(--pmw-synapse); color: #FFFFFF; }

/* Buttons: white on Synapse deep, as the website's buttons (6.5:1; ink on the lighter Synapse is only 3.9:1) */
.btn { border-radius: 12px; font-weight: 600; }
.btn-primary, .btn-success, .btn-order-now,
.btn-primary.disabled, .btn-primary:disabled { background-color: var(--pmw-synapse-deep) !important; border-color: var(--pmw-synapse-deep) !important; color: #FFFFFF !important; }
.btn-primary:hover, .btn-primary:focus, .btn-success:hover, .btn-success:focus, .btn-order-now:hover,
.btn-primary:not(:disabled):not(.disabled):active { background-color: #4A31C4 !important; border-color: #4A31C4 !important; color: #FFFFFF !important; }
.btn-primary .fas, .btn-primary .far, .btn-order-now .fas { color: inherit; }
a { color: var(--pmw-synapse-deep); }
/* The selected item in WHMCS's side panels */
.list-group-item.active, .list-group-item-action.active, .sidebar .list-group-item.active { background-color: var(--pmw-synapse-deep) !important; border-color: var(--pmw-synapse-deep) !important; color: #FFFFFF !important; }

/* The header: the website's bar, links and Client area button */
.calm-site { box-shadow: 0 1px 0 var(--pmw-line); }
.calm-site-bar .calm-site-inner { min-height: 5rem; }
.calm-site-brand .calm-wordmark { font-size: 1.65rem; letter-spacing: -.03em; color: var(--pmw-ink); }
.calm-wordmark--label .calm-wordmark-second { font-family: var(--pmw-mono); font-size: .5em; font-weight: 400; letter-spacing: .28em; color: #353B4E; }
.calm-wordmark-icon { width: 2.25rem; height: 2.25rem; border-radius: 10px; }
.calm-site-links a { padding: .45rem .65rem; color: var(--pmw-ink); font-size: 15px; font-weight: 500; }
.calm-site-links a:hover { background: transparent; color: var(--pmw-synapse-deep); }
.calm-site .calm-tool { border-radius: 999px; }
/* The client area's own menu: a quiet bar on Mist under the header, not a second dark band */
.calm-site-sub { background: var(--pmw-mist); border-bottom: 1px solid var(--pmw-line); padding: .4rem 0; }
.calm-site-sub .navbar-nav > li > a { color: var(--pmw-text); font-size: 15px; }
.calm-site-sub .navbar-nav > li > a:hover, .calm-site-sub .navbar-nav > li.show > a { color: var(--pmw-ink); background: #FFFFFF; }
.calm-site-sub .navbar-nav > li.active > a, .calm-site-sub .navbar-nav > li > a[aria-current] { color: var(--pmw-ink); background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--pmw-line); }
@media (max-width: 991.98px) {
    .calm-site-links-small { border-bottom-color: var(--pmw-line); }
    .calm-site-links-small a, .calm-site-sub .navbar-nav .dropdown-menu .dropdown-item a { color: var(--pmw-ink); }
    .calm-site-links-small a:hover { background: #FFFFFF; color: var(--pmw-ink); }
}

/* The homepage welcome: the website's dark hero band */
.calm-hero { background: var(--pmw-ink) !important; color: var(--pmw-on-dark); padding: 4.5rem 0 3.5rem; border: 0; }
.calm-hero::before, .calm-hero::after { display: none; }
.calm-hero .calm-eyebrow { color: var(--pmw-muted-on-dark); font-family: var(--pmw-mono); font-size: 12px; font-weight: 400; letter-spacing: .12em; }
.calm-hero .calm-greeting { color: var(--pmw-on-dark); }
.calm-hero h1 { color: var(--pmw-mist); font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.25rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; }
.calm-hero .calm-lead { color: var(--pmw-on-dark); font-size: 1.2rem; }
.calm-hero .calm-search { border-color: transparent; box-shadow: none; }
.calm-hero .calm-search-button { background: var(--pmw-synapse-deep); color: #FFFFFF; }
.calm-hero .calm-search-button:hover { background: #4A31C4; }

/* Small labels in DM Mono, as the website's eyebrows (headings stay in Open Sans) */
.calm-eyebrow, .calm-site-footer-head, .product .qty { font-family: var(--pmw-mono); }
.calm-eyebrow { font-weight: 400; letter-spacing: .12em; }

/* Cards: white, 18px corners and a fine line, without shadows, as the website's */
.card, .primary-content .card, .calm-help-card { border-color: var(--pmw-line); box-shadow: none; }
.calm-help-card:hover { box-shadow: var(--calm-shadow-lift); }

/* The store: the website's plan cards */
body #order-standard_cart .products .product { border: 1px solid var(--pmw-line); border-radius: 18px; box-shadow: none; background: #FFFFFF; overflow: hidden; }
body #order-standard_cart .products .product header { background: transparent; border: 0; padding: 22px 22px 6px; }
body #order-standard_cart .products .product header span { color: var(--pmw-ink); font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
/* standard_cart floats the description left and the price and button right; here they stack, as on the website. "body" puts
   these after Calm's cart styles, which load later. */
body #order-standard_cart .products .product .product-desc, body #order-standard_cart .products .product .product-desc p { max-width: none; }
body #order-standard_cart .products .product .product-desc { float: none; width: auto; padding: 0 22px 14px; color: var(--pmw-slate); font-size: 15px; }
body #order-standard_cart .products .product footer { float: none; width: auto; display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin: 0; padding: 0 22px 22px; text-align: left; }
body #order-standard_cart .products .product .product-pricing { float: none; width: auto; margin: 0; text-align: left; color: var(--pmw-slate); font-size: 14px; }
body #order-standard_cart .products .product .product-pricing .price { display: block; color: var(--pmw-ink); font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
body #order-standard_cart .products .product .btn-order-now { display: block; width: 100%; padding: 11px 18px; font-size: 15px; white-space: nowrap; }
body #order-standard_cart .header-lined h1, body #order-standard_cart h1 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); letter-spacing: -.035em; }

/* The footer: the website's, on Midnight deep */
.calm-site-footer, footer.footer { background: var(--pmw-deep); }
.calm-site-footer { padding-top: 4rem; }
.calm-site-footer .calm-wordmark { color: var(--pmw-mist); font-size: 1.65rem; }
.calm-site-footer .calm-wordmark--label .calm-wordmark-second { color: var(--pmw-on-dark); }
.calm-site-footer-head { color: var(--pmw-muted-on-dark); font-size: 12px; font-weight: 400; letter-spacing: .12em; }
.calm-site-footer li a { color: var(--pmw-mist); font-size: 15px; }
html[data-calm-layout="top"] footer.footer { border-top: 1px solid #2A3352; }
footer.footer .nav-link, footer.footer .copyright, .calm-site-note { color: var(--pmw-muted-on-dark); font-size: 13px; }