/**
 * WebST Minimal Skin for WHMCS (template six) - PREVIEW.
 * Generated from webst-minimal-skin/assets/css/minimal.css (header/footer/base), with the WHMCS ids
 * #header_wp / .panel_wp / #footer_wp, plus overrides for the six client area. Loaded by
 * includes/hooks/webst_minimal_skin.php only when the preview is on (?webst_skin=1 cookie or admin session).
 */


/* Design tokens follow the Stitch "CloudServices Safe Identity" system, with the brand teal as accent. */
:root {
	--webst-text: #0f172a;
	--webst-muted: #64748b;
	--webst-border: #e2e8f0;
	--webst-border-hover: #cbd5e1;
	--webst-soft: #f8fafc;
	--webst-accent: #1ab394;
	--webst-accent-dark: #148f76;
	--webst-accent-soft: #e8f7f3;
	--webst-navy: #0f2a3f;
	--webst-radius: 16px;
	--webst-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--webst-shadow-1: 0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 1px 2px -1px rgba(15, 23, 42, 0.03);
	--webst-shadow-2: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
	--webst-shadow-3: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
}

/* =Base
-------------------------------------------------------------- */

html body {
	font-family: var(--webst-font);
	color: var(--webst-muted);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* No global heading color: pricing pages put h2 on dark boxes and rely on inherited white. */
html body h1,
html body h2,
html body h3,
html body h4,
html body .h4 {
	letter-spacing: -0.01em;
}

html body a {
	color: var(--webst-accent);
	transition: color 0.15s ease;
}

html body a:hover {
	color: var(--webst-accent-dark);
}

html body .btn,
html body input.btn {
	font-size: 0.9375em;
	font-weight: 600;
	text-shadow: none;
	background: var(--webst-accent);
	border: 1px solid var(--webst-accent);
	border-radius: 8px;
	box-shadow: none;
	padding: 0.65em 1.25em;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

html body .btn:hover,
html body input.btn:hover {
	text-shadow: none;
	background: var(--webst-accent-dark);
	border-color: var(--webst-accent-dark);
	color: #fff;
}

/* =Header
-------------------------------------------------------------- */

html body #header_wp {
	background: #fff;
	border-bottom: 1px solid var(--webst-border);
}

html body #header_wp .top-hat {
	background: var(--webst-navy);
	border-bottom: 0;
	color: rgba(255, 255, 255, 0.75);
}

html body #header_wp .top-hat a {
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.04em;
}

html body #header_wp .top-hat li:hover > a {
	color: #5fe0c4;
}

html body #header_wp .top-hat .toggle .expand:before {
	border-top-color: rgba(255, 255, 255, 0.8);
}

/* The link lists are 29-30px tall in the 34px bar; centre them. */
html body #header_wp .top-hat .row > ul {
	margin-top: 2px;
}

/* The cart sprite is white, which suits the navy top bar. */
html body #header_wp .top-hat .icon-cart {
	opacity: 0.85;
}

html body #header_wp .primary li a {
	color: var(--webst-text);
	font-weight: 600;
}

/* Dropdown panels: white cards instead of dark grey blocks. */
@media only screen and (min-width: 800px) {
	html body #header_wp .primary .panel_wp > ul,
	html body #header_wp .top-hat .panel_wp > ul,
	html body #header_wp .top-hat .panel_wp > div {
		background: #fff;
		border: 1px solid var(--webst-border);
		border-radius: 10px;
		box-shadow: var(--webst-shadow-3);
		padding: 0.375em 0;
	}

	html body #header_wp .panel_wp li,
	html body #header_wp .primary .panel_wp li {
		border-top: none;
	}

	html body #header_wp .primary ul li div.panel_wp a,
	html body #header_wp .primary ul li.expandable.expanded div.panel_wp a,
	html body #header_wp .top-hat li:hover div.panel_wp ul li a,
	html body #header_wp .top-hat .panel_wp li a {
		color: var(--webst-text);
		font-size: 0.9375em;
		font-weight: 500;
		padding: 0.7em 1.25em;
		text-transform: none;
		letter-spacing: 0;
	}

	html body #header_wp li li a:hover,
	html body #header_wp li li a:focus,
	html body #header_wp .primary li li a:hover,
	html body #header_wp .primary li li a:focus,
	html body #header_wp .primary ul li.expandable.expanded div.panel_wp a:hover,
	html body #header_wp .top-hat li:hover div.panel_wp ul li a:hover {
		background: var(--webst-soft);
		color: var(--webst-accent);
	}

	/* The little arrow above each panel was drawn in dark grey. */
	html body #header_wp .top-hat .panel_wp > div:before,
	html body #header_wp .top-hat .panel_wp > form:before,
	html body #header_wp .top-hat .panel_wp li:first-child a:before {
		border-bottom-color: var(--webst-border);
	}
}

/* Sign In dropdown: padding, full-width inputs, teal button, readable reminder link */
html body :is(#header, #header_wp) .top-hat form#top_menu_login_form fieldset {
	width: 260px;
	box-sizing: border-box;
	padding: 14px 14px 10px;
	margin: 0;
	border: 0;
}
html body :is(#header, #header_wp) .top-hat form#top_menu_login_form input.input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 10px;
	padding: 9px 12px;
	border: 1px solid var(--webst-border-hover);
	border-radius: 8px;
	box-shadow: none;
	background: #fff;
	color: var(--webst-text);
	font-size: 14px;
}
html body :is(#header, #header_wp) .top-hat form#top_menu_login_form input.input:focus {
	border-color: var(--webst-accent);
	box-shadow: 0 0 0 3px var(--webst-accent-soft);
	outline: 0;
}
html body :is(#header, #header_wp) .top-hat form#top_menu_login_form a.btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 4px 0 8px;
	padding: 10px 12px;
	background: var(--webst-accent);
	background-image: none;
	border: 1px solid var(--webst-accent);
	border-radius: 8px;
	box-shadow: none;
	text-shadow: none;
	color: #fff;
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
}
html body :is(#header, #header_wp) .top-hat form#top_menu_login_form a.btn:hover {
	background: var(--webst-accent-dark);
	border-color: var(--webst-accent-dark);
}
html body :is(#header, #header_wp) .top-hat form#top_menu_login_form a:not(.btn) {
	display: block;
	padding: 2px 0 0;
	background: none;
	color: var(--webst-muted);
	font-size: 12.5px;
	font-weight: 500;
	text-align: center;
	letter-spacing: 0;
	text-transform: none;
}
html body :is(#header, #header_wp) .top-hat form#top_menu_login_form a:not(.btn):hover {
	color: var(--webst-accent);
	background: none;
}

/* =Live chat strip and vendor logos
-------------------------------------------------------------- */

html body .promo-chat {
	background: var(--webst-soft);
	border-top: 1px solid var(--webst-border);
	border-bottom: 1px solid var(--webst-border);
	padding: 2em 0;
	margin-top: 3em;
}

html body .promo-chat p {
	color: var(--webst-text);
	font-weight: 500;
}

html body .promo-chat em {
	font-weight: 600;
}

html body .promo-chat .btn.green {
	color: #fff; /* "html body a" made the phone link teal on teal */
	background: var(--webst-accent);
	border-color: var(--webst-accent);
	text-shadow: none;
}

html body .promo-chat .btn.green:hover {
	background: var(--webst-accent-dark);
	border-color: var(--webst-accent-dark);
}

html body .footer_vendors {
	padding: 2.5em 1em;
}

html body .footer_vendors img {
	height: 48px;
	margin: 0.5em 1.5em;
	vertical-align: middle;
	filter: grayscale(1);
	opacity: 0.6;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

html body .footer_vendors img:hover {
	filter: none;
	opacity: 1;
}

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

html body #footer_wp {
	background: var(--webst-navy);
	border-top: none;
}

html body #footer_wp a {
	color: rgba(255, 255, 255, 0.72);
}

html body #footer_wp a:hover {
	color: #fff;
}

html body #footer_wp .about p {
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.9375em;
}

html body #footer_wp .about a,
html body #footer_wp b.group_title {
	color: #fff;
	font-weight: 600;
}

html body #footer_wp .social li a {
	opacity: 0.7;
}

html body #footer_wp .certifications {
	color: var(--webst-muted);
}

/* =Mobile
-------------------------------------------------------------- */

@media only screen and (max-width: 639px) {
	html body .hero .headline h1 {
		font-size: 1.6em;
	}

	html body .headline h3.center {
		font-size: 1.5em;
	}

	html body .home_boxes .grid-col {
		width: 100%;
	}

	html body .footer_vendors img {
		height: 36px;
		margin: 0.5em 0.75em;
	}
}


/* =WHMCS six client area
-------------------------------------------------------------- */

html body { background: var(--webst-soft); }

html body section#main-body { padding-top: 32px; }

html body #main-menu,
html body #main-menu .navbar-main {
	/* a.css sets .navbar-main background with !important */
	background: var(--webst-navy) !important;
	border: 0;
	box-shadow: none;
}
html body #main-menu .navbar-main .navbar-nav > li > a {
	color: rgba(255, 255, 255, 0.85);
	font-weight: 500;
	text-shadow: none;
}
html body #main-menu .navbar-main .navbar-nav > li > a:hover,
html body #main-menu .navbar-main .navbar-nav > li.active > a,
html body #main-menu .navbar-main .navbar-nav > .open > a,
html body #main-menu .navbar-main .navbar-nav > .open > a:hover,
html body #main-menu .navbar-main .navbar-nav > .open > a:focus {
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}
html body #main-menu .navbar-main .caret { border-top-color: rgba(255, 255, 255, 0.85); }
html body #main-menu .navbar-toggle .icon-bar { background: #fff; }
html body #main-menu .dropdown-menu {
	border: 1px solid var(--webst-border);
	border-radius: 12px;
	box-shadow: var(--webst-shadow-3);
	padding: 6px;
}
html body #main-menu .dropdown-menu > li > a { border-radius: 8px; color: var(--webst-text); }
html body #main-menu .dropdown-menu > li > a:hover { background: var(--webst-accent-soft); color: var(--webst-accent-dark); }

html body .header-lined h1,
html body h1, html body h2, html body h3 { color: var(--webst-text); font-weight: 700; }
html body .header-lined { border-bottom: 1px solid var(--webst-border); }
html body .breadcrumb { background: transparent; padding-left: 0; }

html body .panel,
html body .panel-default,
html body .panel-sidebar,
html body .tiles .tile,
html body .client-home-panels .panel {
	border: 1px solid var(--webst-border);
	border-radius: var(--webst-radius);
	box-shadow: var(--webst-shadow-1);
	overflow: hidden;
	background: #fff;
}
html body .panel > .panel-heading,
html body .panel-sidebar > .panel-heading {
	background: #fff;
	color: var(--webst-text);
	border-bottom: 1px solid var(--webst-border);
	font-weight: 600;
}
html body .list-group-item { border-color: var(--webst-border); color: var(--webst-text); }
html body .list-group-item.active,
html body .list-group-item.active:hover,
html body .list-group-item.active:focus {
	/* a.css forces a dark background on the active sidebar item */
	background: var(--webst-accent-soft) !important;
	border-color: var(--webst-border) !important;
	color: var(--webst-accent-dark) !important;
	font-weight: 600;
}

html body .btn-primary,
html body .btn-success,
html body .btn-info {
	background: var(--webst-accent);
	border-color: var(--webst-accent);
	color: #fff;
	border-radius: 8px;
	font-weight: 600;
	text-shadow: none;
	box-shadow: none;
}
html body .btn-primary:hover, html body .btn-primary:focus,
html body .btn-success:hover, html body .btn-success:focus,
html body .btn-info:hover, html body .btn-info:focus {
	background: var(--webst-accent-dark);
	border-color: var(--webst-accent-dark);
	color: #fff;
}
html body .btn-default {
	background: #fff;
	border: 1px solid var(--webst-border-hover);
	color: var(--webst-text);
	border-radius: 8px;
}

html body .form-control {
	border: 1px solid var(--webst-border-hover);
	border-radius: 8px;
	box-shadow: none;
	color: var(--webst-text);
}
html body .form-control:focus {
	border-color: var(--webst-accent);
	box-shadow: 0 0 0 3px var(--webst-accent-soft);
}

html body .table > thead > tr > th { color: var(--webst-text); border-bottom: 1px solid var(--webst-border); }
html body .table > tbody > tr > td { border-top: 1px solid var(--webst-border); }
html body .table-striped > tbody > tr:nth-of-type(odd) { background: var(--webst-soft); }

html body .label-success, html body .status-active { background: var(--webst-accent); }

/* Store / cart */
html body #order-standard_cart .header-lined h1 { color: var(--webst-text); }
html body #order-standard_cart .products .product {
	border: 1px solid var(--webst-border);
	border-radius: var(--webst-radius);
	box-shadow: var(--webst-shadow-1);
	background: #fff;
}
html body #order-standard_cart .products .product header {
	background: #fff;
	color: var(--webst-text);
	border-bottom: 1px solid var(--webst-border);
	border-radius: var(--webst-radius) var(--webst-radius) 0 0;
}
html body #order-standard_cart .products .product .price { color: var(--webst-text); }
html body #order-standard_cart .order-summary {
	background: var(--webst-navy);
	border: 0;
	border-radius: var(--webst-radius);
}

/* Menu: teal accent line under the client-area navbar */
html body #main-menu .navbar-main { border-bottom: 3px solid var(--webst-accent) !important; }

/* Login: tinted page with the form in a white card */
html body section#main-body:has(.logincontainer) {
	background: linear-gradient(180deg, var(--webst-accent-soft) 0%, var(--webst-soft) 100%);
	padding: 56px 0 72px;
}
html body .logincontainer {
	background: #fff;
	border: 1px solid var(--webst-border);
	border-top: 4px solid var(--webst-accent);
	border-radius: var(--webst-radius);
	box-shadow: var(--webst-shadow-3);
	padding: 32px 36px 28px;
	max-width: 520px;
}
html body .logincontainer .header-lined { border-bottom: 0; margin-bottom: 8px; }
html body .logincontainer .header-lined h1 { font-size: 28px; }
html body .logincontainer .header-lined h1 small { display: block; margin-top: 6px; font-size: 15px; color: var(--webst-muted); }
html body .promo-chat { margin-top: 0; }

/* Cart: "Continue Shopping" is a .btn-link (was dark text on the teal .btn fill); WHMCS-blue headers to navy */
html body #order-standard_cart .btn-link,
html body .btn.btn-link {
	background: transparent;
	border-color: transparent;
	color: var(--webst-accent-dark);
	box-shadow: none;
}
html body #order-standard_cart .btn-link:hover,
html body .btn.btn-link:hover {
	background: var(--webst-accent-soft);
	border-color: transparent;
	color: var(--webst-accent-dark);
}
html body #order-standard_cart .view-cart-items-header {
	background: var(--webst-navy);
	border-radius: 10px 10px 0 0;
}
html body #order-standard_cart .view-cart-items { border-bottom-color: var(--webst-accent); }