/* *****************************************************

    Webcafe theme for WHMCS 9 (child of Nexus)

    Part 1 remaps the Nexus colour tokens (same names as
    templates/nexus/css/custom.css) to the Webcafe palette.
    Part 2 adds Webcafe components (wc-*) and brand overrides.

    Source of truth: Webcafe Marketing/_Brand/Webcafe-Style-Guide.docx
    Rules: lime buttons with navy text; navy only in the footer;
    never cyan or lime for small text on white.

***************************************************** */

/* ---------- Part 1: Nexus tokens ---------- */
:root {
    /* Webcafe brand */
    --wc-cyan: #00B2FE;
    --wc-cyan-2: #35C3FF;
    --wc-lime: #86C53C;
    --wc-lime-soft: #EAF6D7;
    --wc-navy: #0E1B38;
    --wc-sky: #EBF8FF;
    --wc-sky-2: #E0F2FE;
    --wc-sky-line: #BAE6FD;
    --wc-slate: #1E293B;
    --wc-grey: #475569;
    --wc-sky-text: #93C5FD;
    --wc-font-head: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --wc-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

    --white: #fff;

    /* Neutral shades (slate, biased toward the navy) */
    --neutral-50: #F8FAFC;
    --neutral-100: #F1F5F9;
    --neutral-200: #E2E8F0;
    --neutral-300: #CBD5E1;
    --neutral-400: #94A3B8;
    --neutral-500: #64748B;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-800: #1E293B;
    --neutral-900: #0E1B38;
    --neutral-950: #0A1428;

    /* Primary scale: sky to navy */
    --primary-50: #EBF8FF;
    --primary-100: #E0F2FE;
    --primary-200: #BAE6FD;
    --primary-300: #93C5FD;
    --primary-400: #35C3FF;
    --primary-500: #00B2FE;
    --primary-600: #0284C7;
    --primary-700: #1E3A66;
    --primary-800: #142850;
    --primary-900: #0E1B38;
    --primary-950: #0A1428;

    /* Primary = navy, so links and active states stay readable.
       Buttons get lime separately in Part 2. */
    --primary: var(--primary-900);
    --primary-lifted: var(--primary-800);
    --primary-accented: var(--primary-700);

    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    --success: #3F7D0F;
    --success-lifted: #356A0C;
    --success-accented: #2B560A;

    --info: #0369A1;
    --info-lifted: #075985;
    --info-accented: #0C4A6E;

    --notice: #6D28D9;
    --notice-lifted: #5B21B6;
    --notice-accented: #4C1D95;

    --warning: #B45309;
    --warning-lifted: #92400E;
    --warning-accented: #78350F;

    --error: #B91C1C;
    --error-lifted: #991B1B;
    --error-accented: #7F1D1D;

    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    --text-inverted: var(--white);
    --text-muted: var(--neutral-500);
    --text-lifted: var(--neutral-600);
    --text-accented: var(--neutral-700);
    --text: var(--wc-slate);

    --border-muted: var(--wc-sky-2);
    --border: var(--wc-sky-line);
    --border-lifted: var(--primary-300);
    --border-accented: var(--wc-cyan);

    --bg: var(--white);
    --bg-muted: var(--wc-sky);
    --bg-lifted: var(--wc-sky-2);
    --bg-accented: var(--wc-sky-line);
    --bg-inverted: var(--wc-navy);

    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

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

    --rounding-sm: 0.375rem;
    --rounding-md: 0.75rem;
    --rounding-lg: 1rem;

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

/* ---------- Part 2: Webcafe brand ---------- */

/* Type */
body.wc-theme { font-family: var(--wc-font-body); color: var(--wc-slate); background: #fff; }
.wc-theme h1, .wc-theme h2, .wc-theme h3, .wc-theme h4, .wc-theme h5,
.wc-theme .h1, .wc-theme .h2, .wc-theme .h3, .wc-theme .h4, .wc-theme .h5,
.wc-theme .card-title, .wc-theme .btn, .wc-theme .navbar-nav .nav-link {
    font-family: var(--wc-font-head);
}
.wc-theme h1, .wc-theme h2, .wc-theme h3, .wc-theme h4 { color: var(--wc-navy); letter-spacing: -0.01em; }
.wc-theme a { color: var(--wc-navy); }
.wc-theme a:hover { color: var(--info); }
.wc-theme :focus-visible { outline: 3px solid var(--wc-cyan); outline-offset: 2px; }

/* Buttons: lime pill, navy text, cyan on hover */
.wc-theme .btn { border-radius: 999px; font-weight: 700; }
.wc-theme .btn-primary,
.wc-theme .btn-success {
    background: var(--wc-lime); border-color: var(--wc-lime); color: var(--wc-navy);
}
.wc-theme .btn-primary:hover, .wc-theme .btn-primary:focus,
.wc-theme .btn-success:hover, .wc-theme .btn-success:focus,
.wc-theme .btn-primary:not(:disabled):not(.disabled):active {
    background: var(--wc-cyan); border-color: var(--wc-cyan); color: var(--wc-navy);
}
.wc-theme .btn-outline-primary, .wc-theme .btn-default, .wc-theme .wc-btn-ghost {
    background: transparent; border: 2px solid var(--wc-navy); color: var(--wc-navy);
}
.wc-theme .btn-outline-primary:hover, .wc-theme .btn-default:hover, .wc-theme .wc-btn-ghost:hover {
    background: var(--wc-navy); border-color: var(--wc-navy); color: #fff;
}
.wc-theme .badge-success { background: var(--wc-lime); color: var(--wc-navy); }
.wc-theme .badge-info { background: var(--wc-sky); color: var(--wc-navy); border: 1px solid var(--wc-cyan); }

/* Header */
.wc-theme .header { background: #fff; border-bottom: 1px solid var(--wc-sky-line); }
.wc-theme .header .topbar { background: var(--wc-sky); color: var(--wc-grey); font-size: 13px; }
.wc-theme .wc-topstrip .container { padding-top: 7px; padding-bottom: 7px; gap: 12px; }
.wc-theme .wc-topstrip a { font-weight: 600; text-decoration: none; }
.wc-theme .header .logo-img { max-height: 44px; width: auto; }
.wc-theme .main-navbar-wrapper { background: #fff; border-top: 1px solid var(--wc-sky); }
.wc-theme .main-navbar-wrapper .navbar-nav .nav-link { color: var(--wc-navy); font-weight: 600; border-radius: 8px; }
.wc-theme .main-navbar-wrapper .navbar-nav .nav-link:hover,
.wc-theme .main-navbar-wrapper .navbar-nav .active > .nav-link { background: var(--wc-sky); color: var(--wc-navy); }
/* Knowledgebase search: the wrapper is the pill; the icon button and input inside are borderless */
.wc-theme .header .input-group.search {
    flex-wrap: nowrap; align-items: center; background: #fff;
    border: 1px solid var(--wc-sky-line); border-radius: 999px; overflow: hidden;
}
.wc-theme .header .input-group.search:focus-within { border-color: var(--wc-cyan); box-shadow: 0 0 0 3px var(--wc-sky-2); }
.wc-theme .header .input-group.search .input-group-prepend { margin: 0; }
.wc-theme .header .input-group.search .btn.btn-default,
.wc-theme .header .input-group.search .btn.btn-default:hover,
.wc-theme .header .input-group.search .btn.btn-default:focus {
    background: transparent; border: 0; border-radius: 0; box-shadow: none; outline: 0;
    color: var(--wc-grey); padding: 0 6px 0 16px; height: 40px;
}
.wc-theme .header .input-group.search .form-control,
.wc-theme .header .input-group.search .form-control:focus {
    background: transparent; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    outline: 0 !important; height: 40px; padding: 0 16px 0 6px; color: var(--wc-slate);
}
.wc-theme .cart-btn .badge { background: var(--wc-lime); color: var(--wc-navy); }
.wc-theme .wc-btn-order { padding: 8px 18px; font-size: 14px; }
.wc-theme .master-breadcrumb { background: var(--wc-sky); }

/* Page body */
.wc-theme #main-body { padding-top: 40px; padding-bottom: 72px; }
.wc-theme .card { border-color: var(--wc-sky-line); border-radius: 16px; }
.wc-theme .sidebar .card-header, .wc-theme .card-header { background: var(--wc-sky); border-color: var(--wc-sky-line); }
.wc-theme .form-control:focus { border-color: var(--wc-cyan); box-shadow: 0 0 0 3px var(--wc-sky-2); }

/* Shared components */
.wc-eyebrow {
    display: inline-flex; align-items: center; gap: 10px; color: var(--wc-navy);
    font: 700 12px/1 var(--wc-font-body); letter-spacing: .14em; text-transform: uppercase;
}
.wc-eyebrow::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: var(--wc-cyan); }
.wc-lead { font-size: 18px; color: var(--wc-grey); max-width: 60ch; }
.wc-icon {
    display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px;
    border-radius: 12px; background: var(--wc-lime); color: var(--wc-navy); font-size: 18px;
}
.wc-pill {
    display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px;
    background: var(--wc-lime); color: var(--wc-navy); font: 700 12px/1 var(--wc-font-body); white-space: nowrap;
}
.wc-pill-sky { background: var(--wc-sky); border: 1px solid var(--wc-cyan); }
.wc-sec { margin-bottom: 64px; }
.wc-sec-head { display: grid; gap: 10px; max-width: 640px; margin-bottom: 28px; }
.wc-sec-head h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; margin: 0; }
.wc-grid { display: grid; gap: 20px; }
.wc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1019px) { .wc-grid-3, .wc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .wc-grid-3, .wc-grid-4 { grid-template-columns: 1fr; } }
.wc-card {
    display: block; background: #fff; border: 1px solid var(--wc-sky-line); border-radius: 16px; padding: 24px;
    transition: border-color .15s, transform .15s;
}
.wc-card h3 { font-size: 19px; font-weight: 700; margin: 14px 0 6px; }
.wc-card p { color: var(--wc-grey); margin: 0; }
.wc-card-row { display: flex; gap: 16px; align-items: flex-start; }
.wc-card-row h3 { margin-top: 0; }
a.wc-card-link { color: inherit; text-decoration: none; }
a.wc-card-link:hover { border-color: var(--wc-cyan); transform: translateY(-2px); color: inherit; }
.wc-more { display: inline-block; margin-top: 12px; font: 700 14px var(--wc-font-head); color: var(--wc-navy); }
.wc-xlink {
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    background: var(--wc-sky); border: 1px solid var(--wc-cyan); border-radius: 20px; padding: 28px 32px; margin-bottom: 64px;
}
.wc-xlink-body { display: flex; gap: 18px; align-items: flex-start; flex: 1 1 380px; min-width: 0; }
.wc-xlink h3 { font-size: 20px; margin: 0 0 4px; }
.wc-xlink p { color: var(--wc-grey); margin: 0; }
.wc-cta { text-align: center; display: grid; gap: 16px; justify-items: center; background: var(--wc-sky); border-radius: 24px; padding: 56px 24px; }
.wc-cta h2 { margin: 0; }
@media (prefers-reduced-motion: reduce) { .wc-card { transition: none; } }

/* Homepage hero */
.wc-hero { background: linear-gradient(135deg, var(--wc-sky-2) 0%, var(--wc-sky) 45%, #fff 100%); padding: 64px 0 72px; }
.wc-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.wc-hero-grid > * { min-width: 0; }
@media (max-width: 1019px) { .wc-hero-grid { grid-template-columns: 1fr; } }
.wc-hero-copy { display: grid; gap: 20px; }
.wc-hero h1 { font-size: clamp(34px, 5vw, 54px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
.wc-dsearch {
    display: flex; gap: 8px; background: #fff; border: 2px solid var(--wc-sky-line);
    border-radius: 999px; padding: 6px; max-width: 580px;
}
.wc-dsearch:focus-within { border-color: var(--wc-cyan); box-shadow: 0 0 0 4px var(--wc-sky-2); }
/* The pill shows focus; the input itself must not draw Nexus's square border or the global outline */
.wc-dsearch input,
.wc-dsearch input:focus,
.wc-dsearch input:focus-visible {
    flex: 1; min-width: 0; height: auto; margin: 0; padding: 10px 14px;
    border: 0 !important; border-radius: 0 !important; outline: 0 !important; box-shadow: none !important;
    background: transparent !important; font: 500 16px var(--wc-font-body); color: var(--wc-slate);
}
.wc-dsearch .btn { flex: none; }
.wc-tlds { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--wc-grey); }
.wc-tlds b { font-family: var(--wc-font-head); color: var(--wc-navy); }
.wc-dash { background: #fff; border: 1px solid var(--wc-sky-line); border-radius: 20px; padding: 22px; box-shadow: 0 20px 50px -20px rgba(0, 178, 254, .45); }
.wc-dash-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--wc-sky-line); }
.wc-dash-h strong { font-family: var(--wc-font-head); color: var(--wc-navy); }
.wc-dash-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--wc-sky); color: var(--wc-grey); }
.wc-dash-row:last-child { border-bottom: 0; }
.wc-dash-row > span:first-child { color: var(--wc-slate); }
.wc-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--wc-lime); margin-right: 8px; box-shadow: 0 0 0 4px var(--wc-lime-soft); }

/* Content pages (fair use, business email) */
.wc-page-hero { background: linear-gradient(135deg, var(--wc-sky-2), var(--wc-sky) 50%, #fff); border-radius: 24px; padding: 44px 40px; margin-bottom: 48px; display: grid; gap: 14px; }
.wc-page-hero h1 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; line-height: 1.08; margin: 0; }
@media (max-width: 639px) { .wc-page-hero { padding: 32px 22px; } }
.wc-prose { max-width: 760px; display: grid; gap: 32px; }
.wc-prose section { display: grid; gap: 10px; }
.wc-prose h2 { font-size: 24px; font-weight: 700; margin: 0; }
.wc-prose ul { margin: 0; padding-left: 22px; }
.wc-prose li + li { margin-top: 6px; }
.wc-tk { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.wc-tk li { display: flex; gap: 12px; align-items: flex-start; }
.wc-tk li::before {
    content: "\f00c"; font-family: "Font Awesome 5 Pro"; font-weight: 900; flex: none;
    display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
    background: var(--wc-lime); color: var(--wc-navy); font-size: 11px;
}
.wc-table-wrap { overflow-x: auto; border: 1px solid var(--wc-sky-line); border-radius: 16px; background: #fff; }
.wc-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.wc-table th, .wc-table td { padding: 14px 18px; border-bottom: 1px solid var(--wc-sky); text-align: left; vertical-align: top; }
.wc-table thead th { background: var(--wc-sky); color: var(--wc-navy); font: 700 14px var(--wc-font-head); border-bottom: 1px solid var(--wc-sky-line); }
.wc-table tr:last-child td { border-bottom: 0; }
.wc-table td:first-child { font-weight: 600; color: var(--wc-navy); }

/* Footer: the only navy area */
.wc-theme .footer.wc-footer { background: var(--wc-navy); color: var(--wc-sky-text); padding: 64px 0 28px; font-size: 15px; }
.wc-footer a { color: var(--wc-sky-text); text-decoration: none; }
.wc-footer a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--wc-cyan); }
.wc-footer h4 { color: #fff; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.wc-footer ul { list-style: none; margin: 0; padding: 0; }
.wc-footer-grid ul li + li { margin-top: 8px; }
.wc-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
@media (max-width: 899px) { .wc-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 539px) { .wc-footer-grid { grid-template-columns: 1fr; } }
.wc-footer-brand { display: grid; gap: 14px; align-content: start; }
.wc-wordmark { font: 800 30px/1 var(--wc-font-head); color: #fff; letter-spacing: -0.02em; }
.wc-wordmark em { font-style: normal; color: var(--wc-lime); }
.wc-footer-base {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    border-top: 1px solid rgba(147, 197, 253, .25); margin-top: 40px; padding-top: 22px; font-size: 13.5px;
}

/* Order form: pure_comparison (store pages) */
body.wc-theme #order-pure_comparison { color: var(--wc-slate); font-family: var(--wc-font-body); }
body.wc-theme #order-pure_comparison h3,
body.wc-theme #order-pure_comparison h4 { color: var(--wc-navy); font-family: var(--wc-font-head); }
body.wc-theme #order-pure_comparison h5 { color: var(--wc-grey); }
body.wc-theme #order-pure_comparison .price-table-container ul li { background: none; }
body.wc-theme #order-pure_comparison .price-table-container .price-table {
    background: #fff; border: 1px solid var(--wc-sky-line); border-radius: 20px; overflow: hidden; box-shadow: none;
}
body.wc-theme #order-pure_comparison .price-table-container .price-table.active { border: 2px solid var(--wc-cyan); }
body.wc-theme #order-pure_comparison .price-table-container .price-table .top-head,
body.wc-theme #order-pure_comparison .price-table-container .price-table.active .top-head { background: var(--wc-sky); filter: none; }
body.wc-theme #order-pure_comparison .price-table-container .price-table .top-head .top-area h4,
body.wc-theme #order-pure_comparison .price-table-container .price-table .top-head .top-area p { color: var(--wc-navy); }
body.wc-theme #order-pure_comparison .price-table-container .price-table ul li { border-bottom-color: var(--wc-sky); color: var(--wc-slate); }
body.wc-theme #order-pure_comparison .price-table-container .price-area,
body.wc-theme #order-pure_comparison .price-table-container .price-table.active .price-area { background: #fff; filter: none; color: var(--wc-grey); }
body.wc-theme #order-pure_comparison .price-table-container .price-area .price { color: var(--wc-navy); font-family: var(--wc-font-head); font-weight: 800; }
body.wc-theme #order-pure_comparison .price-table-container .order-button {
    background: var(--wc-lime); color: var(--wc-navy); border: 0; border-radius: 999px; filter: none;
    font-family: var(--wc-font-head); text-shadow: none; box-shadow: none;
}
body.wc-theme #order-pure_comparison .price-table-container .order-button:hover { background: var(--wc-cyan); color: var(--wc-navy); }
body.wc-theme #order-pure_comparison .price-table-container .price-table .popular-plan .plan-container { background: none; }
body.wc-theme #order-pure_comparison .price-table-container .price-table .popular-plan .plan-container .txt-container {
    background: var(--wc-lime); color: var(--wc-navy); filter: none; text-shadow: none; font-weight: 700;
}
body.wc-theme #order-pure_comparison .includes-features .head-area { background: none; }
body.wc-theme #order-pure_comparison .includes-features .head-area span { background: #fff; color: var(--wc-navy); font-family: var(--wc-font-head); }