:root {
	/* Brand palette */
	--hl-purple: #b118c8;
	--hl-purple-600: #9b14b0; /* hover/darker variant */
	--hl-purple-50: #f8e8fb; /* tinted background */
	--hl-sky: #93d6ff;
	--hl-sky-600: #6fc3f5;
	--hl-yellow: #ffe576;
	--hl-yellow-600: #f5d24a;
	--hl-charcoal: #333333;
	--hl-charcoal-600: #1a1a1a; /* hover/darker variant */
	--hl-white: #ffffff;

	/* add default danger and success colors */
	--hl-danger: #ff4d4f;
	--hl-danger-600: #d9363e;
	--hl-success: #52c41a;
	--hl-success-600: #389e0d;

	/* Type */
	--hl-font-heading: 'Ultra', Georgia, serif;
	--hl-font-body:
		'Comfortaa', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ----- Typography ------------------------------------------------------- */

body,
.bodyContainer,
.body-container {
	font-family: var(--hl-font-body);
	color: var(--hl-charcoal);
	background-color: var(--hl-white);
}

h1,
h2,
h3,
.h1,
.h2,
.h3,
.page-header h1,
.homepage-cta h1,
.hero h1 {
	font-family: var(--hl-font-heading);
	font-weight: 400; /* Ultra only ships 400 */
	letter-spacing: 0.5px;
	color: var(--hl-charcoal);
}

h4,
h5,
h6,
.h4,
.h5,
.h6 {
	font-family: var(--hl-font-body);
	font-weight: 600;
	color: var(--hl-charcoal);
}

a {
	color: var(--hl-purple);
}
a:hover,
a:focus {
	color: var(--hl-purple-600);
	text-decoration: underline;
}

/* ----- Buttons --------------------------------------------------------- */

.btn {
	font-family: var(--hl-font-body);
	font-weight: 600;
	border-radius: 6px;
	letter-spacing: 0.2px;
}

.btn-primary,
.btn-success,
.homepage-search button,
.btn.btn-cta,
.continue-shopping {
	background-color: var(--hl-purple);
	border-color: var(--hl-purple);
	color: var(--hl-white);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
	background-color: var(--hl-purple-600);
	border-color: var(--hl-purple-600);
	color: var(--hl-white);
}

.btn-info,
.btn-default {
	background-color: var(--hl-sky);
	border-color: var(--hl-sky);
	color: var(--hl-charcoal);
}
.btn-info:hover,
.btn-info:focus,
.btn-default:hover,
.btn-default:focus {
	background-color: var(--hl-sky-600);
	border-color: var(--hl-sky-600);
	color: var(--hl-charcoal);
}

.btn-warning,
.btn-promo {
	background-color: var(--hl-yellow);
	border-color: var(--hl-yellow);
	color: var(--hl-charcoal);
}
.btn-warning:hover,
.btn-warning:focus,
.btn-promo:hover {
	background-color: var(--hl-yellow-600);
	border-color: var(--hl-yellow-600);
	color: var(--hl-charcoal);
}

/* ----- Header / Nav ---------------------------------------------------- */

.navbar,
.navbar-default,
header.header {
	background-color: var(--hl-white);
	border-bottom: 1px solid #eee;
}

.navbar-default .navbar-nav > li > a {
	color: var(--hl-charcoal);
	font-family: var(--hl-font-body);
	font-weight: 500;
}

.navbar-default .navbar-nav > li > a:focus {
	color: var(--hl-purple);
	border-color: var(--hl-purple) !important;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > li > a:hover {
	color: var(--hl-purple);
	background-color: transparent;
}

.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .active > a:focus,
.navbar-main .navbar-nav > .active > a:hover,
.navbar-main .navbar-nav > .open > a,
.navbar-main .navbar-nav > .open > a:focus,
.navbar-main .navbar-nav > .open > a:hover,
.navbar-main .navbar-nav > li > a:focus,
.navbar-main .navbar-nav > li > a:hover {
	color: var(--hl-white);
	background-color: var(--hl-purple);
}

.navbar-brand {
	font-family: var(--hl-font-heading);
}

.navbar-main li.account {
	background-color: var(--hl-purple);
	color: var(--hl-white) !important;
}

.navbar-main li.account.open {
	background-color: var(--hl-purple-600);
	color: var(--hl-white) !important;
}

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

.panel-sidebar > .panel-heading,
.panel-primary > .panel-heading {
	background-color: var(--hl-purple);
	border-color: var(--hl-purple);
	color: var(--hl-white);
}

.panel-sidebar .list-group-item.active,
.panel-sidebar .list-group-item.active:hover {
	background-color: var(--hl-purple);
	border-color: var(--hl-purple);
	color: var(--hl-white);
}

.panel-default > .panel-heading {
	background-color: var(--hl-purple-50);
	color: var(--hl-charcoal);
	border-color: #eee;
}

/* ----- Forms ----------------------------------------------------------- */

.form-control:focus {
	border-color: var(--hl-purple);
	box-shadow: 0 0 0 3px rgba(177, 24, 200, 0.15);
}

label {
	color: var(--hl-charcoal);
	font-weight: 500;
}

/* ----- Alerts / promos ------------------------------------------------- */

.alert-info {
	background-color: var(--hl-sky);
	border-color: var(--hl-sky-600);
	color: var(--hl-charcoal);
}

.alert-warning,
.promo-banner,
.alert-promo {
	background-color: var(--hl-yellow);
	border-color: var(--hl-yellow-600);
	color: var(--hl-charcoal);
}

.alert-success {
	background-color: var(--hl-purple-50);
	border-color: var(--hl-purple);
	color: var(--hl-charcoal);
}

.label-primary,
.badge-primary,
.badge {
	background-color: var(--hl-purple);
	color: var(--hl-white);
}

.label-info,
.badge-info {
	background-color: var(--hl-sky);
	color: var(--hl-charcoal);
}

.label-warning,
.badge-warning {
	background-color: var(--hl-yellow);
	color: var(--hl-charcoal);
}

/* ----- Tables ---------------------------------------------------------- */

.table > thead > tr > th {
	background-color: var(--hl-purple-50);
	color: var(--hl-charcoal);
	border-bottom: 2px solid var(--hl-purple);
	font-family: var(--hl-font-body);
	font-weight: 600;
}

/* ----- Pagination ------------------------------------------------------ */

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
	background-color: var(--hl-purple);
	border-color: var(--hl-purple);
	color: var(--hl-white);
}
.pagination > li > a {
	color: var(--hl-purple);
}

/* ----- Progress bars --------------------------------------------------- */

.progress-bar,
.progress-bar-primary {
	background-color: var(--hl-purple);
}
.progress-bar-info {
	background-color: var(--hl-sky);
	color: var(--hl-charcoal);
}
.progress-bar-warning {
	background-color: var(--hl-yellow);
	color: var(--hl-charcoal);
}

/* ----- Homepage / hero / order pages ----------------------------------- */

.homepage-hero,
.hero,
.jumbotron {
	background-color: var(--hl-purple);
	color: var(--hl-white);
}
.homepage-hero h1,
.hero h1,
.jumbotron h1 {
	color: var(--hl-white);
}

.feature-highlight {
	background-color: var(--hl-purple-50);
	border-left: 4px solid var(--hl-purple);
}

.order-summary,
.cart-total,
.product-pricing {
	border-top: 3px solid var(--hl-purple);
}

.product-card,
.package-card {
	border-radius: 10px;
	border: 1px solid #eee;
	transition:
		transform 120ms ease,
		box-shadow 120ms ease;
}
.product-card:hover,
.package-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(177, 24, 200, 0.12);
}

/* ----- Footer ---------------------------------------------------------- */

footer,
.footer,
.footer-wrap {
	background-color: var(--hl-charcoal);
	color: var(--hl-white);
}
footer a,
.footer a {
	color: var(--hl-white);
	opacity: 0.85;
}
footer a:hover,
.footer a:hover {
	color: var(--hl-sky);
	opacity: 1;
	text-decoration: none;
}
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5 {
	color: var(--hl-white);
}

/* ----- Misc utility classes for use in tpl files ----------------------- */

.text-brand {
	color: var(--hl-purple) !important;
}
.text-sky {
	color: var(--hl-sky) !important;
}
.text-yellow {
	color: var(--hl-yellow) !important;
}
.bg-brand {
	background-color: var(--hl-purple) !important;
	color: var(--hl-white);
}
.bg-sky {
	background-color: var(--hl-sky) !important;
	color: var(--hl-charcoal);
}
.bg-yellow {
	background-color: var(--hl-yellow) !important;
	color: var(--hl-charcoal);
}
.bg-charcoal {
	background-color: var(--hl-charcoal) !important;
	color: var(--hl-white);
}

/* ----- Top-nav primary action button (Logout / Place an Order) ---------- */

section#header .top-nav .primary-action .btn,
section#header .top-nav .primary-action a.btn {
	background-color: var(--hl-purple);
	border-color: var(--hl-purple);
	color: var(--hl-white);
	font-family: var(--hl-font-body);
	font-weight: 600;
}
section#header .top-nav .primary-action .btn:hover,
section#header .top-nav .primary-action .btn:focus {
	background-color: var(--hl-purple-600);
	border-color: var(--hl-purple-600);
	color: var(--hl-white);
}

/* ----- Homepage hero banner (#home-banner) ------------------------------ */

section#home-banner {
	background-color: var(--hl-white);
	color: var(--hl-charcoal);
}
section#home-banner h1,
section#home-banner h2,
section#home-banner h3 {
	color: var(--hl-white);
}

section#home-banner .form-control {
	border: 2px solid var(--hl-charcoal);
}

section#home-banner .form-control:focus {
	border-color: var(--hl-purple);
}

section#home-banner .btn.search {
	background-color: var(--hl-purple);
	border-color: var(--hl-purple);
	color: var(--hl-white);
	font-weight: 700;
}
section#home-banner .btn.search:hover,
section#home-banner .btn.search:focus {
	background-color: var(--hl-purple-600);
	border-color: var(--hl-purple-600);
}
section#home-banner .btn.transfer {
	background-color: var(--hl-charcoal);
	border-color: var(--hl-charcoal);
	color: var(--hl-white);
}
section#home-banner .btn.transfer:hover,
section#home-banner .btn.transfer:focus {
	background-color: var(--hl-charcoal-600);
	border-color: var(--hl-charcoal-600);
	color: var(--hl-white);
}

/* ----- Home shortcuts strip (.home-shortcuts) --------------------------- */

.home-shortcuts {
	background-color: var(--hl-charcoal);
	color: var(--hl-white);
}
.home-shortcuts .lead {
	color: var(--hl-white);
}

.home-shortcuts li:first-child {
	border-left: 1px solid var(--hl-purple);
}

.home-shortcuts li {
	border-right: 1px solid var(--hl-purple);
}

.home-shortcuts ul li a:hover,
.home-shortcuts ul li a:focus {
	background-color: rgba(177, 24, 200, 0.18);
	color: var(--hl-sky);
	text-decoration: none;
}
.home-shortcuts ul li a i {
	color: var(--hl-purple);
}
.home-shortcuts ul li a:hover i {
	color: var(--hl-sky);
}

/* ----- WHMCS bg-color-* utility classes (tiles, panel btn accents) ------ */

.bg-color-blue {
	background-color: var(--hl-purple) !important;
}
.bg-color-green {
	background-color: var(--hl-sky) !important;
}
.bg-color-red {
	background-color: #e05; /* keep distinct for danger context */
}
.bg-color-gold {
	background-color: var(--hl-yellow) !important;
}
.bg-color-teal {
	background-color: var(--hl-sky) !important;
}

/* btn variants used in panel headers (bg-color- overrides btn-default) */
.btn.bg-color-blue {
	background-color: var(--hl-purple) !important;
	border-color: var(--hl-purple) !important;
	color: var(--hl-white) !important;
}
.btn.bg-color-blue:hover,
.btn.bg-color-blue:focus {
	background-color: var(--hl-purple-600) !important;
	border-color: var(--hl-purple-600) !important;
}
.btn.bg-color-green,
.btn.bg-color-teal {
	background-color: var(--hl-sky) !important;
	border-color: var(--hl-sky) !important;
	color: var(--hl-charcoal) !important;
}
.btn.bg-color-green:hover,
.btn.bg-color-teal:hover {
	background-color: var(--hl-sky-600) !important;
	border-color: var(--hl-sky-600) !important;
}
.btn.bg-color-gold {
	background-color: var(--hl-yellow) !important;
	border-color: var(--hl-yellow) !important;
	color: var(--hl-charcoal) !important;
}
.btn.bg-color-gold:hover {
	background-color: var(--hl-yellow-600) !important;
	border-color: var(--hl-yellow-600) !important;
}

/* ----- WHMCS panel-accent-{color} panel headings ------------------------ */

.panel-accent-blue > .panel-heading,
.panel-accent-red > .panel-heading {
	background-color: var(--hl-purple);
	border-color: var(--hl-purple);
	color: var(--hl-white);
}
.panel-accent-blue > .panel-heading *,
.panel-accent-red > .panel-heading * {
	color: var(--hl-white);
}
.panel-accent-blue > .panel-heading .btn,
.panel-accent-red > .panel-heading .btn {
	background-color: var(--hl-purple) !important;
	border-color: rgba(255, 255, 255, 0.4) !important;
	color: var(--hl-white) !important;
}
.panel-accent-green > .panel-heading,
.panel-accent-teal > .panel-heading {
	background-color: var(--hl-sky);
	border-color: var(--hl-sky);
	color: var(--hl-charcoal);
}
.panel-accent-green > .panel-heading *,
.panel-accent-teal > .panel-heading * {
	color: var(--hl-charcoal);
}
.panel-accent-gold > .panel-heading {
	background-color: var(--hl-yellow);
	border-color: var(--hl-yellow);
	color: var(--hl-charcoal);
}
.panel-accent-gold > .panel-heading * {
	color: var(--hl-charcoal);
}

/* ----- Sidebar panel headings (higher-specificity re-assertion) --------- */

.sidebar .panel.panel-sidebar > .panel-heading,
.panel.panel-sidebar > .panel-heading {
	background-color: var(--hl-purple) !important;
	border-color: var(--hl-purple) !important;
	color: var(--hl-white) !important;
}
.sidebar .panel.panel-sidebar > .panel-heading *,
.panel.panel-sidebar > .panel-heading * {
	color: var(--hl-white) !important;
}

/* ----- Status labels (Active, Suspended, etc.) -------------------------- */

.label-success,
.badge-success {
	background-color: var(--hl-success);
	color: var(--hl-white);
}
.label-danger,
.badge-danger {
	background-color: var(--hl-danger);
	color: var(--hl-white);
}

/* ----- Footer (section#footer) ----------------------------------------- */

section#footer {
	background-color: var(--hl-charcoal);
	color: rgba(255, 255, 255, 0.75);
}
section#footer a,
section#footer .back-to-top {
	color: var(--hl-white);
	opacity: 0.85;
}
section#footer a:hover,
section#footer .back-to-top:hover {
	color: var(--hl-sky);
	opacity: 1;
	text-decoration: none;
}

/* ----- System modal header (panel-primary heading) ---------------------- */

.modal-content.panel-primary .modal-header,
.modal-content .panel-heading.panel-primary,
.panel-primary > .panel-heading {
	background-color: var(--hl-purple);
	border-color: var(--hl-purple);
	color: var(--hl-white);
}

/* =========================================================================
   HeyLuno Store — Hosting / Product Cards
   Targets: upgrade flow (.upgrade .products .product)
            generic grouporder panels and any .well-based product cards
   ========================================================================= */

/* ----- Card shell ------------------------------------------------------- */

.upgrade .products .product,
.product-group .product,
.grouporder .product,
.well.product-item {
	background-color: var(--hl-white);
	border: 1px solid #ede8f5;
	border-radius: 14px;
	box-shadow: 0 4px 28px rgba(177, 24, 200, 0.09);
	overflow: hidden;
	transition: box-shadow 150ms ease, transform 150ms ease;
	margin-bottom: 24px;
}
.upgrade .products .product:hover,
.product-group .product:hover,
.grouporder .product:hover,
.well.product-item:hover {
	box-shadow: 0 8px 36px rgba(177, 24, 200, 0.18);
	transform: translateY(-3px);
}

/* ----- Card header (was dark teal #2b5580) ------------------------------ */

.upgrade .products .product .header,
.product-group .product .header,
.grouporder .product .header {
	background-color: var(--hl-white) !important;
	color: var(--hl-charcoal) !important;
	border-bottom: 3px solid var(--hl-purple) !important;
	padding: 24px 20px 20px !important;
	min-height: unset !important;
	text-align: center;
}

/* ----- Product name ----------------------------------------------------- */

.upgrade .products .product .header h3,
.upgrade .products .product .header h4,
.product-group .product .header h3,
.product-group .product .header h4 {
	font-family: var(--hl-font-body) !important;
	font-weight: 700 !important;
	font-size: 1.15em !important;
	color: var(--hl-charcoal) !important;
	margin: 0 0 12px !important;
	letter-spacing: 0.2px;
}

/* ----- Price display ---------------------------------------------------- */

.upgrade .products .product .header p,
.product-group .product .header p,
.upgrade .products .product .header .price,
.product-group .product .header .price {
	font-family: var(--hl-font-heading) !important;
	font-size: 2em !important;
	font-weight: 400 !important;
	color: var(--hl-purple) !important;
	line-height: 1.15 !important;
	margin-bottom: 4px !important;
}

.upgrade .products .product .header .billing-cycle,
.product-group .product .header .billing-cycle,
.upgrade .products .product .header small {
	font-family: var(--hl-font-body) !important;
	font-size: 0.75rem !important;
	color: #888 !important;
	font-weight: 400 !important;
}

/* ----- "Current" / "Recommended" banners -------------------------------- */

.upgrade .products .product .current {
	background-color: var(--hl-yellow) !important;
	color: var(--hl-charcoal) !important;
	font-family: var(--hl-font-body) !important;
}
.upgrade .products .product .recommended {
	background-color: var(--hl-purple) !important;
	color: var(--hl-white) !important;
	font-family: var(--hl-font-body) !important;
}

/* ----- Order Now / CTA button ------------------------------------------- */

.upgrade .products .product .btn,
.upgrade .products .product .footer .btn,
.product-group .product .btn,
.grouporder .product .btn {
	background-color: var(--hl-purple) !important;
	border-color: var(--hl-purple) !important;
	color: var(--hl-white) !important;
	font-family: var(--hl-font-body) !important;
	font-weight: 700 !important;
	border-radius: 8px !important;
	padding: 10px 20px !important;
	font-size: 0.95em !important;
	letter-spacing: 0.3px;
	transition: background-color 120ms ease, border-color 120ms ease;
}
.upgrade .products .product .btn:hover,
.upgrade .products .product .btn:focus,
.product-group .product .btn:hover,
.grouporder .product .btn:hover {
	background-color: var(--hl-purple-600) !important;
	border-color: var(--hl-purple-600) !important;
	color: var(--hl-white) !important;
}

/* ----- Feature list ----------------------------------------------------- */

.upgrade .products .product ul,
.product-group .product ul,
.grouporder .product ul {
	background-color: var(--hl-white) !important;
	border-left: none !important;
	border-right: none !important;
	padding: 16px 24px !important;
	margin: 0 !important;
}
.upgrade .products .product ul li,
.product-group .product ul li,
.grouporder .product ul li {
	border-bottom: 1px solid #f3edf9 !important;
	color: var(--hl-charcoal) !important;
	font-family: var(--hl-font-body) !important;
	font-size: 0.88em !important;
	padding: 7px 0 !important;
	line-height: 1.5 !important;
	text-align: left !important;
}
.upgrade .products .product ul li:last-child,
.product-group .product ul li:last-child {
	border-bottom: none !important;
}
.upgrade .products .product ul li span,
.product-group .product ul li span {
	color: var(--hl-charcoal) !important;
}

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

.upgrade .products .product .footer,
.product-group .product .footer {
	background-color: var(--hl-white) !important;
	border: none !important;
	border-top: 1px solid #f3edf9 !important;
	padding: 16px 20px !important;
	text-align: center;
}

/* ----- Upsell / promoted product card ----------------------------------- */

.store-promoted-product {
	background-color: var(--hl-purple-50);
	border: 1px solid #e0d0f5;
	border-radius: 12px;
	padding: 24px;
	margin-top: 24px;
}
.store-promoted-product h3 {
	color: var(--hl-purple) !important;
}
.store-promoted-product .btn-success {
	background-color: var(--hl-purple) !important;
	border-color: var(--hl-purple) !important;
	color: var(--hl-white) !important;
}
.store-promoted-product .features li {
	color: var(--hl-charcoal);
	font-family: var(--hl-font-body);
	line-height: 1.8;
}
.store-promoted-product .features li i {
	color: var(--hl-purple);
}