/**
 * public-redesign.css
 * Phase-2 UI/UX polish for all public-facing guest pages.
 * Loaded last via common-footer.tpl.html — applies targeted overrides
 * without touching PHP logic, URLs, or functionality.
 *
 * Scope:  index.php  |  ppc-user-login.php  |  ppc-publisher-login.php
 *         ppc-user-registration.php  |  ppc-contact-us.php
 */

/* ============================================================
   SHARED — richer background atmosphere on guest pages
   ============================================================ */
body.guest-public:not(.index-home) .mainContentDiv {
	background: linear-gradient(
		165deg,
		#eef2ff 0%,
		#f8fafc 48%,
		#f0f7ff 100%
	) !important;
}

/* ============================================================
   CONTACT PAGE  —  div.admainbox.pub-contact-page
   ============================================================ */

/* ── Centered card ────────────────────────────────────────── */
/* specificity (0,4,2) — matches and beats public-guest-pages.css (0,4,2) by source order */
body.guest-public .mainContentDiv div.admainbox.pub-contact-page {
	max-width: 720px !important;
	width: auto !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: clamp(28px, 5vw, 52px) !important;
	margin-bottom: clamp(28px, 5vw, 52px) !important;
	border-radius: 22px !important;
	box-shadow:
		0 2px 4px rgba(15, 23, 42, 0.03),
		0 8px 16px rgba(15, 23, 42, 0.06),
		0 28px 64px rgba(15, 23, 42, 0.1) !important;
	border: 1px solid rgba(226, 232, 240, 0.85) !important;
	overflow: hidden;
}

/* ── Accent gradient bar at top of card ──────────────────── */
.mainContentDiv div.admainbox.pub-contact-page > .contact_heding {
	position: relative;
	padding-top: calc(clamp(4px, 1vw, 8px) + 4px);
}

.mainContentDiv div.admainbox.pub-contact-page > .contact_heding::before {
	content: "";
	position: absolute;
	top: calc(-1 * clamp(18px, 3vw, 26px));
	left: calc(-1 * clamp(16px, 3vw, 24px));
	right: calc(-1 * clamp(16px, 3vw, 24px));
	height: 4px;
	background: linear-gradient(90deg, #2563eb 0%, #0ea5e9 60%, #7c3aed 100%);
}

/* ── Page title ───────────────────────────────────────────── */
.mainContentDiv .pub-contact-page .contact_heding .about_heading {
	font-size: clamp(1.4rem, 3vw, 2rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.03em !important;
	color: #0f172a !important;
	margin-bottom: 6px !important;
}

.mainContentDiv .pub-contact-page .contact_heding .headingbar {
	font-size: 0.875rem;
	color: #475569;
	font-weight: 400;
}

/* ── Field labels ─────────────────────────────────────────── */
.mainContentDiv .pub-contact-page .contact-field-label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #334155;
	margin-bottom: 5px;
	line-height: 1.4;
}

.mainContentDiv .pub-contact-page .contact-captcha-label {
	margin-bottom: 6px;
}

/* ── Intro text ───────────────────────────────────────────── */
.mainContentDiv .pub-contact-page .contact_details .contact-intro {
	font-size: 0.875rem !important;
	line-height: 1.65 !important;
	color: #64748b !important;
	margin-bottom: 18px !important;
}

/* ── Input fields ─────────────────────────────────────────── */
.mainContentDiv .pub-contact-page .contact_details input[type="text"],
.mainContentDiv .pub-contact-page .contact_details input[type="email"],
.mainContentDiv .pub-contact-page .contact_details textarea.c_txt {
	border: 1.5px solid #e2e8f0 !important;
	border-radius: 10px !important;
	padding: 11px 14px !important;
	font-size: 0.9rem !important;
	line-height: 1.5;
	background: #f8fafc !important;
	color: #0f172a !important;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.mainContentDiv .pub-contact-page .contact_details input[type="text"]:focus,
.mainContentDiv .pub-contact-page .contact_details input[type="email"]:focus,
.mainContentDiv .pub-contact-page .contact_details textarea.c_txt:focus {
	border-color: #2563eb !important;
	background: #ffffff !important;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
	outline: none !important;
}

/* ── Submit button ────────────────────────────────────────── */
.mainContentDiv .pub-contact-page .contact_details input[type="submit"],
.mainContentDiv .pub-contact-page .contact_details input.submit,
.mainContentDiv .pub-contact-page .contact_details input[name="submit_contact"] {
	background: linear-gradient(135deg, #2563eb 0%, #0284c7 100%) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 13px 40px !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(37, 99, 235, 0.32);
	transition: filter 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.mainContentDiv .pub-contact-page .contact_details input[type="submit"]:hover {
	filter: brightness(1.1);
	transform: translateY(-2px);
	box-shadow: 0 8px 26px rgba(37, 99, 235, 0.42);
}

/* ── Captcha area ─────────────────────────────────────────── */
.mainContentDiv .pub-contact-page .contact_details .contact_frow--captcha {
	background: #f1f5f9 !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 12px !important;
	padding: 14px 16px !important;
	margin-bottom: 4px;
}

.mainContentDiv .pub-contact-page .contact_details .contact_frow--captcha .contact_2colm {
	width: 100% !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mainContentDiv .pub-contact-page .contact-captcha-label {
	margin-bottom: 4px;
}

.mainContentDiv .pub-contact-page .contact_details .contact_frow--captcha .contactvarif {
	display: flex !important;
	align-items: center;
	gap: 10px;
	width: 100%;
}

.mainContentDiv .pub-contact-page .contact_details .contact_frow--captcha .contactvarif input[type="text"] {
	flex: 1;
	min-width: 0;
}

.mainContentDiv .pub-contact-page .contact_details .contact_frow--captcha img[id="image"] {
	border-radius: 6px;
	border: 1px solid #e2e8f0;
	display: inline-block;
	height: auto;
	width: auto;
	max-width: none !important;
	max-height: 52px;
	align-self: flex-start;
	flex-shrink: 0;
	margin-top: 4px;
}

/* ── Required asterisk ────────────────────────────────────── */
.mainContentDiv .pub-contact-page .mandatory {
	color: #ef4444 !important;
	font-weight: 700 !important;
}

/* When mandatory asterisk is inside a field label, keep it inline */
.mainContentDiv .pub-contact-page .contact-field-label .mandatory {
	position: static !important;
	transform: none !important;
	top: auto !important;
	right: auto !important;
	display: inline !important;
	font-size: 0.8125rem;
}

/* ── Bottom submit row ────────────────────────────────────── */
.mainContentDiv .pub-contact-page .contact_details .contact_frow--submit {
	margin-top: 4px;
}

/* ============================================================
   REGISTRATION FORM  —  table.admainbox.pub-form-card
   ============================================================ */

/* ── Card elevation ───────────────────────────────────────── */
.mainContentDiv table.admainbox.pub-form-card {
	border-radius: 22px !important;
	box-shadow:
		0 2px 4px rgba(15, 23, 42, 0.03),
		0 8px 16px rgba(15, 23, 42, 0.06),
		0 28px 64px rgba(15, 23, 42, 0.09) !important;
	border: 1px solid rgba(226, 232, 240, 0.85) !important;
	overflow: hidden !important;
}

/* ── Blue-tinted header row ───────────────────────────────── */
.mainContentDiv table.admainbox.pub-form-card > tbody > tr:first-child > td {
	background: linear-gradient(145deg, #eef2ff 0%, #e8f2ff 100%) !important;
	border-bottom: 1px solid #dbeafe !important;
}

/* ── Form heading ─────────────────────────────────────────── */
.mainContentDiv table.admainbox.pub-form-card h4.about_heading,
.mainContentDiv table.admainbox.pub-form-card .about_heading {
	font-size: clamp(1.25rem, 2.5vw, 1.65rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.025em !important;
	color: #0f172a !important;
}

/* ── Subheading bar ───────────────────────────────────────── */
.mainContentDiv table.admainbox.pub-form-card .headingbar {
	font-size: 0.875rem !important;
	color: #475569 !important;
	font-weight: 400 !important;
	white-space: normal !important;
}

/* ── All form inputs, passwords, emails, selects ─────────── */
.mainContentDiv table.admainbox.pub-form-card .colortext input[type="text"],
.mainContentDiv table.admainbox.pub-form-card .colortext input[type="password"],
.mainContentDiv table.admainbox.pub-form-card .colortext input[type="email"],
.mainContentDiv table.admainbox.pub-form-card .colortext select,
.mainContentDiv table.admainbox.pub-form-card .colortext textarea {
	width: 100% !important;
	box-sizing: border-box;
	padding: 10px 13px !important;
	border: 1.5px solid #e2e8f0 !important;
	border-radius: 9px !important;
	background: #f8fafc !important;
	font-size: 0.9rem !important;
	color: #0f172a !important;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.mainContentDiv table.admainbox.pub-form-card .colortext input[type="text"]:focus,
.mainContentDiv table.admainbox.pub-form-card .colortext input[type="password"]:focus,
.mainContentDiv table.admainbox.pub-form-card .colortext input[type="email"]:focus,
.mainContentDiv table.admainbox.pub-form-card .colortext select:focus,
.mainContentDiv table.admainbox.pub-form-card .colortext textarea:focus {
	border-color: #2563eb !important;
	background: #ffffff !important;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
	outline: none !important;
}

/* ── Select arrow ─────────────────────────────────────────── */
.mainContentDiv table.admainbox.pub-form-card .colortext select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 10px center !important;
	background-size: 18px !important;
	padding-right: 36px !important;
	cursor: pointer;
}

/* ── Label column ─────────────────────────────────────────── */
.mainContentDiv table.admainbox.pub-form-card .colortext td.contact_ncolmf {
	color: #334155;
	font-weight: 600 !important;
	font-size: 0.875rem !important;
	line-height: 1.5 !important;
}

/* ── Helper / info text ───────────────────────────────────── */
.mainContentDiv table.admainbox.pub-form-card .colortext .info {
	font-size: 0.8rem !important;
	color: #64748b !important;
	line-height: 1.5;
}

/* ── Required asterisk ────────────────────────────────────── */
.mainContentDiv table.admainbox.pub-form-card .colortext .mandatory {
	color: #ef4444 !important;
	font-weight: 700 !important;
}

/* ── Captcha iframe ───────────────────────────────────────── */
.mainContentDiv table.admainbox.pub-form-card .contact_ncolmmnthlycode iframe {
	border-radius: 6px !important;
	border: 1px solid #e2e8f0 !important;
	vertical-align: middle;
}

/* ── Submit button ────────────────────────────────────────── */
.mainContentDiv table.admainbox.pub-form-card .colortext input[type="submit"] {
	background: linear-gradient(135deg, #2563eb 0%, #0284c7 100%) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 12px 40px !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(37, 99, 235, 0.28);
	transition: filter 0.15s ease, transform 0.12s ease;
	-webkit-appearance: none;
	appearance: none;
}

.mainContentDiv table.admainbox.pub-form-card .colortext input[type="submit"]:hover {
	filter: brightness(1.1);
	transform: translateY(-2px);
}

/* ── Section heading above first field (credentials) ─────── */
.mainContentDiv table.admainbox.pub-form-card .colortext tr.contact_frow:not(.contact_frow--full):first-of-type td.contact_ncolmf::before {
	content: "Account Credentials";
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #94a3b8;
	margin-bottom: 8px;
}

/* ── Intro / inserted helper text ─────────────────────────── */
.mainContentDiv table.admainbox.pub-form-card .colortext .inserted {
	font-size: 0.875rem !important;
	color: #64748b !important;
	line-height: 1.6;
}

/* ── Visual section divider: personal info starts here ────── */
/* reg-section-start class is placed on First Name row to visually
   separate "Account Credentials" from "Personal Information" */
.mainContentDiv table.admainbox.pub-form-card .colortext tr.reg-section-start > td {
	padding-top: 18px !important;
	border-top: 2px solid #f1f5f9 !important;
	position: relative;
}

.mainContentDiv table.admainbox.pub-form-card .colortext tr.reg-section-start > td:first-child::before {
	content: "Personal Information";
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #94a3b8;
	margin-bottom: 10px;
	padding-top: 4px;
}

/* ============================================================
   LOGIN PAGES  —  body.guest-login-page extras
   ============================================================ */

/* ── Page background: richer gradient ────────────────────── */
body.guest-login-page .mainContentDiv {
	background: linear-gradient(155deg, #eef2ff 0%, #f0f9ff 50%, #f8fafc 100%) !important;
}

/* ── Auth stage: cleaner outer card look ─────────────────── */
body.guest-login-page .auth-page-root.admainbox {
	border-radius: 0 !important;
	box-shadow: none !important;
	border: none !important;
}

/* ── Story cards: hover lift ──────────────────────────────── */
body.guest-login-page .auth-story-card {
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

body.guest-login-page .auth-story-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 28px rgba(37, 99, 235, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}

/* ── Feature highlight cards: hover lift ─────────────────── */
body.guest-login-page .auth-highlight-card:hover .box_in,
body.guest-login-page .three_box:hover .box_in {
	transform: translateY(-4px) !important;
	box-shadow:
		0 4px 8px rgba(15, 23, 42, 0.06),
		0 16px 36px rgba(15, 23, 42, 0.11) !important;
}

/* ── Value cards: hover lift ──────────────────────────────── */
body.guest-login-page .box_in2 {
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

body.guest-login-page .auth-value-card:hover .box_in2,
body.guest-login-page .three_box:hover .box_in2 {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.1) !important;
}

/* ── Login card: slightly more prominent shadow ───────────── */
body.guest-login-page .auth-login-card {
	box-shadow:
		0 2px 4px rgba(15, 23, 42, 0.04),
		0 16px 48px rgba(15, 23, 42, 0.12) !important;
}

/* ── Auth role badge: slightly polished ───────────────────── */
body.guest-login-page .auth-role-badge {
	font-size: 0.7rem !important;
}

/* ── Highlights section gap vs. auth stage ────────────────── */
body.guest-login-page .auth-highlights,
body.guest-login-page .fullwidthsection {
	margin-top: 20px !important;
}

/* ── Values section gap ───────────────────────────────────── */
body.guest-login-page .auth-values,
body.guest-login-page .bottom_section {
	margin-top: 14px !important;
	margin-bottom: 8px !important;
}

/* ============================================================
   INDEX PAGE  —  body.index-home
   ============================================================ */

/* (old v3-center h1 rule removed — headline now uses .hhs-headline) */

/* ── Paths section: tinted card backgrounds ───────────────── */
body.index-home .home-path-card--adv {
	background: linear-gradient(170deg, #eff6ff 0%, #f8fafc 60%, #ffffff 100%) !important;
}

body.index-home .home-path-card--pub {
	background: linear-gradient(170deg, #f5f3ff 0%, #f8fafc 60%, #ffffff 100%) !important;
}

/* Taller top accent stripe */
body.index-home .home-path-card--adv {
	border-top: 5px solid #2563eb !important;
}

body.index-home .home-path-card--pub {
	border-top: 5px solid #7c3aed !important;
}

/* Path icon: bigger, tinted bg */
body.index-home .home-path-card--adv .home-path-icon {
	background: #dbeafe !important;
	border-color: #bfdbfe !important;
}

body.index-home .home-path-card--pub .home-path-icon {
	background: #ede9fe !important;
	border-color: #ddd6fe !important;
}

/* Path card heading color */
body.index-home .home-path-card--adv .bo_heading {
	color: #1d4ed8 !important;
}

body.index-home .home-path-card--pub .bo_heading {
	color: #6d28d9 !important;
}

/* Path card hover: stronger lift */
body.index-home .home-path-card:hover {
	transform: translateY(-6px) !important;
	box-shadow: 0 20px 48px rgba(15, 23, 42, 0.13) !important;
}

/* ── Steps section: colored cards ────────────────────────── */
/* Step 1 — blue */
body.index-home .home-step-card:nth-child(1) {
	background: linear-gradient(160deg, #eff6ff 0%, #f8fafc 100%) !important;
	border-color: #bfdbfe !important;
}

body.index-home .home-step-card:nth-child(1) .home-step-num {
	background: linear-gradient(135deg, #1d4ed8, #38bdf8) !important;
	box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
}

/* Step 2 — violet */
body.index-home .home-step-card:nth-child(2) {
	background: linear-gradient(160deg, #f5f3ff 0%, #f8fafc 100%) !important;
	border-color: #ddd6fe !important;
}

body.index-home .home-step-card:nth-child(2) .home-step-num {
	background: linear-gradient(135deg, #6d28d9, #a78bfa) !important;
	box-shadow: 0 6px 18px rgba(109, 40, 217, 0.35);
}

/* Step 3 — cyan */
body.index-home .home-step-card:nth-child(3) {
	background: linear-gradient(160deg, #ecfeff 0%, #f8fafc 100%) !important;
	border-color: #a5f3fc !important;
}

body.index-home .home-step-card:nth-child(3) .home-step-num {
	background: linear-gradient(135deg, #0891b2, #22d3ee) !important;
	box-shadow: 0 6px 18px rgba(8, 145, 178, 0.35);
}

/* Step number size */
body.index-home .home-step-num {
	width: 48px !important;
	height: 48px !important;
	font-size: 0.95rem !important;
	border-radius: 14px !important;
	margin-bottom: 16px !important;
}

/* Step card hover */
body.index-home .home-step-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.index-home .home-step-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1) !important;
}

/* ── Section headings: sharper typography ─────────────────── */
body.index-home .home-section-head .part_hrading {
	font-size: clamp(1.65rem, 3.5vw, 2.3rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.03em !important;
}

/* ── Paths & steps outer container: better shadow ─────────── */
body.index-home .home-paths-section,
body.index-home .home-steps-section {
	box-shadow: 0 4px 8px rgba(15, 23, 42, 0.04), 0 20px 48px rgba(15, 23, 42, 0.08) !important;
}

/* ── Mobile hero: remove dead space below CTA buttons ─────── */
@media (max-width: 767px) {
	body.index-home .home-hero-bento {
		display: none !important;
	}

	body.index-home .home-hero-main {
		grid-template-columns: 1fr !important;
	}

	body.index-home .home-top-banner {
		padding-bottom: 20px !important;
	}
}

/* ============================================================
   INDEX PAGE — HERO (simple centered layout)
   Eyebrow · large gradient headline · lead · dual CTAs
   · three-stat frosted strip.  All other sections unchanged.
   ============================================================ */

/* ── 1. HERO: overlay as flex centering shell ───────────── */

body.index-home .home-hero-v2 .home-top-overlay {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	padding: clamp(72px, 10vw, 120px) clamp(20px, 4vw, 48px) clamp(64px, 8vw, 100px) !important;
	box-sizing: border-box !important;
}

/* ── Content wrapper: column, centered, max 780px wide ──── */

body.index-home .hhs-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100%;
	max-width: 780px;
}

/* ── Eyebrow badge ──────────────────────────────────────── */

body.index-home .hhs-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 18px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(186, 230, 253, 0.92);
	margin-bottom: 28px;
	white-space: nowrap;
}

body.index-home .hhs-eyebrow-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #4ade80;
	flex-shrink: 0;
	animation: hhsDotPulse 2.2s ease-in-out infinite;
}

@keyframes hhsDotPulse {
	0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.65); }
	60%  { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
	100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* ── Headline ───────────────────────────────────────────── */

/* Base styles: specificity 0-2-1 (class + type body) */
body.index-home .hhs-headline {
	font-size: clamp(2.6rem, 7vw, 5rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.05em !important;
	line-height: 1.05 !important;
	margin: 0 0 20px !important;
	padding: 0 !important;
	background: linear-gradient(135deg, #ffffff 25%, #93c5fd 60%, #c4b5fd 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-align: center !important;
	width: 100%;
}

/* High-specificity centring + font override (0-4-1): beats index-home-polish overlay h1 (0-2-2) */
body.index-home .home-top-banner.home-hero-v2 .hhs-wrap .hhs-headline {
	text-align: center !important;
	font-size: clamp(2.6rem, 7vw, 5rem) !important;
}

/* ── Lead text ──────────────────────────────────────────── */

body.index-home .hhs-lead {
	font-size: clamp(1rem, 1.8vw, 1.15rem) !important;
	line-height: 1.7 !important;
	color: rgba(186, 230, 253, 0.82) !important;
	max-width: 560px;
	margin: 0 auto 36px !important;
	text-align: center !important;
}

/* ── CTA row ────────────────────────────────────────────── */

body.index-home .hhs-ctas {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 48px;
}

/* ── Three-stat frosted strip ───────────────────────────── */

body.index-home .hhs-stats {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 640px;
	padding: 16px 24px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	flex-wrap: wrap;
	gap: 0;
}

body.index-home .hhs-stat {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 18px;
	flex: 1;
	min-width: 130px;
	justify-content: center;
}

body.index-home .hhs-stat-sep {
	width: 1px;
	height: 36px;
	background: rgba(255, 255, 255, 0.16);
	flex-shrink: 0;
}

body.index-home .hhs-stat-icon {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 13px;
	flex-shrink: 0;
}

body.index-home .hhs-stat-icon--blue   { background: linear-gradient(135deg, #38bdf8, #2563eb); }
body.index-home .hhs-stat-icon--violet { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
body.index-home .hhs-stat-icon--cyan   { background: linear-gradient(135deg, #22d3ee, #0891b2); }

body.index-home .hhs-stat-text {
	font-size: 0.82rem;
	font-weight: 600;
	color: #f1f5f9;
	line-height: 1.4;
	text-align: left;
}

/* ── Mobile tweaks ──────────────────────────────────────── */

@media (max-width: 640px) {
	body.index-home .home-hero-v2 .home-top-overlay {
		padding-left: 20px !important;
		padding-right: 20px !important;
		padding-top: 56px !important;
		padding-bottom: 48px !important;
	}

	body.index-home .hhs-eyebrow {
		white-space: normal;
		text-align: center;
		font-size: 0.62rem;
		padding: 6px 12px;
	}

	/* High-specificity mobile font — 7vw = ~27px at 390px, fits in ~350px */
	body.index-home .home-top-banner.home-hero-v2 .hhs-wrap .hhs-headline {
		font-size: 7vw !important;
		letter-spacing: -0.03em !important;
		text-align: center !important;
	}

	body.index-home .hhs-lead {
		font-size: 0.9rem !important;
	}

	body.index-home .hhs-ctas {
		flex-direction: column;
		align-items: center;
	}

	body.index-home .hhs-stats {
		flex-direction: column;
		padding: 12px 16px;
		gap: 4px;
		max-width: 100%;
	}

	body.index-home .hhs-stat {
		width: 100%;
		padding: 8px 12px;
		justify-content: flex-start;
	}

	body.index-home .hhs-stat-sep {
		width: 100%;
		height: 1px;
	}
}

/* ── 2. FEATURE HIGHLIGHTS SECTION (new) ─────────────────── */

body.index-home .home-features-section {
	width: min(1180px, 92%) !important;
	max-width: 1180px !important;
	margin: clamp(28px, 5vw, 52px) auto !important;
	padding: clamp(28px, 4vw, 44px) clamp(18px, 3vw, 32px) !important;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 24px;
	box-shadow:
		0 4px 8px rgba(15, 23, 42, 0.04),
		0 20px 48px rgba(15, 23, 42, 0.08);
	box-sizing: border-box;
	float: none !important;
	clear: both !important;
}

body.index-home .home-features-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 4px;
}

@media (min-width: 640px) {
	body.index-home .home-features-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}
}

body.index-home .home-feature-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	padding: 28px 24px 26px;
	border-radius: 18px;
	border: 1px solid #e8eef5;
	background: #f8fafc;
	position: relative;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

body.index-home .home-feature-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	border-radius: 18px 18px 0 0;
}

body.index-home .home-feature-card--blue::before {
	background: linear-gradient(90deg, #2563eb, #38bdf8);
}

body.index-home .home-feature-card--violet::before {
	background: linear-gradient(90deg, #7c3aed, #a78bfa);
}

body.index-home .home-feature-card--cyan::before {
	background: linear-gradient(90deg, #0891b2, #22d3ee);
}

body.index-home .home-feature-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 36px rgba(15, 23, 42, 0.1);
	border-color: #bfdbfe;
}

body.index-home .home-feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 16px;
	font-size: 22px;
	color: #ffffff;
	margin-bottom: 18px;
	flex-shrink: 0;
}

body.index-home .home-feature-icon--blue {
	background: linear-gradient(135deg, #3b82f6, #2563eb);
	box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}

body.index-home .home-feature-icon--violet {
	background: linear-gradient(135deg, #a78bfa, #7c3aed);
	box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3);
}

body.index-home .home-feature-icon--cyan {
	background: linear-gradient(135deg, #22d3ee, #0891b2);
	box-shadow: 0 8px 20px rgba(8, 145, 178, 0.3);
}

body.index-home .home-feature-title {
	margin: 0 0 10px !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	line-height: 1.35 !important;
}

body.index-home .home-feature-desc {
	margin: 0 !important;
	font-size: 0.875rem !important;
	line-height: 1.65 !important;
	color: #475569 !important;
}

/* ── 3. PATH CARDS — gradient header bands ────────────────── */

/* The card itself: remove old top-border override (header handles it) */
body.index-home .home-path-card {
	padding: 0 !important;
	overflow: hidden;
}

/* Gradient header band */
body.index-home .home-path-card-header {
	padding: 22px 24px;
	border-bottom: 1px solid transparent;
}

body.index-home .home-path-card-header--adv {
	background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 50%, #2563eb 100%);
	border-bottom-color: rgba(147, 197, 253, 0.3);
}

body.index-home .home-path-card-header--pub {
	background: linear-gradient(135deg, #3b0764 0%, #6d28d9 50%, #7c3aed 100%);
	border-bottom-color: rgba(196, 181, 253, 0.3);
}

/* Icon + heading row inside header */
body.index-home .home-path-card-header-inner {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* Override icon styling inside the dark header */
body.index-home .home-path-card-header .home-path-icon {
	background: rgba(255, 255, 255, 0.15) !important;
	border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
}

body.index-home .home-path-card-header .bo_heading {
	color: #ffffff !important;
	font-size: 1.45rem !important;
	margin: 0 0 4px !important;
	text-align: left !important;
}

body.index-home .home-path-card-header .home-path-tagline {
	color: rgba(226, 232, 240, 0.9) !important;
	margin: 0 !important;
	font-size: 0.875rem !important;
}

/* Card body: padded area for feature list and CTA */
body.index-home .home-path-card-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 22px 24px !important;
	flex: 1;
}

/* Remove old border-top from path card (header handles it) */
body.index-home .home-path-card--adv,
body.index-home .home-path-card--pub {
	border-top: 0 !important;
}

/* ── 4. STEPS — numbered with connector lines ─────────────── */

/* Steps grid: add position:relative for the connector pseudo-element */
body.index-home .home-steps-section .home-steps-grid {
	position: relative;
}

/* Horizontal connector on desktop */
@media (min-width: 992px) {
	body.index-home .home-steps-section .home-steps-grid::before {
		content: "";
		position: absolute;
		top: 44px;
		left: calc(100% / 6);
		right: calc(100% / 6);
		height: 2px;
		background: linear-gradient(90deg, #3b82f6 0%, #7c3aed 50%, #0891b2 100%);
		opacity: 0.25;
		z-index: 0;
		pointer-events: none;
	}
}

/* New step card layout: marker + content */
body.index-home .home-step-card--numbered {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	padding: 0 !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	position: relative;
	z-index: 1;
}

/* Step marker row: number badge + connector */
body.index-home .home-step-marker {
	display: flex;
	align-items: center;
	gap: 0;
	margin-bottom: 20px;
	width: 100%;
}

body.index-home .home-step-connector {
	display: none;
}

/* Step content box */
body.index-home .home-step-content {
	padding: 22px 22px 24px;
	border-radius: 18px;
	border: 1px solid #e8eef5;
	width: 100%;
	box-sizing: border-box;
	flex: 1;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.index-home .home-step-card--numbered:hover .home-step-content {
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(15, 23, 42, 0.1) !important;
}

/* Step-1 content: blue tint */
body.index-home .home-step-card--numbered:nth-child(1) .home-step-content {
	background: linear-gradient(160deg, #eff6ff 0%, #f8fafc 100%) !important;
	border-color: #bfdbfe !important;
}

/* Step-2 content: violet tint */
body.index-home .home-step-card--numbered:nth-child(2) .home-step-content {
	background: linear-gradient(160deg, #f5f3ff 0%, #f8fafc 100%) !important;
	border-color: #ddd6fe !important;
}

/* Step-3 content: cyan tint */
body.index-home .home-step-card--numbered:nth-child(3) .home-step-content {
	background: linear-gradient(160deg, #ecfeff 0%, #f8fafc 100%) !important;
	border-color: #a5f3fc !important;
}

/* Step-1 badge: blue gradient */
body.index-home .home-step-card--numbered:nth-child(1) .home-step-num {
	background: linear-gradient(135deg, #1d4ed8, #38bdf8) !important;
	box-shadow: 0 6px 18px rgba(37, 99, 235, 0.38) !important;
}

/* Step-2 badge: violet gradient */
body.index-home .home-step-card--numbered:nth-child(2) .home-step-num {
	background: linear-gradient(135deg, #6d28d9, #a78bfa) !important;
	box-shadow: 0 6px 18px rgba(109, 40, 217, 0.38) !important;
}

/* Step-3 badge: cyan gradient */
body.index-home .home-step-card--numbered:nth-child(3) .home-step-num {
	background: linear-gradient(135deg, #0891b2, #22d3ee) !important;
	box-shadow: 0 6px 18px rgba(8, 145, 178, 0.38) !important;
}

/* Bigger step badge */
body.index-home .home-step-num {
	width: 52px !important;
	height: 52px !important;
	font-size: 1rem !important;
	border-radius: 16px !important;
	margin-bottom: 0 !important;
}

body.index-home .home-step-content h3 {
	margin: 0 0 8px !important;
	font-size: 1.1rem !important;
	font-weight: 700 !important;
	color: #0f172a !important;
}

body.index-home .home-step-content p {
	margin: 0 !important;
	font-size: 0.9rem !important;
	line-height: 1.65 !important;
	color: #475569 !important;
}

/* ── 5. SECTION EYEBROW: colored accent ───────────────────── */

body.index-home .home-section-eyebrow {
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.13em !important;
	text-transform: uppercase !important;
	color: #2563eb !important;
	margin-bottom: 8px !important;
}

/* ── 6. SECTION HEADING: ensure underline bar is visible ──── */

body.index-home .home-paths-section .part_hrading::after,
body.index-home .home-features-section .part_hrading::after,
body.index-home .home-steps-section .part_hrading::after {
	margin-top: 10px !important;
}

/* ── 7. RESPONSIVE: mobile-first stacks ──────────────────── */

@media (max-width: 767px) {
	/* Hero: hide bento widget, tighten padding */
	body.index-home .home-hero-bento--centered {
		display: none !important;
	}

	body.index-home .home-top-banner {
		padding-bottom: 28px !important;
	}

	/* Feature section: single column already handled by grid */
	body.index-home .home-features-section {
		margin-top: 20px !important;
	}

	/* Path card header: full padding */
	body.index-home .home-path-card-header {
		padding: 18px 20px !important;
	}

	body.index-home .home-path-card-body {
		padding: 18px 20px !important;
	}
}

/* (v3 mobile overrides removed — simple hero handles its own responsive CSS above) */

@media (min-width: 992px) {
	/* Hero: bento visible again on desktop */
	body.index-home .home-hero-bento--centered {
		display: grid !important;
	}

	/* Path cards: side by side, equal height */
	body.index-home .home-paths-grid {
		align-items: stretch !important;
	}

	body.index-home .home-path-card {
		display: flex !important;
		flex-direction: column !important;
	}

	body.index-home .home-path-card-body {
		flex: 1;
	}
}

/* ============================================================
   SHARED FORM ELEMENTS  —  all guest pages
   ============================================================ */

/* Nice placeholder color */
.mainContentDiv .pub-form-card input::placeholder,
.mainContentDiv .pub-contact-page input::placeholder,
.mainContentDiv .pub-contact-page textarea::placeholder {
	color: #94a3b8 !important;
	opacity: 1;
}

/* Smooth scroll for "back to top" */
html {
	scroll-behavior: smooth;
}

/* ============================================================
   FAQ PAGES  —  div.admainbox.pub-faq-page
   ============================================================ */

body.guest-public .mainContentDiv div.admainbox.pub-faq-page {
	max-width: 820px !important;
	width: auto !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: clamp(28px, 5vw, 52px) !important;
	margin-bottom: clamp(28px, 5vw, 52px) !important;
	border-radius: 22px !important;
	box-shadow:
		0 2px 4px rgba(15, 23, 42, 0.03),
		0 8px 16px rgba(15, 23, 42, 0.06),
		0 28px 64px rgba(15, 23, 42, 0.09) !important;
	border: 1px solid rgba(226, 232, 240, 0.85) !important;
	overflow: visible;
	background: #ffffff;
}

/* ── FAQ heading bar ──────────────────────────────────────── */
.mainContentDiv .pub-faq-page .faq_heading {
	background: linear-gradient(145deg, #eef2ff 0%, #e8f2ff 100%) !important;
	border-bottom: 1px solid #dbeafe !important;
	border-radius: 22px 22px 0 0 !important;
	padding: 24px 28px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	box-sizing: border-box !important;
}

.mainContentDiv .pub-faq-page .faq_heading .about_heading {
	font-size: clamp(1.1rem, 2.5vw, 1.45rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em !important;
	color: #0f172a !important;
}

.mainContentDiv .pub-faq-page .faq_heading .smallLink {
	font-size: 0.82rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	padding: 6px 14px !important;
	border-radius: 8px !important;
	border: 1px solid #dbeafe !important;
	background: #ffffff !important;
	color: #3b82f6 !important;
	transition: background 0.18s, box-shadow 0.18s !important;
}

.mainContentDiv .pub-faq-page .faq_heading .smallLink:hover {
	background: #eff6ff !important;
	box-shadow: 0 2px 6px rgba(59,130,246,0.12) !important;
}

/* ── FAQ items list ───────────────────────────────────────── */
.mainContentDiv .pub-faq-page .faq_details {
	padding: 12px 32px 32px !important;
}

.mainContentDiv .pub-faq-page .faq_ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.mainContentDiv .pub-faq-page .faq_li {
	border-bottom: 1px solid #f1f5f9 !important;
	padding: 4px 0 !important;
}

.mainContentDiv .pub-faq-page .faq_li:last-child {
	border-bottom: none !important;
}

.mainContentDiv .pub-faq-page .faq_homeheading {
	font-size: 0.96rem !important;
	font-weight: 700 !important;
	color: #1e293b !important;
	padding: 16px 0 8px !important;
	cursor: pointer !important;
	position: relative !important;
	padding-right: 28px !important;
}

.mainContentDiv .pub-faq-page .faq_homeheading.activefaq {
	color: #3b82f6 !important;
}

.mainContentDiv .pub-faq-page .content_faq_p {
	font-size: 0.875rem !important;
	line-height: 1.7 !important;
	color: #475569 !important;
	padding-bottom: 16px !important;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 600px) {
	body.guest-public .mainContentDiv div.admainbox.pub-faq-page,
	body.guest-public .mainContentDiv div.admainbox.pub-contact-page {
		border-radius: 12px !important;
		margin-top: 16px !important;
		margin-bottom: 16px !important;
	}

	.mainContentDiv .pub-faq-page .faq_heading,
	.mainContentDiv .pub-faq-page .faq_details {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
}


/* ================================================================
   REDESIGNED FOOTER — adnetwork-inspired dark layout
   ================================================================ */
.pf-footer {
  background: #1A1630;
  border-top: 2px solid rgba(108,62,244,0.45);
  box-shadow: 0 -4px 24px rgba(108,62,244,0.12);
  padding: 56px 0 0;
  font-family: 'Inter','Segoe UI',system-ui,sans-serif;
  color: #B8B4D4;
  box-sizing: border-box;
}

/* Inner: brand + two columns */
.pf-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px 48px;
  box-sizing: border-box;
}

/* Brand */
.pf-logo-link { display: inline-block; margin-bottom: 16px; text-decoration: none !important; }
.pf-logo-text {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.3px;
}

.pf-tagline {
  font-size: .875rem;
  line-height: 1.7;
  color: #6E6A8A;
  margin: 0 0 20px;
  max-width: 320px;
}

/* Social icons */
.pf-social { display: flex; gap: 10px; }
.pf-social-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: #B8B4D4;
  font-size: 14px;
  text-decoration: none !important;
  transition: background .2s, color .2s, border-color .2s;
}
.pf-social-btn:hover {
  background: rgba(108,62,244,.25);
  border-color: rgba(108,62,244,.5);
  color: #fff !important;
}

/* Link columns */
.pf-col-title {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #fff;
  margin: 0 0 16px;
  padding: 0;
  border: none;
  background: transparent;
}

.pf-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pf-links li {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}
.pf-links li::before { display: none !important; }

.pf-link {
  font-size: .875rem;
  color: #6E6A8A !important;
  text-decoration: none !important;
  transition: color .2s;
  display: inline-block;
}
.pf-link:hover { color: #fff !important; }

/* Bottom bar */
.pf-bottom {
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 20px 24px;
  border-top: 1px solid rgba(255,255,255,.06);
  box-sizing: border-box;
}

.pf-copyright {
  font-size: .8125rem;
  color: #6E6A8A;
  margin: 0;
  text-align: center;
}
.pf-copyright a { color: #6E6A8A !important; text-decoration: none !important; }
.pf-copyright a:hover { color: #fff !important; }

/* Tablet */
@media (max-width: 900px) {
  .pf-inner {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  .pf-brand {
    grid-column: 1 / -1;
  }
  .pf-tagline { max-width: 100%; }
}

/* Mobile */
@media (max-width: 600px) {
  .pf-footer { padding-top: 40px; }
  .pf-inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 0 16px;
  }
  .pf-brand { grid-column: auto; }
  .pf-bottom { padding: 16px; }
}

/* Hide old footer elements that may bleed through */
.footerDiv, .footer_wraper, .splNav, .foo_social, .center_fbackto,
.siteContent, .footer .left, .footer .right, .footer .center_fbackto { display: none !important; }


/* ================================================================
   DARK THEME — all guest public pages except index/home
   Matches the homepage color palette: purple / pink / cyan on #0F0C1E
   ================================================================ */

/* ── Page background + sticky footer (short pages: forgot password, etc.) ── */
body.guest-public:not(.index-home) {
  color-scheme: dark;
  background: linear-gradient(135deg, #0F0C1E 0%, #1A0F3C 50%, #0A1628 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  color: #B8B4D4 !important;
}

body.guest-public:not(.index-home) .margin_topdiv {
  background: transparent !important;
  flex: 1 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

body.guest-public:not(.index-home) .mainContentDiv {
  background: transparent !important;
  flex: 1 0 auto !important;
  min-height: 0 !important;
  float: none !important;
}

body.guest-public:not(.index-home) .pf-footer {
  flex-shrink: 0 !important;
  margin-top: auto !important;
}

/* ── Card / box ───────────────────────────────────────────────── */
body.guest-public:not(.index-home) .admainbox,
body.guest-public:not(.index-home) table.admainbox,
body.guest-public:not(.index-home) div.admainbox,
body.guest-public:not(.index-home) .pub-form-card,
body.guest-public:not(.index-home) .pub-contact-page,
body.guest-public:not(.index-home) .pub-faq-page {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5) !important;
  color: #B8B4D4 !important;
}

/* ── Page/section headings ───────────────────────────────────── */
body.guest-public:not(.index-home) h1,
body.guest-public:not(.index-home) h2,
body.guest-public:not(.index-home) h3,
body.guest-public:not(.index-home) h4,
body.guest-public:not(.index-home) .about_heading,
body.guest-public:not(.index-home) .part_hrading,
body.guest-public:not(.index-home) .headingbar,
body.guest-public:not(.index-home) .faq_heading,
body.guest-public:not(.index-home) .contact_heding .about_heading {
  color: #ffffff !important;
  border-color: rgba(108,62,244,0.4) !important;
  background: transparent !important;
}

body.guest-public:not(.index-home) .headingbar {
  background: linear-gradient(135deg, rgba(108,62,244,0.3), rgba(244,62,138,0.2)) !important;
  border-left: 4px solid #6C3EF4 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
}

/* ── Body text & labels ──────────────────────────────────────── */
body.guest-public:not(.index-home) p,
body.guest-public:not(.index-home) td,
body.guest-public:not(.index-home) label,
body.guest-public:not(.index-home) .colortext,
body.guest-public:not(.index-home) .contact-field-label,
body.guest-public:not(.index-home) .about_content {
  color: #B8B4D4 !important;
  background: transparent !important;
}

/* ── Remap slate variables for dark theme (login pages) ─────── */
/* public-login-pages.css defines --slate-* in :root for a light theme.
   Re-declaring them here on body.guest-public makes every
   var(--slate-*) inside those pages resolve to dark-theme values,
   which fixes all hard-to-see text without touching specificity. */
body.guest-public {
  --slate-50:  rgba(255,255,255,0.04);
  --slate-100: rgba(255,255,255,0.07);
  --slate-200: rgba(255,255,255,0.12);
  --slate-400: rgba(255,255,255,0.35);
  --slate-500: rgba(255,255,255,0.45);
  --slate-600: #9896B0;
  --slate-700: #B8B4D4;
  --slate-900: #f1f5f9;
}

/* ── Input fields ────────────────────────────────────────────── */
body.guest-public:not(.index-home) input[type="text"],
body.guest-public:not(.index-home) input[type="email"],
body.guest-public:not(.index-home) input[type="password"],
body.guest-public:not(.index-home) input[type="tel"],
body.guest-public:not(.index-home) input[type="number"],
body.guest-public:not(.index-home) textarea,
body.guest-public:not(.index-home) select {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  transition: border-color 0.2s, background 0.2s !important;
}

body.guest-public:not(.index-home) input[type="text"]::placeholder,
body.guest-public:not(.index-home) input[type="email"]::placeholder,
body.guest-public:not(.index-home) input[type="password"]::placeholder,
body.guest-public:not(.index-home) textarea::placeholder {
  color: rgba(255,255,255,0.3) !important;
}

body.guest-public:not(.index-home) input[type="text"]:focus,
body.guest-public:not(.index-home) input[type="email"]:focus,
body.guest-public:not(.index-home) input[type="password"]:focus,
body.guest-public:not(.index-home) textarea:focus,
body.guest-public:not(.index-home) select:focus {
  background: rgba(108,62,244,0.12) !important;
  border-color: #6C3EF4 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(108,62,244,0.2) !important;
}

/* Native select dropdown list — dark panel + light text on guest pages */
body.guest-public:not(.index-home) select option,
body.guest-public:not(.index-home) select optgroup {
  background-color: #1E1A38 !important;
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}

body.guest-public:not(.index-home) select option:checked,
body.guest-public:not(.index-home) select option:hover {
  background-color: #6C3EF4 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ── Buttons & submit ────────────────────────────────────────── */
body.guest-public:not(.index-home) input[type="submit"],
body.guest-public:not(.index-home) input.submit,
body.guest-public:not(.index-home) .submit.button,
body.guest-public:not(.index-home) button[type="submit"],
body.guest-public:not(.index-home) .colortext input[type="submit"] {
  background: linear-gradient(135deg, #6C3EF4, #F43E8A) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  transition: opacity 0.2s !important;
  cursor: pointer !important;
}

body.guest-public:not(.index-home) input[type="submit"]:hover,
body.guest-public:not(.index-home) .submit.button:hover {
  opacity: 0.88 !important;
}

/* ── Feature bullet points (login page) ──────────────────────── */
body.guest-public:not(.index-home) .auth-features-list .auth-feature-item,
body.guest-public:not(.index-home) .login-feature-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  color: #B8B4D4 !important;
}

body.guest-public:not(.index-home) .auth-feature-item strong,
body.guest-public:not(.index-home) .login-feature-card h3 {
  color: #ffffff !important;
}

body.guest-public:not(.index-home) .auth-feature-dot,
body.guest-public:not(.index-home) .auth-icon-box {
  background: linear-gradient(135deg, rgba(108,62,244,0.3), rgba(108,62,244,0.1)) !important;
  color: #8B5CF6 !important;
}

/* ── Login / register card (right side on login pages) ──────── */
body.guest-public:not(.index-home) .auth-card,
body.guest-public:not(.index-home) .auth-form-wrap,
body.guest-public:not(.index-home) .auth-section {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 18px !important;
  color: #B8B4D4 !important;
}

/* ── Register / Login link buttons on login pages ────────────── */
body.guest-public:not(.index-home) .auth-btn,
body.guest-public:not(.index-home) a.registerLink,
body.guest-public:not(.index-home) a.loginLink {
  border-radius: 10px !important;
}

/* ── FAQ accordion ──────────────────────────────────────────── */
body.guest-public:not(.index-home) .faq_homeheading {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  padding: 16px 20px !important;
  transition: background 0.2s, border-color 0.2s !important;
}

body.guest-public:not(.index-home) .faq_homeheading:hover,
body.guest-public:not(.index-home) .faq_homeheading.activefaq {
  background: rgba(108,62,244,0.18) !important;
  border-color: rgba(108,62,244,0.4) !important;
  color: #fff !important;
}

body.guest-public:not(.index-home) .content_faq_p {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 10px !important;
  color: #B8B4D4 !important;
  margin-top: 4px !important;
  padding: 16px 20px !important;
}

/* Chevron / arrow on FAQ */
body.guest-public:not(.index-home) .faq_homeheading .fa {
  color: #6C3EF4 !important;
}

/* ── Section badges / labels on login pages ──────────────────── */
body.guest-public:not(.index-home) .auth-section-title {
  color: #ffffff !important;
}

body.guest-public:not(.index-home) .auth-section-label,
body.guest-public:not(.index-home) .auth-badge {
  background: rgba(108,62,244,0.2) !important;
  color: #8B5CF6 !important;
  border-color: rgba(108,62,244,0.3) !important;
}

/* ── Horizontal rules / dividers ─────────────────────────────── */
body.guest-public:not(.index-home) hr,
body.guest-public:not(.index-home) .divider {
  border-color: rgba(255,255,255,0.08) !important;
}

/* ── Table rows in forms (registration) ─────────────────────── */
body.guest-public:not(.index-home) table.admainbox tr,
body.guest-public:not(.index-home) table.admainbox td {
  background: transparent !important;
  border-color: rgba(255,255,255,0.06) !important;
  color: #B8B4D4 !important;
}

/* ── "View Publisher FAQ" / similar link-buttons ─────────────── */
body.guest-public:not(.index-home) a.view-faq-btn,
body.guest-public:not(.index-home) .faq-switch-link {
  background: rgba(108,62,244,0.15) !important;
  border: 1px solid rgba(108,62,244,0.3) !important;
  color: #8B5CF6 !important;
  border-radius: 8px !important;
}

/* ── Selectbox dropdown (language / country) — all pages ─────── */
/* Applied globally so the language dropdown matches on every page.
   These rules also override the white sbOptions in public-theme.css. */
.sbHolder {
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  border-radius: 8px !important;
  color: #f8fafc !important;
}

/* Header language: closed state stays below nav submenus; open state on top */
.header_wraperindex .languages .sbHolder {
  z-index: 100 !important;
}

.header_wraperindex .languages .sbHolder:has(.sbToggleOpen) {
  z-index: 10250 !important;
}

.header_wraperindex .languages .sbOptions {
  z-index: 10255 !important;
  top: calc(100% + 4px) !important;
  bottom: auto !important;
  left: auto !important;
  right: 0 !important;
}

.sbSelector,
.sbSelector:link,
.sbSelector:visited,
.sbSelector:hover {
  color: #f8fafc !important;
}

/* Override the white dropdown panel set in public-theme.css */
.sbOptions,
.header_wraperindex .sbOptions {
  background: #1E1838 !important;
  border: 1px solid rgba(108,62,244,0.3) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}

.sbOptions a,
.header_wraperindex .sbOptions a {
  color: #B8B4D4 !important;
  border-bottom-color: rgba(255,255,255,0.05) !important;
}

.sbOptions a:hover,
.sbOptions a:focus,
.sbOptions a.sbFocus,
.header_wraperindex .sbOptions a:hover,
.header_wraperindex .sbOptions a.sbFocus {
  color: #fff !important;
  background: rgba(108,62,244,0.2) !important;
}

/* Native select dropdown list — global fallback (logged-in + forms) */
body.accountPage select option,
body.accountPage select optgroup,
body:has(.header_wraperindex):not(.index-home) select option,
body:has(.header_wraperindex):not(.index-home) select optgroup {
  background-color: #1E1A38 !important;
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}

body.accountPage select option:checked,
body.accountPage select option:hover,
body:has(.header_wraperindex):not(.index-home) select option:checked,
body:has(.header_wraperindex):not(.index-home) select option:hover {
  background-color: #6C3EF4 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ── Captcha image row ───────────────────────────────────────── */
body.guest-public:not(.index-home) .contact_frow--captcha,
body.guest-public:not(.index-home) .captcha_row {
  background: transparent !important;
}

/* ── Mobile responsive adjustments ──────────────────────────── */
@media (max-width: 768px) {
  body.guest-public:not(.index-home) .admainbox,
  body.guest-public:not(.index-home) .pub-form-card,
  body.guest-public:not(.index-home) .pub-contact-page,
  body.guest-public:not(.index-home) .pub-faq-page {
    border-radius: 14px !important;
    padding: 20px 16px !important;
  }
}


/* ── Dark theme targeted fixes ──────────────────────────────── */

/* Registration heading bar */
body.guest-public:not(.index-home) .pub-form-card .faq_heading,
body.guest-public:not(.index-home) .admainbox .faq_heading,
body.guest-public:not(.index-home) .faq_heading {
  background: rgba(108,62,244,0.15) !important;
  border-bottom: 1px solid rgba(108,62,244,0.25) !important;
  border-radius: 18px 18px 0 0 !important;
  padding: 20px 24px !important;
  color: #ffffff !important;
}

body.guest-public:not(.index-home) .faq_heading h2,
body.guest-public:not(.index-home) .faq_heading h1,
body.guest-public:not(.index-home) .faq_heading .part_hrading,
body.guest-public:not(.index-home) .faq_heading .about_heading {
  color: #ffffff !important;
}

/* Registration form header row (th/td with light bg) */
body.guest-public:not(.index-home) table.admainbox th,
body.guest-public:not(.index-home) .colortext {
  background: transparent !important;
  color: #B8B4D4 !important;
}

/* Login right-side card (register/login action buttons) */
body.guest-public:not(.index-home) .auth-card,
body.guest-public:not(.index-home) .auth-right-box,
body.guest-public:not(.index-home) .loginbox_right,
body.guest-public:not(.index-home) div[class*="loginbox"],
body.guest-public:not(.index-home) div[class*="login_box"],
body.guest-public:not(.index-home) .login-cta-box,
body.guest-public:not(.index-home) .auth-cta-box,
body.guest-public:not(.index-home) .pub-login-cta-wrap {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(108,62,244,0.25) !important;
  border-radius: 18px !important;
  color: #B8B4D4 !important;
}

/* Any white or near-white background boxes inside guest pages */
body.guest-public:not(.index-home) [style*="background:#fff"],
body.guest-public:not(.index-home) [style*="background: #fff"],
body.guest-public:not(.index-home) [style*="background:white"],
body.guest-public:not(.index-home) [style*="background: white"],
body.guest-public:not(.index-home) [style*="background:#ffffff"],
body.guest-public:not(.index-home) [style*="background: #ffffff"] {
  background: rgba(255,255,255,0.05) !important;
  color: #B8B4D4 !important;
}

/* Inline border-color overrides */
body.guest-public:not(.index-home) [style*="border-color:#"] {
  border-color: rgba(108,62,244,0.3) !important;
}

/* "View Publisher FAQ" / "View Advertiser FAQ" button */
body.guest-public:not(.index-home) a[href*="faq"].btn,
body.guest-public:not(.index-home) a[href*="faq"].button,
body.guest-public:not(.index-home) a[href*="faq"][class*="btn"],
body.guest-public:not(.index-home) .pub-faq-switch,
body.guest-public:not(.index-home) .faq-other-link {
  background: rgba(108,62,244,0.2) !important;
  border: 1px solid rgba(108,62,244,0.4) !important;
  color: #8B5CF6 !important;
  border-radius: 8px !important;
}

/* Auth link buttons (Register Now / Login Now on login page) */
body.guest-public:not(.index-home) a.registerLink,
body.guest-public:not(.index-home) a.loginLink,
body.guest-public:not(.index-home) .auth-btn-register,
body.guest-public:not(.index-home) .auth-btn-login {
  background: linear-gradient(135deg, #6C3EF4, #F43E8A) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
}

/* Any remaining light-background divs in the login/auth sections */
body.guest-public:not(.index-home) .auth-features-wrap,
body.guest-public:not(.index-home) .auth-main-wrap,
body.guest-public:not(.index-home) .auth-wrap,
body.guest-public:not(.index-home) .guest-login-wrap,
body.guest-public:not(.index-home) .login-wrap {
  background: transparent !important;
}

/* Captcha image row dark */
body.guest-public:not(.index-home) .contactvarif,
body.guest-public:not(.index-home) .contact_2colm {
  background: transparent !important;
}

/* Ensure mandatory * is red/visible */
body.guest-public:not(.index-home) .mandatory,
body.guest-public:not(.index-home) span.mandatory {
  color: #F43E8A !important;
}

/* Error messages */
body.guest-public:not(.index-home) .errorbox,
body.guest-public:not(.index-home) .errormessage,
body.guest-public:not(.index-home) .error {
  background: rgba(244,62,138,0.1) !important;
  border: 1px solid rgba(244,62,138,0.3) !important;
  color: #FB7BB6 !important;
  border-radius: 8px !important;
}

/* Success messages */
body.guest-public:not(.index-home) .successbox,
body.guest-public:not(.index-home) .successmessage {
  background: rgba(16,217,138,0.1) !important;
  border: 1px solid rgba(16,217,138,0.3) !important;
  color: #10D98A !important;
  border-radius: 8px !important;
}


/* ── Override blue-tinted header row for dark theme ─────────── */
body.guest-public:not(.index-home) .mainContentDiv table.admainbox.pub-form-card > tbody > tr:first-child > td {
  background: rgba(108,62,244,0.15) !important;
  border-bottom: 1px solid rgba(108,62,244,0.25) !important;
}

body.guest-public:not(.index-home) .mainContentDiv table.admainbox.pub-form-card h4.about_heading,
body.guest-public:not(.index-home) .mainContentDiv table.admainbox.pub-form-card .about_heading,
body.guest-public:not(.index-home) .mainContentDiv .admainbox h4.about_heading,
body.guest-public:not(.index-home) .mainContentDiv .admainbox .about_heading {
  color: #ffffff !important;
}

body.guest-public:not(.index-home) .mainContentDiv table.admainbox.pub-form-card .headingbar {
  color: #B8B4D4 !important;
}

/* ── FAQ heading bar dark override ───────────────────────────── */
body.guest-public:not(.index-home) .mainContentDiv .pub-faq-page .faq_heading {
  background: rgba(108,62,244,0.15) !important;
  border-bottom: 1px solid rgba(108,62,244,0.25) !important;
}

body.guest-public:not(.index-home) .mainContentDiv .pub-faq-page .faq_heading .about_heading {
  color: #ffffff !important;
}

/* ── Contact heading override ────────────────────────────────── */
body.guest-public:not(.index-home) .mainContentDiv .pub-contact-page > .contact_heding {
  background: rgba(108,62,244,0.15) !important;
  border-bottom: 1px solid rgba(108,62,244,0.25) !important;
  border-radius: 18px 18px 0 0 !important;
}

body.guest-public:not(.index-home) .mainContentDiv .pub-contact-page .contact_heding .headingbar {
  background: transparent !important;
  border: none !important;
  color: #B8B4D4 !important;
}

/* ── mainwraper width fix — content only, NOT the header's mainwraper ── */
/* The header_wraper also contains a .mainwraper; overflow:hidden there
   clips the dropdown dd (CSS spec: overflow-x:hidden implies overflow-y:auto,
   creating a scroll container that clips absolutely-positioned children). */
body.guest-public:not(.index-home) .mainContentDiv .mainwraper,
body.guest-public:not(.index-home) .mainContentDiv > .mainwraper {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* Explicitly keep the header's mainwraper overflow visible so dropdowns work (all pages) */
.header_wraper .mainwraper,
.header_wraperindex .mainwraper,
body.guest-public:not(.index-home) .header_wraper .mainwraper,
body.guest-public:not(.index-home) .header_wraperindex .mainwraper,
body.accountPage .header_wraper .mainwraper,
body.accountPage .header_wraperindex .mainwraper,
body:has(.header_wraperindex) .header_wraper .mainwraper,
body:has(.header_wraperindex) .header_wraperindex .mainwraper {
  overflow: visible !important;
  width: 100% !important;
  max-width: 100% !important;
}


/* ── Login page: dark overrides for right-side action card ──── */
body.guest-public:not(.index-home) .auth-login-card,
body.guest-public:not(.index-home) .auth-login-card--alt,
body.guest-public:not(.index-home) .register_loginbox,
body.guest-public:not(.index-home) .loginbox {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(108,62,244,0.2) !important;
  border-radius: 16px !important;
  color: #B8B4D4 !important;
}

body.guest-public:not(.index-home) .auth-login-card-head,
body.guest-public:not(.index-home) .loginbar {
  color: #ffffff !important;
  background: transparent !important;
  border-color: rgba(108,62,244,0.2) !important;
}

/* Register/Login buttons: purple→pink gradient */
body.guest-public:not(.index-home) .registerbtn,
body.guest-public:not(.index-home) a.registerbtn,
body.guest-public:not(.index-home) .submitlogin a.submit.button,
body.guest-public:not(.index-home) .mainContentDiv .registerbtn,
body.guest-public:not(.index-home) .mainContentDiv a.registerbtn {
  background: linear-gradient(135deg, #6C3EF4, #F43E8A) !important;
  box-shadow: 0 6px 20px rgba(108,62,244,0.35) !important;
  color: #fff !important;
  border: none !important;
}

body.guest-public:not(.index-home) .registerbtn:hover,
body.guest-public:not(.index-home) a.registerbtn:hover {
  opacity: 0.88 !important;
  box-shadow: 0 10px 28px rgba(108,62,244,0.45) !important;
  background: linear-gradient(135deg, #6C3EF4, #F43E8A) !important;
}

body.guest-public:not(.index-home) .contentre,
body.guest-public:not(.index-home) .contentp {
  color: #B8B4D4 !important;
  background: transparent !important;
}

/* Auth form label and icon */
body.guest-public:not(.index-home) .auth-form-label {
  color: #B8B4D4 !important;
}

body.guest-public:not(.index-home) .auth-form-icon {
  background: rgba(108,62,244,0.15) !important;
  color: #8B5CF6 !important;
  border-color: rgba(108,62,244,0.2) !important;
}

body.guest-public:not(.index-home) .auth-form-control {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 10px !important;
}

body.guest-public:not(.index-home) .auth-form-control:focus-within {
  border-color: #6C3EF4 !important;
  background: rgba(108,62,244,0.1) !important;
}

/* Submit login button on the login form */
body.guest-public:not(.index-home) .auth-form-submit input[type="submit"],
body.guest-public:not(.index-home) .submitlogin input[type="submit"],
body.guest-public:not(.index-home) .submitlogin input.submit {
  background: linear-gradient(135deg, #6C3EF4, #F43E8A) !important;
  color: #fff !important;
  border: none !important;
}

/* Forgot password link */
body.guest-public:not(.index-home) .smalltext a {
  color: #8B5CF6 !important;
}

/* ── Mobile overflow fix: force body/wrapper to not overflow ── */
body.guest-public:not(.index-home) {
  overflow-x: hidden !important;
}

body.guest-public:not(.index-home) .mainContentDiv > .mainwraper {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}


/* ── Mobile responsive: constrain all card/page content ────── */
@media (max-width: 768px) {
  body.guest-public:not(.index-home) .mainContentDiv,
  body.guest-public:not(.index-home) .mainContentDiv .mainwraper {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Keep header mainwraper overflow visible for dropdowns */
  body.guest-public:not(.index-home) .header_wraper .mainwraper,
  body.guest-public:not(.index-home) .header_wraperindex .mainwraper {
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  body.guest-public:not(.index-home) .admainbox,
  body.guest-public:not(.index-home) .pub-form-card,
  body.guest-public:not(.index-home) .pub-contact-page,
  body.guest-public:not(.index-home) .pub-faq-page,
  body.guest-public:not(.index-home) .pub-login-page {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin: 12px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* FAQ headings and items fit viewport */
  body.guest-public:not(.index-home) .faq_heading,
  body.guest-public:not(.index-home) .faq_homeheading,
  body.guest-public:not(.index-home) .content_faq_p {
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Contact/registration form inner table: stack on mobile */
  body.guest-public:not(.index-home) table.admainbox.pub-form-card,
  body.guest-public:not(.index-home) table.admainbox {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    box-sizing: border-box !important;
  }

  body.guest-public:not(.index-home) .contact_ncolmf,
  body.guest-public:not(.index-home) .contact_ncolm,
  body.guest-public:not(.index-home) td.contact_ncolmf,
  body.guest-public:not(.index-home) td.contact_ncolm {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Login page two-column layout: stack on mobile */
  body.guest-public:not(.index-home) .auth-stage-inner.top_section,
  body.guest-public:not(.index-home) .top_section {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.guest-public:not(.index-home) .auth-login-card,
  body.guest-public:not(.index-home) .loginbox,
  body.guest-public:not(.index-home) .auth-login-card--alt,
  body.guest-public:not(.index-home) .register_loginbox {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ── Viewport-unit clamp for mobile on all guest pages ────── */
/* Uses vw so it's immune to any parent-container width issues */
@media (max-width: 768px) {
  body.guest-public:not(.index-home) .mainContentDiv .mainwraper,
  body.guest-public:not(.index-home) .mainContentDiv > .mainwraper {
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Header mainwraper must stay overflow:visible for nav dropdowns */
  body.guest-public:not(.index-home) .header_wraper .mainwraper,
  body.guest-public:not(.index-home) .header_wraperindex .mainwraper {
    overflow: visible !important;
  }

  body.guest-public:not(.index-home) .admainbox,
  body.guest-public:not(.index-home) .pub-faq-page,
  body.guest-public:not(.index-home) .pub-contact-page,
  body.guest-public:not(.index-home) .pub-form-card {
    max-width: calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body.guest-public:not(.index-home) .faq_homeheading,
  body.guest-public:not(.index-home) .content_faq_p,
  body.guest-public:not(.index-home) .faq_heading,
  body.guest-public:not(.index-home) .contact_heding {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  body.guest-public:not(.index-home) .contact_details,
  body.guest-public:not(.index-home) .faq_details,
  body.guest-public:not(.index-home) .faq_ul {
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
}


/* ── HIGH-SPECIFICITY mobile overrides (beats existing 820px/780px rules) ── */
@media (max-width: 768px) {
  /* FAQ card */
  body.guest-public:not(.index-home) .mainContentDiv div.admainbox.pub-faq-page,
  body.guest-public:not(.index-home) .mainContentDiv .admainbox.pub-faq-page {
    max-width: calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Registration & contact form cards */
  body.guest-public:not(.index-home) .mainContentDiv table.admainbox.pub-form-card,
  body.guest-public:not(.index-home) .mainContentDiv table.admainbox:has(tr.contact_frow),
  body.guest-public:not(.index-home) .mainContentDiv > .mainwraper > table.admainbox:has(tr.contact_frow),
  body.guest-public:not(.index-home) .mainContentDiv div.admainbox.pub-contact-page,
  body.guest-public:not(.index-home) .mainContentDiv div.admainbox.colortext,
  body.guest-public:not(.index-home) .mainContentDiv div.admainbox {
    max-width: calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Elements inside FAQ/contact cards */
  body.guest-public:not(.index-home) .mainContentDiv .pub-faq-page .faq_heading,
  body.guest-public:not(.index-home) .mainContentDiv .pub-faq-page .faq_homeheading,
  body.guest-public:not(.index-home) .mainContentDiv .pub-faq-page .content_faq_p,
  body.guest-public:not(.index-home) .mainContentDiv .pub-faq-page .faq_details,
  body.guest-public:not(.index-home) .mainContentDiv .pub-contact-page .contact_heding,
  body.guest-public:not(.index-home) .mainContentDiv .pub-contact-page .contact_details {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Login page wide card */
  body.guest-public:not(.index-home) .mainContentDiv div.admainbox:has(.top_section),
  body.guest-public:not(.index-home) .mainContentDiv table.admainbox:has(.top_section) {
    max-width: calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
}


/* ── Inner content text wrapping on mobile ───────────────── */
@media (max-width: 768px) {
  /* All text inside guest page cards must wrap */
  body.guest-public:not(.index-home) .pub-faq-page *,
  body.guest-public:not(.index-home) .pub-contact-page *,
  body.guest-public:not(.index-home) .pub-form-card *,
  body.guest-public:not(.index-home) .admainbox * {
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Exception: inputs/buttons/images keep their functional widths */
  body.guest-public:not(.index-home) input,
  body.guest-public:not(.index-home) textarea,
  body.guest-public:not(.index-home) select,
  body.guest-public:not(.index-home) button,
  body.guest-public:not(.index-home) img {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Override nowrap on headings from ppc-style.css */
  body.guest-public:not(.index-home) .about_heading,
  body.guest-public:not(.index-home) .part_hrading,
  body.guest-public:not(.index-home) .faq_homeheading,
  body.guest-public:not(.index-home) h1,
  body.guest-public:not(.index-home) h2,
  body.guest-public:not(.index-home) h3,
  body.guest-public:not(.index-home) h4 {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }
}


/* ── Mobile: FAQ heading flex → column, constrain spans ────── */
@media (max-width: 768px) {
  /* FAQ heading: stack vertically on mobile */
  body.guest-public:not(.index-home) .mainContentDiv .pub-faq-page .faq_heading,
  .mainContentDiv .pub-faq-page .faq_heading {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 16px !important;
  }

  /* Heading text: allow wrap and constrain */
  body.guest-public:not(.index-home) .mainContentDiv .pub-faq-page .faq_heading .about_heading,
  .mainContentDiv .pub-faq-page .faq_heading .about_heading {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: clamp(0.95rem, 4vw, 1.2rem) !important;
  }

  /* FAQ item headings: wrap text */
  body.guest-public:not(.index-home) .mainContentDiv .pub-faq-page .faq_homeheading,
  .mainContentDiv .pub-faq-page .faq_homeheading {
    white-space: normal !important;
    word-break: break-word !important;
    font-size: 0.9rem !important;
    padding: 14px 16px !important;
  }

  /* FAQ detail padding */
  body.guest-public:not(.index-home) .mainContentDiv .pub-faq-page .faq_details,
  .mainContentDiv .pub-faq-page .faq_details {
    padding: 8px 12px 20px !important;
  }

  /* Contact page inputs: ensure full width within card */
  body.guest-public:not(.index-home) .pub-contact-page input[type="text"],
  body.guest-public:not(.index-home) .pub-contact-page input[type="email"],
  body.guest-public:not(.index-home) .pub-contact-page textarea.c_txt {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Registration form: stack label + input vertically */
  body.guest-public:not(.index-home) .mainContentDiv table.admainbox tr.contact_frow {
    display: block !important;
  }
  body.guest-public:not(.index-home) .mainContentDiv table.admainbox tr.contact_frow td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  body.guest-public:not(.index-home) .mainContentDiv table.admainbox input[type="text"],
  body.guest-public:not(.index-home) .mainContentDiv table.admainbox input[type="password"],
  body.guest-public:not(.index-home) .mainContentDiv table.admainbox input[type="email"],
  body.guest-public:not(.index-home) .mainContentDiv table.admainbox textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ================================================================
   READABILITY FIXES — dark theme for all light-bg feature sections
   ================================================================ */

/* ── 1. Nav dropdown styling — all public pages ──────────────── */
/* NOTE: DO NOT override position/z-index on .header_wraper —
   public-header.css already sets position:fixed z-index:10050.
   Only style the dropdown dd content. Applied globally so every
   page shares the same dropdown appearance (header is common). */

.menulinks dd {
  background: #1E1838 !important;
  border: 1px solid rgba(108,62,244,0.3) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
  min-width: 220px !important;
  width: max-content !important;
  height: auto !important;
  overflow: visible !important;
  padding: 4px 0 !important;
  line-height: normal !important;
}

.menulinks dd a {
  color: #B8B4D4 !important;
  background: transparent !important;
  display: block !important;
  padding: 10px 18px !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  transition: background 0.15s, color 0.15s !important;
  width: auto !important;
  min-width: 100% !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  box-sizing: border-box;
}

.menulinks dd a:last-child {
  border-bottom: none !important;
}

.menulinks dd a:hover {
  background: rgba(108,62,244,0.2) !important;
  color: #ffffff !important;
}

/* ── 2. Login page: convert all light feature sections to dark ── */

/* Feature highlights section wrapper */
body.guest-public:not(.index-home) .auth-highlights,
body.guest-public:not(.index-home) .fullwidthsection {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 16px !important;
}

/* Feature highlight cards (box_in) */
body.guest-public:not(.index-home) .box_in {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
}

body.guest-public:not(.index-home) .three_box:hover .box_in,
body.guest-public:not(.index-home) .auth-highlight-card:hover .box_in {
  background: rgba(108,62,244,0.15) !important;
  border-color: rgba(108,62,244,0.3) !important;
}

/* Feature card text */
body.guest-public:not(.index-home) .content_box {
  color: #B8B4D4 !important;
}

/* Section title above feature grid */
body.guest-public:not(.index-home) .auth-section-title {
  color: #ffffff !important;
}

body.guest-public:not(.index-home) .auth-section-title::before {
  background: #6C3EF4 !important;
}

/* ── 3. Values section cards (box_in2) ──────────────────────── */
body.guest-public:not(.index-home) .box_in2 {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
}

body.guest-public:not(.index-home) .box_in2 .about_heading {
  color: #ffffff !important;
}

body.guest-public:not(.index-home) .auth-values-grid .three_box:nth-child(1) .box_in2 .about_heading,
body.guest-public:not(.index-home) .fulbox_2 .three_box:nth-child(1) .box_in2 .about_heading {
  color: #8B5CF6 !important;
}

body.guest-public:not(.index-home) .auth-values-grid .three_box:nth-child(2) .box_in2 .about_heading,
body.guest-public:not(.index-home) .fulbox_2 .three_box:nth-child(2) .box_in2 .about_heading {
  color: #38BDF8 !important;
}

body.guest-public:not(.index-home) .auth-values-grid .three_box:nth-child(3) .box_in2 .about_heading,
body.guest-public:not(.index-home) .fulbox_2 .three_box:nth-child(3) .box_in2 .about_heading {
  color: #34D399 !important;
}

body.guest-public:not(.index-home) .box_in2 .contentp,
body.guest-public:not(.index-home) .box_in2 p {
  color: #B8B4D4 !important;
}

/* ── 4. Auth-values section wrapper ─────────────────────────── */
body.guest-public:not(.index-home) .auth-values,
body.guest-public:not(.index-home) .bottom_section {
  background: transparent !important;
}

/* ── 5. Feature bullet list (top part of login pages) ─────────── */
body.guest-public:not(.index-home) .auth-features-list,
body.guest-public:not(.index-home) .auth-feature-item,
body.guest-public:not(.index-home) .auth-left-features {
  background: transparent !important;
}

body.guest-public:not(.index-home) .auth-feature-item strong,
body.guest-public:not(.index-home) .auth-feature-item .auth-feature-title,
body.guest-public:not(.index-home) .auth-left-features strong {
  color: #ffffff !important;
}

body.guest-public:not(.index-home) .auth-feature-item p,
body.guest-public:not(.index-home) .auth-feature-item .auth-feature-desc,
body.guest-public:not(.index-home) .auth-left-features p {
  color: #B8B4D4 !important;
}

/* ── 6. Fix feature bullet text in the login page top section ── */
/* The .part_section bullet items use .about_content and .bo_content */
body.guest-public:not(.index-home) .about_content,
body.guest-public:not(.index-home) .bo_content,
body.guest-public:not(.index-home) .colm_s .bo_content,
body.guest-public:not(.index-home) .inside .bo_content {
  color: #B8B4D4 !important;
  background: transparent !important;
}

body.guest-public:not(.index-home) .bo_heading,
body.guest-public:not(.index-home) .about_heading.bo_heading {
  color: #ffffff !important;
  background: transparent !important;
}

/* ── 7. Login page top feature section (bullet points) ─────── */
/* The bullet list items at top of ppc-user-login.php */
body.guest-public:not(.index-home) .auth-stage-left,
body.guest-public:not(.index-home) .auth-left-col {
  background: transparent !important;
}

/* Inner feature item cards */
body.guest-public:not(.index-home) .auth-feature-card,
body.guest-public:not(.index-home) .logdinboxtr,
body.guest-public:not(.index-home) .part_section {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #B8B4D4 !important;
}

/* Feature item description paragraphs and content text */
body.guest-public:not(.index-home) .auth-stage-inner p,
body.guest-public:not(.index-home) .auth-stage-inner .contentp,
body.guest-public:not(.index-home) .auth-stage-inner .content_box {
  color: #B8B4D4 !important;
}

body.guest-public:not(.index-home) .auth-stage-inner h3,
body.guest-public:not(.index-home) .auth-stage-inner .about_heading,
body.guest-public:not(.index-home) .auth-stage-inner strong {
  color: #ffffff !important;
}

/* ── 8. Any remaining light backgrounds on guest pages ──────── */
body.guest-public:not(.index-home) .colm_s,
body.guest-public:not(.index-home) .inside.colm_s {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.06) !important;
  color: #B8B4D4 !important;
}

body.guest-public:not(.index-home) .colm_s .bo_heading,
body.guest-public:not(.index-home) .colm_s .about_heading {
  color: #fff !important;
}

/* ── 9. Registration: "All fields marked * are compulsory" text ─ */
body.guest-public:not(.index-home) .inserted,
body.guest-public:not(.index-home) span.inserted {
  color: #B8B4D4 !important;
  background: transparent !important;
}

/* ── 10. Remove backdrop-filter from main card to prevent stacking
        context that buries the nav dropdown ─────────────────── */
body.guest-public:not(.index-home) .mainContentDiv .admainbox,
body.guest-public:not(.index-home) .mainContentDiv div.admainbox,
body.guest-public:not(.index-home) .mainContentDiv table.admainbox {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* ── Story cards / feature bullet items (login pages) ────────── */
body.guest-public:not(.index-home) .auth-story-card {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35) !important;
  backdrop-filter: none !important;
}

body.guest-public:not(.index-home) .auth-story-card .homeheading,
body.guest-public:not(.index-home) .auth-story-card h3 {
  color: #ffffff !important;
}

body.guest-public:not(.index-home) .auth-story-card .homeheading::before {
  background: #6C3EF4 !important;
}

body.guest-public:not(.index-home) .auth-story-card .contentp,
body.guest-public:not(.index-home) .auth-story-card p {
  color: #C4C0DC !important;
}

/* Auth page title */
body.guest-public:not(.index-home) .auth-page-title,
body.guest-public:not(.index-home) h1.auth-page-title {
  color: #ffffff !important;
}

/* Auth role badge */
body.guest-public:not(.index-home) .auth-role-badge {
  color: #8B5CF6 !important;
  background: rgba(108,62,244,0.15) !important;
  border: 1px solid rgba(108,62,244,0.3) !important;
}

/* ── Values section box_in2 heading accent colours ───────────── */
/* Override dark slate-xxx colors with visible ones */
body.guest-public:not(.index-home) .box_in2 .about_heading,
body.guest-public:not(.index-home) .box_in2 h4.about_heading {
  color: #ffffff !important;
}

/* ── Section section title text (ADVERTISING YOUR PRODUCTS...) ─ */
body.guest-public:not(.index-home) .auth-section-title,
body.guest-public:not(.index-home) .part_hrading,
body.guest-public:not(.index-home) .sectiontitle {
  color: #ffffff !important;
}

/* ── contentp fallback across all guest public pages ──────────── */
body.guest-public:not(.index-home) .contentp {
  color: #C4C0DC !important;
}

/* ── homeheading fallback ──────────────────────────────────────── */
body.guest-public:not(.index-home) .homeheading {
  color: #ffffff !important;
}


/* ================================================================
   PUB-REGISTRATION: Terms text + Captcha fixes
   ================================================================ */

/* ── 1. Terms and condition row text + link ────────────────────── */
body.guest-public:not(.index-home) .pub-form-card .contact_frow--full td,
body.guest-public:not(.index-home) .pub-form-card td.contact_ncolmf-full {
  color: #B8B4D4 !important;
}

/* Terms & Conditions link inside form (the invisible link) */
body.guest-public:not(.index-home) .pub-form-card a,
body.guest-public:not(.index-home) .pub-form-card .contact_frow--full a,
body.guest-public:not(.index-home) .pub-form-card td a {
  color: #8B5CF6 !important;
  text-decoration: underline !important;
}

body.guest-public:not(.index-home) .pub-form-card a:hover,
body.guest-public:not(.index-home) .pub-form-card .contact_frow--full a:hover {
  color: #A78BFA !important;
}

/* Same fix for advertiser registration (ppc-user-registration) */
body.guest-public:not(.index-home) table.admainbox.pub-form-card a,
body.guest-public:not(.index-home) table.admainbox.pub-form-card td a {
  color: #8B5CF6 !important;
  text-decoration: underline !important;
}

/* ── 2. Captcha iframe: style it to match dark theme ──────────── */
/* Wrap the iframe in a styled pill to contain the white bg */
body.guest-public:not(.index-home) #cap_img {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 2px solid rgba(108,62,244,0.4) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
  vertical-align: middle !important;
  background: #fff !important;
  margin-right: 8px !important;
  height: 39px !important;
  max-height: 39px !important;
  width: 194px !important;
  max-width: 194px !important;
  flex-shrink: 0 !important;
}

body.guest-public:not(.index-home) #cap_img iframe {
  display: block !important;
  border: none !important;
  border-radius: 0 !important;
  vertical-align: middle !important;
  margin: 0 !important;
  width: 190px !important;
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  flex-shrink: 0 !important;
}

/* Refresh icon button alignment */
body.guest-public:not(.index-home) .contact_ncolmmnthlycode a[onclick*="showimage"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: rgba(108,62,244,0.2) !important;
  border: 1px solid rgba(108,62,244,0.4) !important;
  vertical-align: middle !important;
  margin-left: 6px !important;
  transition: background 0.2s !important;
}

body.guest-public:not(.index-home) .contact_ncolmmnthlycode a[onclick*="showimage"]:hover {
  background: rgba(108,62,244,0.4) !important;
}

body.guest-public:not(.index-home) .contact_ncolmmnthlycode a[onclick*="showimage"] img {
  max-width: 20px !important;
  max-height: 20px !important;
  opacity: 0.85 !important;
  filter: brightness(2) !important;
}

/* Captcha cell layout: input field + captcha image + refresh stacked cleanly */
body.guest-public:not(.index-home) .contact_ncolmmnthlycode {
  vertical-align: middle !important;
}

body.guest-public:not(.index-home) .contact_ncolmmnthlycode > * {
  vertical-align: middle !important;
}

/* Mobile: keep captcha row from expanding vertically */
@media (max-width: 900px) {
  body.guest-public:not(.index-home) #cap_img {
    height: 39px !important;
    max-height: 39px !important;
    overflow: hidden !important;
  }

  body.guest-public:not(.index-home) #cap_img iframe {
    height: 35px !important;
    max-height: 35px !important;
    min-height: 35px !important;
    width: 190px !important;
  }

  body.guest-public:not(.index-home) .contact_ncolmmnthlycode {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
  }
}


/* ================================================================
   REGISTRATION: Remove section separator + fix Register button
   ================================================================ */

/* ── Hide "Personal Information" divider line and label ──────── */
body.guest-public:not(.index-home) .mainContentDiv table.admainbox.pub-form-card .colortext tr.reg-section-start > td {
  border-top: none !important;
  padding-top: 8px !important;
}

body.guest-public:not(.index-home) .mainContentDiv table.admainbox.pub-form-card .colortext tr.reg-section-start > td:first-child::before {
  display: none !important;
  content: none !important;
}

/* ── Register button: fix specificity so purple→pink wins ─────── */
/* Original blue rule has (0,4,1) specificity; this uses (0,5,1) */
body.guest-public:not(.index-home) .mainContentDiv table.admainbox.pub-form-card .colortext input[type="submit"],
body.guest-public:not(.index-home) .mainContentDiv table.admainbox.pub-form-card .colortext input[type="button"],
body.guest-public:not(.index-home) .mainContentDiv table.admainbox.pub-form-card input[type="submit"] {
  background: linear-gradient(135deg, #6C3EF4 0%, #F43E8A 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 36px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 6px 20px rgba(108,62,244,0.35) !important;
  cursor: pointer !important;
  transition: opacity 0.2s !important;
}

body.guest-public:not(.index-home) .mainContentDiv table.admainbox.pub-form-card .colortext input[type="submit"]:hover,
body.guest-public:not(.index-home) .mainContentDiv table.admainbox.pub-form-card input[type="submit"]:hover {
  opacity: 0.88 !important;
}

/* Same fix for publisher registration */
body.guest-public:not(.index-home) .mainContentDiv table.admainbox.pub-form-card .colortext input[name="Submit"] {
  background: linear-gradient(135deg, #6C3EF4 0%, #F43E8A 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 36px !important;
  font-weight: 600 !important;
  box-shadow: 0 6px 20px rgba(108,62,244,0.35) !important;
}

/* ── Guest table forms (registration, forgot password, etc.) — match login field look ── */
/* Scoped: guest-public only, not login (auth-form) and not logged-in account pages */
body.guest-public:not(.index-home):not(.guest-login-page):not(.accountPage) .mainContentDiv table.admainbox.pub-form-card input[type="text"],
body.guest-public:not(.index-home):not(.guest-login-page):not(.accountPage) .mainContentDiv table.admainbox.pub-form-card input[type="password"],
body.guest-public:not(.index-home):not(.guest-login-page):not(.accountPage) .mainContentDiv table.admainbox.pub-form-card input[type="email"],
body.guest-public:not(.index-home):not(.guest-login-page):not(.accountPage) .mainContentDiv table.admainbox.pub-form-card input[type="tel"],
body.guest-public:not(.index-home):not(.guest-login-page):not(.accountPage) .mainContentDiv table.admainbox.pub-form-card input[type="number"],
body.guest-public:not(.index-home):not(.guest-login-page):not(.accountPage) .mainContentDiv table.admainbox.pub-form-card select,
body.guest-public:not(.index-home):not(.guest-login-page):not(.accountPage) .mainContentDiv table.admainbox.pub-form-card textarea,
body.guest-public:not(.index-home):not(.guest-login-page):not(.accountPage) .mainContentDiv table.admainbox.pub-form-card .contact_ncolm .txt,
body.guest-public:not(.index-home):not(.guest-login-page):not(.accountPage) .mainContentDiv table.admainbox.pub-form-card .contact_ncolm input.txt {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 46px !important;
  padding: 10px 14px !important;
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 10px !important;
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
  caret-color: #ffffff !important;
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
  -webkit-appearance: none;
  appearance: none;
}

body.guest-public:not(.index-home):not(.guest-login-page):not(.accountPage) .mainContentDiv table.admainbox.pub-form-card input[type="text"]:focus,
body.guest-public:not(.index-home):not(.guest-login-page):not(.accountPage) .mainContentDiv table.admainbox.pub-form-card input[type="password"]:focus,
body.guest-public:not(.index-home):not(.guest-login-page):not(.accountPage) .mainContentDiv table.admainbox.pub-form-card input[type="email"]:focus,
body.guest-public:not(.index-home):not(.guest-login-page):not(.accountPage) .mainContentDiv table.admainbox.pub-form-card input[type="tel"]:focus,
body.guest-public:not(.index-home):not(.guest-login-page):not(.accountPage) .mainContentDiv table.admainbox.pub-form-card select:focus,
body.guest-public:not(.index-home):not(.guest-login-page):not(.accountPage) .mainContentDiv table.admainbox.pub-form-card textarea:focus,
body.guest-public:not(.index-home):not(.guest-login-page):not(.accountPage) .mainContentDiv table.admainbox.pub-form-card .contact_ncolm .txt:focus {
  background: rgba(108, 62, 244, 0.14) !important;
  border-color: #6C3EF4 !important;
  box-shadow: 0 0 0 3px rgba(108, 62, 244, 0.22) !important;
  outline: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.guest-public:not(.index-home):not(.guest-login-page):not(.accountPage) .mainContentDiv table.admainbox.pub-form-card input::placeholder,
body.guest-public:not(.index-home):not(.guest-login-page):not(.accountPage) .mainContentDiv table.admainbox.pub-form-card textarea::placeholder {
  color: rgba(255, 255, 255, 0.38) !important;
  opacity: 1 !important;
}

body.guest-public:not(.index-home):not(.guest-login-page):not(.accountPage) .mainContentDiv table.admainbox.pub-form-card input:-webkit-autofill,
body.guest-public:not(.index-home):not(.guest-login-page):not(.accountPage) .mainContentDiv table.admainbox.pub-form-card input:-webkit-autofill:hover,
body.guest-public:not(.index-home):not(.guest-login-page):not(.accountPage) .mainContentDiv table.admainbox.pub-form-card input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #2a2548 inset !important;
  -webkit-text-fill-color: #f1f5f9 !important;
  caret-color: #ffffff !important;
  border: 1px solid rgba(108, 62, 244, 0.45) !important;
}

body.guest-public:not(.index-home):not(.guest-login-page):not(.accountPage) .mainContentDiv table.admainbox.pub-form-card td.contact_ncolmf {
  color: #B8B4D4 !important;
  font-weight: 600 !important;
  background: transparent !important;
}

/* ── Forgot password (advertiser / publisher / common) — flat table layout only ── */
/* Excludes registration (nested inner table) and change-password (4+ field rows) */
@media (min-width: 768px) {
	body.guest-public:not(.index-home):not(.guest-login-page):not(.accountPage) .mainContentDiv table.admainbox.pub-form-card:not(:has(> tbody > tr > td table tr.contact_frow)):not(:has(> tbody > tr.contact_frow ~ tr.contact_frow ~ tr.contact_frow ~ tr.contact_frow)) {
		display: block !important;
		width: 100% !important;
		max-width: 620px !important;
	}

	body.guest-public:not(.index-home):not(.guest-login-page):not(.accountPage) .mainContentDiv table.admainbox.pub-form-card:not(:has(> tbody > tr > td table tr.contact_frow)):not(:has(> tbody > tr.contact_frow ~ tr.contact_frow ~ tr.contact_frow ~ tr.contact_frow)) > tbody {
		display: grid !important;
		grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
		column-gap: 16px;
		align-items: center;
		width: 100%;
	}

	body.guest-public:not(.index-home):not(.guest-login-page):not(.accountPage) .mainContentDiv table.admainbox.pub-form-card:not(:has(> tbody > tr > td table tr.contact_frow)):not(:has(> tbody > tr.contact_frow ~ tr.contact_frow ~ tr.contact_frow ~ tr.contact_frow)) > tbody > tr {
		display: contents !important;
	}

	body.guest-public:not(.index-home):not(.guest-login-page):not(.accountPage) .mainContentDiv table.admainbox.pub-form-card:not(:has(> tbody > tr > td table tr.contact_frow)):not(:has(> tbody > tr.contact_frow ~ tr.contact_frow ~ tr.contact_frow ~ tr.contact_frow)) > tbody > tr > td[colspan="2"]:not(.contact_ncolm) {
		grid-column: 1 / -1;
		display: block !important;
		width: 100% !important;
		float: none !important;
		padding: 0 0 10px !important;
		box-sizing: border-box;
	}

	body.guest-public:not(.index-home):not(.guest-login-page):not(.accountPage) .mainContentDiv table.admainbox.pub-form-card:not(:has(> tbody > tr > td table tr.contact_frow)):not(:has(> tbody > tr.contact_frow ~ tr.contact_frow ~ tr.contact_frow ~ tr.contact_frow)) > tbody > tr.contact_frow > td.contact_ncolmf {
		grid-column: 1;
		display: block !important;
		width: auto !important;
		max-width: none !important;
		float: none !important;
		padding: 10px 0 !important;
		text-align: right;
		box-sizing: border-box;
	}

	body.guest-public:not(.index-home):not(.guest-login-page):not(.accountPage) .mainContentDiv table.admainbox.pub-form-card:not(:has(> tbody > tr > td table tr.contact_frow)):not(:has(> tbody > tr.contact_frow ~ tr.contact_frow ~ tr.contact_frow ~ tr.contact_frow)) > tbody > tr.contact_frow > td.contact_ncolm:not([colspan]) {
		grid-column: 2;
		display: block !important;
		width: auto !important;
		max-width: none !important;
		float: none !important;
		padding: 10px 0 !important;
		box-sizing: border-box;
	}

	body.guest-public:not(.index-home):not(.guest-login-page):not(.accountPage) .mainContentDiv table.admainbox.pub-form-card:not(:has(> tbody > tr > td table tr.contact_frow)):not(:has(> tbody > tr.contact_frow ~ tr.contact_frow ~ tr.contact_frow ~ tr.contact_frow)) > tbody > tr.contact_frow > td[colspan="2"].contact_ncolm {
		grid-column: 2;
		display: block !important;
		width: auto !important;
		float: none !important;
		padding: 12px 0 6px !important;
		box-sizing: border-box;
	}

	body.guest-public:not(.index-home):not(.guest-login-page):not(.accountPage) .mainContentDiv table.admainbox.pub-form-card:not(:has(> tbody > tr > td table tr.contact_frow)):not(:has(> tbody > tr.contact_frow ~ tr.contact_frow ~ tr.contact_frow ~ tr.contact_frow)) .contact_ncolm input[type="submit"] {
		float: none !important;
		margin: 0;
	}
}


/* ================================================================
   CONTACT US + FAQ: Full dark-theme consistency fix
   ================================================================ */

/* ── Textarea ────────────────────────────────────────────────── */
body.guest-public:not(.index-home) .mainContentDiv .pub-contact-page .contact_details textarea.c_txt,
body.guest-public:not(.index-home) .pub-contact-page textarea.c_txt,
body.guest-public:not(.index-home) textarea.c_txt {
  background: rgba(255,255,255,0.06) !important;
  color: #C4C0DC !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 10px !important;
  caret-color: #fff !important;
}

body.guest-public:not(.index-home) .mainContentDiv .pub-contact-page .contact_details textarea.c_txt:focus,
body.guest-public:not(.index-home) textarea.c_txt:focus {
  background: rgba(255,255,255,0.09) !important;
  border-color: rgba(108,62,244,0.6) !important;
  box-shadow: 0 0 0 3px rgba(108,62,244,0.2) !important;
  outline: none !important;
}

/* ── Captcha wrapper box (the light gray pill) ───────────────── */
body.guest-public:not(.index-home) .mainContentDiv .pub-contact-page .contact_details .contact_frow--captcha,
body.guest-public:not(.index-home) .pub-contact-page .contact_frow--captcha {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(108,62,244,0.3) !important;
  border-radius: 12px !important;
}

/* ── Captcha label text ("Enter the text shown in the image") ── */
body.guest-public:not(.index-home) .pub-contact-page .contact-captcha-label,
body.guest-public:not(.index-home) .pub-contact-page label.contact-captcha-label,
body.guest-public:not(.index-home) .pub-contact-page .contact_details .contact-captcha-label {
  color: #C4C0DC !important;
}

/* ── Contact captcha input (inside the captcha box) ─────────── */
body.guest-public:not(.index-home) .mainContentDiv .pub-contact-page .contact_details .contact_frow--captcha .contactvarif input[type="text"],
body.guest-public:not(.index-home) .pub-contact-page .contactvarif input[type="text"] {
  background: rgba(255,255,255,0.07) !important;
  color: #C4C0DC !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 8px !important;
}

body.guest-public:not(.index-home) .pub-contact-page .contactvarif input[type="text"]::placeholder {
  color: rgba(184,180,212,0.5) !important;
}

/* ── All regular input fields in contact page ────────────────── */
body.guest-public:not(.index-home) .mainContentDiv .pub-contact-page .contact_details input[type="text"],
body.guest-public:not(.index-home) .mainContentDiv .pub-contact-page .contact_details input[type="email"],
body.guest-public:not(.index-home) .pub-contact-page input[type="text"],
body.guest-public:not(.index-home) .pub-contact-page input[type="email"] {
  background: rgba(255,255,255,0.06) !important;
  color: #C4C0DC !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 8px !important;
}

body.guest-public:not(.index-home) .mainContentDiv .pub-contact-page .contact_details input[type="text"]:focus,
body.guest-public:not(.index-home) .mainContentDiv .pub-contact-page .contact_details input[type="email"]:focus {
  background: rgba(255,255,255,0.09) !important;
  border-color: rgba(108,62,244,0.6) !important;
  box-shadow: 0 0 0 3px rgba(108,62,244,0.2) !important;
  outline: none !important;
}

body.guest-public:not(.index-home) .pub-contact-page input::placeholder,
body.guest-public:not(.index-home) .pub-contact-page textarea::placeholder {
  color: rgba(184,180,212,0.5) !important;
}

/* ── Contact field labels ─────────────────────────────────────── */
body.guest-public:not(.index-home) .pub-contact-page .contact-field-label,
body.guest-public:not(.index-home) .mainContentDiv .pub-contact-page .contact-field-label {
  color: #C4C0DC !important;
}

/* ── Contact page Submit button: purple→pink (override blue) ─── */
body.guest-public:not(.index-home) .mainContentDiv .pub-contact-page .contact_details input[type="submit"],
body.guest-public:not(.index-home) .mainContentDiv .pub-contact-page .contact_details input[name="submit_contact"],
body.guest-public:not(.index-home) .pub-contact-page input[type="submit"] {
  background: linear-gradient(135deg, #6C3EF4 0%, #F43E8A 100%) !important;
  box-shadow: 0 6px 20px rgba(108,62,244,0.35) !important;
}

/* ── FAQ page: ensure all inner text is visible ──────────────── */
body.guest-public:not(.index-home) .pub-faq-page .faq_heading,
body.guest-public:not(.index-home) .pub-faq-page .faq_heading .about_heading {
  color: #ffffff !important;
  background: transparent !important;
}

body.guest-public:not(.index-home) .pub-faq-page .faq_content,
body.guest-public:not(.index-home) .pub-faq-page .faq_text,
body.guest-public:not(.index-home) .pub-faq-page p {
  color: #C4C0DC !important;
}

/* FAQ "View Publisher/Advertiser FAQ" button */
body.guest-public:not(.index-home) .pub-faq-page a.btn,
body.guest-public:not(.index-home) .pub-faq-page .viewfaqbtn,
body.guest-public:not(.index-home) .pub-faq-page a[href*="faq"] {
  border: 1px solid rgba(108,62,244,0.5) !important;
  color: #C4C0DC !important;
  border-radius: 8px !important;
}

body.guest-public:not(.index-home) .pub-faq-page a[href*="faq"]:hover {
  background: rgba(108,62,244,0.2) !important;
  color: #ffffff !important;
}


/* ================================================================
   BORDER CONSISTENCY: Make FAQ and Contact Us match Registration
   ================================================================ */

/* ── Contact Us: outer card border ──────────────────────────── */
body.guest-public:not(.index-home) .mainContentDiv div.admainbox.pub-contact-page,
body.guest-public:not(.index-home) body.guest-public .mainContentDiv div.admainbox.pub-contact-page {
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5) !important;
}

/* ── Contact Us: input field borders ────────────────────────── */
body.guest-public:not(.index-home) .mainContentDiv .pub-contact-page .contact_details input[type="text"],
body.guest-public:not(.index-home) .mainContentDiv .pub-contact-page .contact_details input[type="email"] {
  border: 1px solid rgba(255,255,255,0.12) !important;
}

body.guest-public:not(.index-home) .mainContentDiv .pub-contact-page .contact_details textarea.c_txt {
  border: 1px solid rgba(255,255,255,0.12) !important;
}

/* ── FAQ: row divider borders ────────────────────────────────── */
body.guest-public:not(.index-home) .mainContentDiv .pub-faq-page .faq_li,
body.guest-public:not(.index-home) .pub-faq-page .faq_li {
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

body.guest-public:not(.index-home) .mainContentDiv .pub-faq-page .faq_li:last-child,
body.guest-public:not(.index-home) .pub-faq-page .faq_li:last-child {
  border-bottom: none !important;
}

/* ── FAQ: heading text (was dark #1e293b on dark bg) ─────────── */
body.guest-public:not(.index-home) .mainContentDiv .pub-faq-page .faq_homeheading,
body.guest-public:not(.index-home) .pub-faq-page .faq_homeheading {
  color: #C4C0DC !important;
}

body.guest-public:not(.index-home) .mainContentDiv .pub-faq-page .faq_li:hover .faq_homeheading,
body.guest-public:not(.index-home) .pub-faq-page .faq_li .faq_homeheading:hover {
  color: #ffffff !important;
}

/* ── FAQ: outer card border consistency ─────────────────────── */
body.guest-public:not(.index-home) .mainContentDiv div.admainbox.pub-faq-page {
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5) !important;
}

/* ── Registration card: confirm matching border ──────────────── */
body.guest-public:not(.index-home) .mainContentDiv table.admainbox.pub-form-card {
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5) !important;
}


/* ── Contact Us: remove bright blue accent bar, use subtle purple ── */
body.guest-public:not(.index-home) .mainContentDiv div.admainbox.pub-contact-page > .contact_heding::before {
  background: linear-gradient(90deg, rgba(108,62,244,0.7) 0%, rgba(244,62,138,0.4) 60%, transparent 100%) !important;
}

/* ── Contact Us: page title was dark #0f172a on dark bg ──────── */
body.guest-public:not(.index-home) .mainContentDiv .pub-contact-page .contact_heding .about_heading,
body.guest-public:not(.index-home) .pub-contact-page .contact_heding .about_heading {
  color: #ffffff !important;
}

/* ── Contact Us: headingbar subtitle text ────────────────────── */
body.guest-public:not(.index-home) .mainContentDiv .pub-contact-page .contact_heding .headingbar,
body.guest-public:not(.index-home) .pub-contact-page .contact_heding .headingbar {
  color: #C4C0DC !important;
  background: transparent !important;
  border: none !important;
}


/* ================================================================
   MOBILE OVERFLOW FIX — card right border cut on all guest pages
   ================================================================
   Root cause: .mainwraper has inline style="width:1250px" and
   its ancestor .about_wraper has no width cap, so 100% = 1250px.
   Fix: use 100vw (absolute viewport units) + overflow-x hidden
   from html/body all the way down.
   ================================================================ */

@media (max-width: 900px) {

  /* Lock the full scroll chain */
  html,
  body.guest-public:not(.index-home) {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  body.guest-public:not(.index-home) .about_wraper {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Force content mainwraper to viewport width — NOT the header's mainwraper */
  body.guest-public:not(.index-home) .mainContentDiv .mainwraper,
  body.guest-public:not(.index-home) .mainContentDiv > .mainwraper {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Keep header mainwraper overflow visible so nav dropdowns show */
  body.guest-public:not(.index-home) .header_wraper .mainwraper,
  body.guest-public:not(.index-home) .header_wraperindex .mainwraper {
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.guest-public:not(.index-home) .mainContentDiv {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* All page cards fit within viewport with margin on both sides */
  body.guest-public:not(.index-home) div.admainbox.pub-contact-page,
  body.guest-public:not(.index-home) div.admainbox.pub-faq-page,
  body.guest-public:not(.index-home) table.admainbox.pub-form-card,
  body.guest-public:not(.index-home) div.admainbox {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* All inputs/textareas/selects inside cards fit the card */
  body.guest-public:not(.index-home) .admainbox input,
  body.guest-public:not(.index-home) .admainbox textarea,
  body.guest-public:not(.index-home) .admainbox select,
  body.guest-public:not(.index-home) .admainbox .contact_3colm,
  body.guest-public:not(.index-home) .admainbox .contact_frow {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* FAQ items: prevent text overflow */
  body.guest-public:not(.index-home) .pub-faq-page .faq_li,
  body.guest-public:not(.index-home) .pub-faq-page .faq_homeheading,
  body.guest-public:not(.index-home) .pub-faq-page .faq_content {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

}


/* ================================================================
   HIGH-SPECIFICITY MOBILE WIDTH FIX — beats all earlier card rules
   ================================================================ */

@media (max-width: 900px) {

  /* Contact page card: (0,4,1) specificity beats early (0,3,1) rule */
  body.guest-public:not(.index-home) .mainContentDiv div.admainbox.pub-contact-page {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* FAQ page card */
  body.guest-public:not(.index-home) .mainContentDiv div.admainbox.pub-faq-page {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Registration / publisher reg card (table-based) */
  body.guest-public:not(.index-home) .mainContentDiv table.admainbox.pub-form-card {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Login page card */
  body.guest-public:not(.index-home) .mainContentDiv div.admainbox.pub-login-page {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* All children of cards must fit the card width */
  body.guest-public:not(.index-home) .mainContentDiv .admainbox *,
  body.guest-public:not(.index-home) .mainContentDiv .admainbox {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Contact 3-col layout → stack vertically */
  body.guest-public:not(.index-home) .mainContentDiv .pub-contact-page .contact_frow {
    display: block !important;
  }
  body.guest-public:not(.index-home) .mainContentDiv .pub-contact-page .contact_3colm,
  body.guest-public:not(.index-home) .mainContentDiv .pub-contact-page .contact_1colm,
  body.guest-public:not(.index-home) .mainContentDiv .pub-contact-page .contact_2colm {
    width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
}