/* EQTY Billboard Packages — front-end styles */

#eqty-bb-wrap {
	--eqty-black: #0d0d0d;
	--eqty-black-2: #171717;
	--eqty-gold: #d4a12a;
	--eqty-gold-dark: #b8871d;
	--eqty-white: #ffffff;
	--eqty-gray: #b9b9b9;
	--eqty-radius: 10px;
	max-width: 1100px;
	margin: 0 auto;
	background: var(--eqty-black);
	color: var(--eqty-white);
	padding: 32px clamp(16px, 4vw, 48px) 48px;
	border-radius: var(--eqty-radius);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-sizing: border-box;
}

#eqty-bb-wrap * {
	box-sizing: border-box;
}

/* Reset so the host theme's global styles for tables, inputs, labels, and
   paragraphs (which vary wildly from theme to theme and are the most common
   cause of "invisible text" inside embedded widgets) never leak in. */
#eqty-bb-wrap p,
#eqty-bb-wrap label,
#eqty-bb-wrap span,
#eqty-bb-wrap div {
	background: none;
	color: inherit;
}
#eqty-bb-wrap table {
	background-color: transparent !important;
	border: none !important;
	margin: 0;
}

/* Progress bar */
.eqty-bb-progress {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-bottom: 32px;
	flex-wrap: wrap;
}
.eqty-bb-step-dot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	opacity: 0.45;
	transition: opacity .2s ease;
}
.eqty-bb-step-dot.is-active,
.eqty-bb-step-dot.is-done {
	opacity: 1;
}
.eqty-bb-step-dot span {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--eqty-black-2);
	border: 2px solid var(--eqty-gray);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 13px;
}
.eqty-bb-step-dot.is-active span {
	border-color: var(--eqty-gold);
	color: var(--eqty-gold);
}
.eqty-bb-step-dot.is-done span {
	background: var(--eqty-gold);
	border-color: var(--eqty-gold);
	color: var(--eqty-black);
}
.eqty-bb-step-dot label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--eqty-gray);
	white-space: nowrap;
}
.eqty-bb-step-line {
	width: 40px;
	height: 2px;
	background: #333;
	margin-top: -18px;
}

/* Panels */
.eqty-bb-panel {
	display: none;
	animation: eqty-bb-fade .25s ease;
}
.eqty-bb-panel.is-active {
	display: block;
}
@keyframes eqty-bb-fade {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

.eqty-bb-h2 {
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .02em;
	margin: 0 0 6px;
	color: var(--eqty-white);
}
.eqty-bb-sub {
	color: var(--eqty-gray);
	margin: 0 0 24px;
	font-size: 15px;
	line-height: 1.5;
}

/* Step 1 form */
.eqty-bb-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 20px;
}
.eqty-bb-field-full {
	grid-column: 1 / -1;
}
.eqty-bb-field label {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--eqty-gold);
	margin-bottom: 6px;
	font-weight: 700;
}
.eqty-bb-field input,
.eqty-bb-field textarea,
.eqty-bb-field select {
	width: 100% !important;
	max-width: 100% !important;
	background-color: var(--eqty-black-2) !important;
	background-image: none !important;
	border: 1px solid #3a3a3a !important;
	color: var(--eqty-white) !important;
	-webkit-text-fill-color: var(--eqty-white) !important;
	padding: 12px 14px !important;
	border-radius: 6px !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	font-family: inherit !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	appearance: none !important;
	-webkit-appearance: none !important;
}
.eqty-bb-field input::placeholder,
.eqty-bb-field textarea::placeholder {
	color: #8a8a8a !important;
	opacity: 1 !important;
}
.eqty-bb-field input:focus,
.eqty-bb-field textarea:focus {
	outline: none !important;
	border-color: var(--eqty-gold) !important;
	box-shadow: 0 0 0 1px var(--eqty-gold) !important;
}
/* Neutralize browser autofill styling (Chrome/Edge/Safari force a light
   background + dark text on autofilled fields, which is invisible on our
   dark theme) */
.eqty-bb-field input:-webkit-autofill,
.eqty-bb-field input:-webkit-autofill:hover,
.eqty-bb-field input:-webkit-autofill:focus,
.eqty-bb-field input:-webkit-autofill:active {
	-webkit-text-fill-color: var(--eqty-white) !important;
	-webkit-box-shadow: 0 0 0 1000px var(--eqty-black-2) inset !important;
	box-shadow: 0 0 0 1000px var(--eqty-black-2) inset !important;
	caret-color: var(--eqty-white);
	transition: background-color 5000s ease-in-out 0s;
}

@media (max-width: 640px) {
	.eqty-bb-form-grid { grid-template-columns: 1fr; }
}

/* Buttons */
.eqty-bb-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 12px;
}
.eqty-bb-actions-split {
	justify-content: space-between;
}
.eqty-bb-btn {
	border: none;
	border-radius: 6px;
	padding: 14px 26px;
	font-size: 14px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.eqty-bb-btn:hover { transform: translateY(-1px); }
.eqty-bb-btn:active { transform: translateY(0); }
.eqty-bb-btn-primary {
	background: linear-gradient(135deg, var(--eqty-gold), var(--eqty-gold-dark));
	color: var(--eqty-black);
	box-shadow: 0 4px 14px rgba(212,161,42,.35);
}
.eqty-bb-btn-secondary {
	background: transparent;
	border: 2px solid var(--eqty-gold);
	color: var(--eqty-gold);
}
.eqty-bb-btn-ghost {
	background: transparent;
	color: var(--eqty-gray);
	border: 1px solid #3a3a3a;
}
.eqty-bb-btn-select {
	width: 100%;
	background: var(--eqty-white);
	color: var(--eqty-black);
	margin-top: 16px;
}
.eqty-bb-package-card.is-featured .eqty-bb-btn-select {
	background: var(--eqty-gold);
}
.eqty-bb-btn[disabled] {
	opacity: .6;
	cursor: not-allowed;
	transform: none;
}
.eqty-bb-error {
	color: #ff6b6b;
	font-size: 13px;
	min-height: 18px;
	margin: 6px 0 0;
}

/* Stats strip (Step 2) */
.eqty-bb-stats-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	background: var(--eqty-black-2);
	border: 1px solid #333;
	border-radius: var(--eqty-radius);
	padding: 18px 12px;
	margin-bottom: 24px;
}
.eqty-bb-stat {
	text-align: center;
	padding: 0 6px;
}
.eqty-bb-stat-num {
	display: block;
	color: var(--eqty-gold);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.2;
}
.eqty-bb-stat-label {
	display: block;
	color: var(--eqty-gray);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-top: 4px;
}
@media (max-width: 640px) {
	.eqty-bb-stats-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Step 2 term toggle */
.eqty-bb-term-toggle {
	display: inline-flex;
	background: var(--eqty-black-2);
	border-radius: 8px;
	padding: 4px;
	margin-bottom: 28px;
	gap: 4px;
	flex-wrap: wrap;
}
.eqty-bb-term-btn {
	background-color: transparent !important;
	border: none !important;
	color: var(--eqty-gray) !important;
	padding: 10px 16px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	cursor: pointer;
}
.eqty-bb-term-btn.is-active {
	background-color: var(--eqty-gold) !important;
	color: var(--eqty-black) !important;
}

/* Package cards */
.eqty-bb-packages {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 24px;
}
@media (max-width: 800px) {
	.eqty-bb-packages { grid-template-columns: 1fr; }
}
.eqty-bb-package-card {
	position: relative;
	background-color: var(--eqty-black-2) !important;
	background-image: none !important;
	color: var(--eqty-white) !important;
	border: 1px solid #333 !important;
	border-radius: var(--eqty-radius);
	padding: 26px 22px;
	text-align: center;
	transition: border-color .15s ease, transform .15s ease;
}
.eqty-bb-package-card h3,
.eqty-bb-package-card p,
.eqty-bb-package-card strong {
	color: inherit !important;
	background: none !important;
}
.eqty-bb-package-card:hover {
	border-color: var(--eqty-gold);
	transform: translateY(-3px);
}
.eqty-bb-package-card.is-featured {
	border-color: var(--eqty-gold);
	background: linear-gradient(180deg, rgba(212,161,42,.08), var(--eqty-black-2) 40%);
}
.eqty-bb-package-card.is-selected {
	border-color: var(--eqty-gold);
	box-shadow: 0 0 0 2px var(--eqty-gold);
}
.eqty-bb-ribbon {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--eqty-gold);
	color: var(--eqty-black);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .06em;
	padding: 4px 12px;
	border-radius: 20px;
}
.eqty-bb-package-card h3 {
	margin: 6px 0 2px;
	font-size: 22px;
	letter-spacing: .05em;
}
.eqty-bb-share {
	color: var(--eqty-gold);
	font-size: 13px;
	font-weight: 700;
	margin: 0 0 16px;
	text-transform: uppercase;
}
.eqty-bb-price {
	margin-bottom: 16px;
}
.eqty-bb-price-amount {
	font-size: 38px;
	font-weight: 800;
}
.eqty-bb-price-suffix {
	color: var(--eqty-gray);
	font-size: 14px;
}
.eqty-bb-shared-with {
	color: var(--eqty-gray);
	font-size: 13px;
	min-height: 36px;
	margin: 0 0 8px;
}
.eqty-bb-ads-day {
	font-size: 14px;
	color: var(--eqty-white);
	margin: 0;
}

/* Comparison table */
.eqty-bb-compare-scroll {
	overflow-x: auto;
	margin-bottom: 24px;
	border-radius: var(--eqty-radius);
	border: 1px solid #333;
}
.eqty-bb-compare-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 560px;
}
.eqty-bb-compare-table {
	background-color: var(--eqty-black) !important;
}
.eqty-bb-compare-table th,
.eqty-bb-compare-table td {
	padding: 14px 16px !important;
	text-align: center;
	border-bottom: 1px solid #2a2a2a !important;
	border-right: none !important;
	border-left: none !important;
	border-top: none !important;
	font-size: 13.5px;
	white-space: nowrap;
	background-color: var(--eqty-black) !important;
	background-image: none !important;
	color: var(--eqty-white) !important;
}
.eqty-bb-compare-table tbody tr:nth-child(even) td {
	background-color: var(--eqty-black-2) !important;
}
.eqty-bb-compare-table td:first-child,
.eqty-bb-compare-table th:first-child {
	text-align: left;
	color: var(--eqty-gray) !important;
	white-space: normal;
	background-color: #202020 !important;
	position: sticky;
	left: 0;
}
.eqty-bb-compare-table thead th {
	background-color: var(--eqty-black-2) !important;
	font-weight: 800;
	letter-spacing: .04em;
	color: var(--eqty-white) !important;
}
.eqty-bb-compare-table thead th.is-featured {
	color: var(--eqty-gold) !important;
}
.eqty-bb-compare-table tbody tr:last-child td {
	border-bottom: none !important;
}
.eqty-bb-compare-select {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 8px;
}
@media (max-width: 800px) {
	.eqty-bb-compare-select { grid-template-columns: 1fr; }
}
.eqty-bb-compare-select .eqty-bb-btn-select { margin-top: 0; }

/* Display specifications (Step 3) */
.eqty-bb-specs {
	background: var(--eqty-black-2);
	border: 1px solid #333;
	border-radius: var(--eqty-radius);
	padding: 20px 22px;
	margin-bottom: 24px;
}
.eqty-bb-specs-h3 {
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--eqty-gold);
}
.eqty-bb-specs-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px 20px;
}
.eqty-bb-spec {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13px;
	border-bottom: 1px solid #2a2a2a;
	padding-bottom: 8px;
}
.eqty-bb-spec span {
	color: var(--eqty-gray);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .03em;
}
.eqty-bb-spec strong {
	color: var(--eqty-white);
	font-size: 14px;
}
@media (max-width: 800px) {
	.eqty-bb-specs-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
	.eqty-bb-specs-grid { grid-template-columns: 1fr; }
}

/* Step 4: optional static ad design add-on */
.eqty-bb-addon {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: var(--eqty-black-2);
	border: 1px solid #333;
	border-radius: var(--eqty-radius);
	padding: 16px 18px;
	margin-bottom: 20px;
	cursor: pointer;
	transition: border-color .15s ease;
}
.eqty-bb-addon:hover {
	border-color: var(--eqty-gold);
}
.eqty-bb-addon input[type="checkbox"] {
	margin-top: 3px;
	width: 18px;
	height: 18px;
	accent-color: var(--eqty-gold);
	flex-shrink: 0;
}
.eqty-bb-addon span {
	font-size: 14px;
	color: var(--eqty-gray);
	line-height: 1.5;
}
.eqty-bb-addon strong {
	color: var(--eqty-white);
}

/* Step 4 summary */
.eqty-bb-summary {
	background: var(--eqty-black-2);
	border: 1px solid #333;
	border-radius: var(--eqty-radius);
	padding: 22px;
	margin-bottom: 20px;
}
.eqty-bb-summary-row {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid #2a2a2a;
	font-size: 14px;
}
.eqty-bb-summary-row:last-child { border-bottom: none; }
.eqty-bb-summary-row span:first-child { color: var(--eqty-gray); }
.eqty-bb-summary-row.eqty-bb-total {
	font-size: 18px;
	font-weight: 800;
	color: var(--eqty-gold);
}

.eqty-bb-btn-pay {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.eqty-bb-spinner {
	display: none;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(0,0,0,.3);
	border-top-color: var(--eqty-black);
	border-radius: 50%;
	animation: eqty-bb-spin .6s linear infinite;
}
.eqty-bb-btn-pay.is-loading .eqty-bb-spinner { display: inline-block; }
.eqty-bb-btn-pay.is-loading .eqty-bb-btn-label { opacity: .7; }
@keyframes eqty-bb-spin { to { transform: rotate(360deg); } }

.eqty-bb-fineprint {
	color: var(--eqty-gray);
	font-size: 13px;
	margin-top: 18px;
	text-align: center;
}
.eqty-bb-fineprint a {
	color: var(--eqty-gold);
	text-decoration: none;
}

/* Thank you */
.eqty-bb-thankyou {
	text-align: center;
	padding: 20px 0 10px;
}
.eqty-bb-check {
	width: 64px;
	height: 64px;
	line-height: 64px;
	border-radius: 50%;
	background: var(--eqty-gold);
	color: var(--eqty-black);
	font-size: 32px;
	font-weight: 800;
	margin: 0 auto 20px;
}