/**
 * Pricing Widget — Table-based design
 *
 * Two-tab layout: each tab has a package description (inclusion list)
 * and a price table. Styled for the dark Rhino Boxing canvas.
 *
 * Tokens:
 *   page bg #000   card surface #141414   brand orange #E59744
 *   vivid #F36E36  border #2A2A2A   muted #B8B8B8   text #FFFFFF
 */

/* === Container ========================================================== */

.rhino-pricing {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	padding: 80px 24px;
}

@media (max-width: 767px) {
	.rhino-pricing { padding: 56px 20px; }
}

/* === Title =============================================================== */

.rhino-pricing__title {
	font-family: "Anton", system-ui, sans-serif;
	text-transform: uppercase;
	font-size: clamp(32px, 5vw, 44px);
	line-height: 1.1;
	color: #FFFFFF;
	text-align: center;
	margin: 0 0 12px;
}

.rhino-pricing__subtitle {
	font-size: 16px;
	line-height: 1.7;
	color: #B8B8B8;
	text-align: center;
	margin: 0 auto 36px;
	max-width: 600px;
}

/* === Tabs ================================================================ */

.rhino-pricing__tabs {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 48px;
}

.rhino-pricing__tab {
	background: #141414;
	border: 2px solid #2A2A2A;
	color: #B8B8B8;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 12px 28px;
	border-radius: 9999px;
	cursor: pointer;
	transition: all 0.25s ease;
}

.rhino-pricing__tab:hover {
	color: #FFFFFF;
	border-color: #E59744;
}

.rhino-pricing__tab.is-active {
	background: #E59744;
	color: #000000;
	border-color: #E59744;
}

/* === Panels ============================================================== */

.rhino-pricing__panel[hidden] {
	display: none;
}

.rhino-pricing__panel {
	animation: rhino-fade-in 0.3s ease;
}

@keyframes rhino-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* === Description (inclusion list) ======================================== */

.rhino-pricing__desc {
	background: #141414;
	border: 1px solid #2A2A2A;
	border-radius: 16px;
	padding: 32px 36px;
	margin-bottom: 32px;
}

.rhino-pricing__desc h4 {
	font-family: "Anton", system-ui, sans-serif;
	text-transform: uppercase;
	font-size: 20px;
	color: #E59744;
	margin: 0 0 16px;
	letter-spacing: 0.02em;
}

.rhino-pricing__desc ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 24px;
}

@media (max-width: 600px) {
	.rhino-pricing__desc ul {
		grid-template-columns: 1fr;
	}
	.rhino-pricing__desc {
		padding: 24px 20px;
	}
}

.rhino-pricing__desc li {
	font-size: 15px;
	color: #D8D8D8;
	padding-left: 26px;
	position: relative;
	line-height: 1.5;
}

.rhino-pricing__desc li::before {
	content: "\f00c";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	left: 0;
	top: 2px;
	color: #E59744;
	font-size: 13px;
}

/* === Price Table ========================================================= */

.rhino-pricing__table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: #141414;
	border: 1px solid #2A2A2A;
	border-radius: 16px;
	overflow: hidden;
}

.rhino-pricing__table thead tr {
	background: #1A1A1A;
}

.rhino-pricing__table th {
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #E59744;
	padding: 16px 24px;
	text-align: left;
	border-bottom: 1px solid #2A2A2A;
}

.rhino-pricing__table td {
	font-size: 15px;
	color: #FFFFFF;
	padding: 16px 24px;
	border-bottom: 1px solid #1F1F1F;
	vertical-align: middle;
}

.rhino-pricing__table tbody tr:last-child td {
	border-bottom: none;
}

.rhino-pricing__table tbody tr:hover {
	background: rgba(229, 151, 68, 0.06);
}

.rhino-pricing__table td strong {
	font-weight: 700;
	font-size: 16px;
	color: #FFFFFF;
}

.rhino-pricing__old {
	display: inline-block;
	font-size: 13px;
	color: #6D6D6D;
	text-decoration: line-through;
	margin-top: 2px;
}

/* === Empty state ========================================================= */

.rhino-pricing__empty {
	font-size: 16px;
	color: #B8B8B8;
	text-align: center;
	padding: 40px 20px;
}

/* === Responsive table ==================================================== */

@media (max-width: 480px) {
	.rhino-pricing__table th,
	.rhino-pricing__table td {
		padding: 14px 16px;
	}

	.rhino-pricing__table td strong {
		font-size: 15px;
	}
}