/**
 * Pure Comparison order form style sheet
 *
 * Updated: full-width badge bars below product name + per-badge colors.
 *
 * @project   WHMCS
 * @version   2.1
 */

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

div#order-pure_comparison {
	padding:0;
	margin:0 0 50px 0;
    height: 100%;
    width: 100%;
	line-height:18px;
	font-size:14px;
	color:#666666;
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
}

#order-pure_comparison a { outline:none; transition: all 0.5s ease 0s; }
#order-pure_comparison div,
#order-pure_comparison ul,
#order-pure_comparison li { margin:0; padding:0; }

#order-pure_comparison h3 { margin:0; font-size:32px; line-height:38px; font-weight:bold; color:#333333; }
#order-pure_comparison h4 { margin:10px 0; font-size:24px; color:#333333; }
#order-pure_comparison h5 { margin:5px 0; font-size:16px; color:#666666; font-weight:normal; }

#order-pure_comparison .txt-center { text-align:center; }
#order-pure_comparison .alert { margin-top: 70px; padding: 15px; }
#order-pure_comparison .page-container { padding:0 2% 40px 2%; margin:0 auto; }

/* ============================= */
/* Product Grid & Card           */
/* ============================= */

#order-pure_comparison .price-table-container { padding:20px 0 0; }
#order-pure_comparison .price-table-container ul { list-style:none; text-align:center; }
#order-pure_comparison .price-table-container ul li {
	padding:30px 4px 6px 4px;
	display:inline-block;
	background:url(../img/shadow-btm.png) no-repeat center bottom;
}

#order-pure_comparison .price-table-container .price-table {
	width:215px;
	background:#ffffff;
	border-radius:5px;
	box-shadow: 0 1px 2px 0 rgba(0,0,0,0.30);
	position: relative;
	overflow: hidden;
}

/* ============================= */
/* BADGE BARS (below product name) */
/* ============================= */

#order-pure_comparison .price-table .top-head .top-area { position: relative; }

#order-pure_comparison .price-table .top-head .top-area .badges-wrap {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
	position: static !important; /* ensure in normal flow */
}

#order-pure_comparison .price-table .top-head .top-area .badge-bar {
	display: block !important;
	width: 100% !important;
	padding: 8px 10px;
	text-align: center;
	font-size: 14px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .5px;
	border-radius: 0 !important;
	border: none !important;
	box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
	background: #4caf50;   /* default if no color is provided */
	color: #fff;
}

/* Named color utility classes (for {color} names) */
.badge-green  { background:#4caf50 !important; }
.badge-blue   { background:#2196f3 !important; }
.badge-teal   { background:#26a69a !important; }
.badge-orange { background:#fb8c00 !important; }
.badge-purple { background:#8e24aa !important; }
.badge-red    { background:#e53935 !important; }
.badge-gold   { background:#d4a017 !important; color:#111 !important; }
.badge-gray   { background:#607d8b !important; }

/* Auto-alternate when no explicit color provided */
.badges-wrap .badge-bar:not([style]):not([class*="badge-"]):nth-child(2n) { background:#43a047 !important; }
.badges-wrap .badge-bar:not([style]):not([class*="badge-"]):nth-child(3n) { background:#388e3c !important; }

/* Ribbon (legacy fallback if no badges) */
#order-pure_comparison .ribbon {
	position: absolute;
	top: -8px;
	left: 0; right: 0;
	text-align: center;
	z-index: 2;
}
#order-pure_comparison .ribbon > span {
	display: inline-block;
	padding: 6px 14px;
	background: #f30000;
	color: #ffffff;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	border-radius: 0 0 6px 6px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* ============================= */
/* Card Body & CTA               */
/* ============================= */

#order-pure_comparison .price-table .top-head {
	background: -webkit-linear-gradient(top,  #ffffef 0%,#fefebe 100%);
	background: linear-gradient(to bottom,  #ffffef 0%,#fefebe 100%);
	border-radius:5px 5px 0 0;
}
#order-pure_comparison .price-table .top-head .top-area {
	padding:15px 0;
	border-bottom:1px solid #f1f1b6;
}
#order-pure_comparison .price-table .top-head .top-area h4 {
	margin:0;
	color:#333333;
	line-height:29px;
	font-weight:bold;
}
#order-pure_comparison .price-table ul {
	padding:4px 10px 10px;
	list-style:none;
}
#order-pure_comparison .price-table ul li {
	padding:17px 0 15px 0;
	width:100%;
	border-bottom:1px solid #d9d9d9;
	color:#333333;
	text-align:center;
	font-size:15px;
}
#order-pure_comparison .price-table ul li:last-child { border-bottom:0; }

#order-pure_comparison .price-table .price-area {
	padding:5px 0;
	color:#333333;
	font-size:16px;
	background: -webkit-linear-gradient(top,  #ffffff 2%,#fefebe 100%);
	background: linear-gradient(to bottom,  #ffffff 2%,#fefebe 100%);
	border-radius:0 0 5px 5px;
}
#order-pure_comparison .price-table .price-area .price { padding:10px 0; }
#order-pure_comparison .price-table .price-area .price span { font-size:32px; }

#order-pure_comparison .price-table .order-button {
	padding:13px 0;
	margin:10px 20px;
	font-size:18px;
	color:#ffffff;
	display:block;
	font-weight:bold;
	background: -webkit-linear-gradient(top,  #4a92b7 0%,#006699 100%);
	background: linear-gradient(to bottom,  #4a92b7 0%,#006699 100%);
	border-radius:3px;
	text-decoration:none;
	text-shadow: 0 0 1px rgba(0,0,0,0.4);
}
#order-pure_comparison .price-table .order-button.unavailable:hover {
    cursor: not-allowed;
    background: -webkit-linear-gradient(top,  #404A53 0%,#949499 100%);
    background: linear-gradient(to bottom,  #404A53 0%,#949499 100%);
}

/* ============================= */
/* Featured Card                 */
/* ============================= */

#order-pure_comparison .price-table.active {
	margin:0 15px;
	transform: scale(1.08);
}
#order-pure_comparison .price-table.active .top-head {
	background: -webkit-linear-gradient(top,  #ffe1e1 0%,#ffbfbf 100%);
	background: linear-gradient(to bottom,  #ffe1e1 0%,#ffbfbf 100%);
}
#order-pure_comparison .price-table.active .price-area {
	background: -webkit-linear-gradient(top,  #ffffff 0%,#ffe1e1 82%);
	background: linear-gradient(to bottom,  #ffffff 0%,#ffe1e1 82%);
}

/* ============================= */
/* Included Features Block       */
/* ============================= */

#order-pure_comparison .includes-features { margin:0 auto; max-width:780px; padding-top:55px; }
#order-pure_comparison .includes-features .head-area { text-align:center; background:url(../img/head-bg.png) no-repeat center center; background-size:100% auto; }
#order-pure_comparison .includes-features .head-area span { padding:0 20px; display:inline-table; }
#order-pure_comparison .includes-features ul.list-features { padding:20px 0 0; list-style:none; }
#order-pure_comparison .includes-features ul.list-features li {
    padding:0 0 0 22px;
    margin:5px 0;
    width:33%;
    display:inline-table;
    background:url(../img/tick.png) no-repeat;
}

/* ============================= */
/* Sidebar Toggle                */
/* ============================= */

html, body { overflow-x: hidden; }
.row-product-selection { position: relative; left: 0; transition: all .25s ease-out; }
.product-selection-sidebar { position: absolute; top: 0; left: -300px; width: 300px; display: none; }
#btnShowSidebar { margin: 0 0 20px 0; }