/**
 * Premium Portal Styles - Theme-Isolated & Cross-Site Compatible
 *
 * KEY PRINCIPLES:
 * 1. Google Fonts loaded via @import (no PHP dependency).
 * 2. CSS variables scoped to the portal root (not :root, so they won't pollute the theme).
 * 3. Hard CSS reset on every element inside #wpicp-portal-v2 to prevent theme bleed.
 * 4. All layout-critical properties use !important to survive aggressive theme CSS.
 */

/* ── 1. FONT LOADING ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── 2. CSS VARIABLES — Scoped to portal root, NOT :root ─────────── */
#wpicp-portal-v2 {
	--wpicp-primary:       #4f46e5;
	--wpicp-primary-hover: #4338ca;
	--wpicp-bg:            #f9f8f6;
	--wpicp-surf:          #ffffff;
	--wpicp-border:        #f3f4f6;
	--wpicp-text:          #111827;
	--wpicp-text-muted:    #6b7280;
	--wpicp-radius:        8px;
}

/* ── 3. FULL CSS RESET — Prevents every theme from bleeding in ────── */
#wpicp-portal-v2,
#wpicp-portal-v2 *,
#wpicp-portal-v2 *::before,
#wpicp-portal-v2 *::after {
	box-sizing: border-box !important;
}

#wpicp-portal-v2 {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: var(--wpicp-text) !important;
	background: var(--wpicp-bg) !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
}

/* Reset headings that themes often override */
#wpicp-portal-v2 h1,
#wpicp-portal-v2 h2,
#wpicp-portal-v2 h3,
#wpicp-portal-v2 h4,
#wpicp-portal-v2 h5,
#wpicp-portal-v2 h6 {
	font-family: 'Inter', -apple-system, sans-serif !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	margin: 0 !important;
	padding: 0 !important;
	color: inherit !important;
	border: none !important;
	background: none !important;
}

/* Reset paragraphs */
#wpicp-portal-v2 p {
	margin: 0 !important;
	padding: 0 !important;
	font-family: 'Inter', -apple-system, sans-serif !important;
}

/* Reset links */
#wpicp-portal-v2 a {
	font-family: 'Inter', -apple-system, sans-serif !important;
}

/* Reset tables — themes often add borders/spacing */
#wpicp-portal-v2 table {
	border-collapse: collapse !important;
	border-spacing: 0 !important;
	border: none !important;
	background: none !important;
	width: 100% !important;
}

#wpicp-portal-v2 th,
#wpicp-portal-v2 td {
	border: none !important;
	background: none !important;
	font-family: 'Inter', -apple-system, sans-serif !important;
	font-size: inherit !important;
}

/* Reset form elements */
#wpicp-portal-v2 input,
#wpicp-portal-v2 select,
#wpicp-portal-v2 textarea {
	font-family: 'Inter', -apple-system, sans-serif !important;
}

/* ── 4. TOPBAR — sticky nav must fight theme z-index stacking ─────── */
#wpicp-portal-v2 .wpicp-portal-topbar {
	position: sticky !important;
	top: 0 !important;
	z-index: 999 !important;
	height: 64px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 0 32px !important;
	background: #ffffff !important;
	border-bottom: 1px solid #e5e7eb !important;
	box-shadow: none !important;
}

/* Hide welcome text on mobile */
@media (max-width: 640px) {
	#wpicp-portal-v2 .wpicp-hide-mobile { display: none !important; }
}

/* ── 5. BUTTONS ───────────────────────────────────────────────────── */
#wpicp-portal-v2 .wpicp-btn-pay,
#wpicp-portal-v2 .wpicp-btn-pdf {
	all: unset !important;
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	font-family: 'Inter', sans-serif !important;
	font-weight: 700 !important;
	font-size: 11px !important;
	letter-spacing: 0.05em !important;
	border-radius: var(--wpicp-radius) !important;
	padding: 8px 18px !important;
	transition: all 0.2s ease !important;
	cursor: pointer !important;
	line-height: 1 !important;
	height: auto !important;
	min-height: unset !important;
	white-space: nowrap !important;
}

#wpicp-portal-v2 .wpicp-btn-pay {
	background: var(--wpicp-primary) !important;
	color: #ffffff !important;
	border: none !important;
}

#wpicp-portal-v2 .wpicp-btn-pay:hover {
	background: var(--wpicp-primary-hover) !important;
	transform: translateY(-1px) !important;
	color: #ffffff !important;
}

#wpicp-portal-v2 .wpicp-btn-pdf {
	background: #ffffff !important;
	border: 1px solid #e5e7eb !important;
	color: #4b5563 !important;
}

#wpicp-portal-v2 .wpicp-btn-pdf:hover {
	background: #f9fafb !important;
	border-color: #d1d5db !important;
}

/* ── 6. BADGES ────────────────────────────────────────────────────── */
#wpicp-portal-v2 .wpicp-badge {
	all: unset !important;
	box-sizing: border-box !important;
	padding: 2px 10px !important;
	border-radius: 20px !important;
	font-size: 9px !important;
	font-weight: 800 !important;
	font-family: 'Inter', sans-serif !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	display: inline-block !important;
	line-height: 1.6 !important;
}

#wpicp-portal-v2 .wpicp-badge-active,
#wpicp-portal-v2 .wpicp-badge-paid   { background: #dcfce7 !important; color: #166534 !important; }
#wpicp-portal-v2 .wpicp-badge-completed { background: #ecfdf5 !important; color: #065f46 !important; }
#wpicp-portal-v2 .wpicp-badge-on-hold,
#wpicp-portal-v2 .wpicp-badge-sent   { background: #dbeafe !important; color: #1e40af !important; }
#wpicp-portal-v2 .wpicp-badge-overdue { background: #fee2e2 !important; color: #991b1b !important; }
#wpicp-portal-v2 .wpicp-badge-pending { background: #fef9c3 !important; color: #854d0e !important; }

/* ── 7. MODAL ─────────────────────────────────────────────────────── */
.wpicp-modal-overlay {
	position: fixed !important;
	inset: 0 !important;
	background: rgba(15, 23, 42, 0.5) !important;
	backdrop-filter: blur(4px) !important;
	z-index: 99999 !important;
	display: none !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 20px !important;
}
.wpicp-modal-overlay.active { display: flex !important; }

.wpicp-modal-content {
	background: #fff !important;
	width: 100% !important;
	max-width: 850px !important;
	max-height: 90vh !important;
	border-radius: 24px !important;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
}

.wpicp-modal-header {
	padding: 16px 32px !important;
	border-bottom: 1px solid #f1f5f9 !important;
	background: #f8fafc !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
}

.wpicp-invoice-view {
	padding: 40px 60px !important;
	overflow-y: auto !important;
	flex-grow: 1 !important;
	font-family: 'Inter', sans-serif !important;
}

.wpicp-invoice-footer {
	padding: 24px 32px !important;
	background: #f8fafc !important;
	border-top: 1px solid #f1f5f9 !important;
	display: flex !important;
	gap: 12px !important;
}

/* ── 8. PRINT ─────────────────────────────────────────────────────── */
@media print {
	#wpicp-portal-v2 .wpicp-portal-topbar,
	.wpicp-modal-header,
	.wpicp-invoice-footer,
	.wpicp-tab-bar { display: none !important; }
}

/* ── 9. AUTH/LOGIN ────────────────────────────────────────────────── */
#wpicp-portal-v2.wpicp-login-wrap {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 60px 20px !important;
	background: transparent !important;
	font-family: 'Inter', sans-serif !important;
}

#wpicp-portal-v2 .wpicp-login-card {
	background: var(--wpicp-surf) !important;
	width: 100% !important;
	max-width: 440px !important;
	padding: 40px !important;
	border-radius: 24px !important;
	box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1) !important;
	border: 1px solid var(--wpicp-border) !important;
	text-align: center !important;
}

#wpicp-portal-v2 .wpicp-login-logo {
	margin-bottom: 24px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px !important;
}

#wpicp-portal-v2 .wpicp-login-logo img {
	max-width: var(--wpicp-logo-width, 200px) !important;
	height: auto !important;
}

#wpicp-portal-v2 .wpicp-login-logo-mark {
	width: 40px !important;
	height: 40px !important;
	background: var(--wpicp-primary) !important;
	border-radius: 12px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

#wpicp-portal-v2 .wpicp-login-logo-mark svg {
	width: 20px !important;
	height: 20px !important;
	stroke: #fff !important;
	stroke-width: 2.5 !important;
	fill: none !important;
}

#wpicp-portal-v2 .wpicp-login-logo-name {
	font-size: 22px !important;
	font-weight: 800 !important;
	color: var(--wpicp-text) !important;
	letter-spacing: -0.03em !important;
}

#wpicp-portal-v2 .wpicp-login-card h2 {
	font-size: 24px !important;
	font-weight: 800 !important;
	color: var(--wpicp-text) !important;
	margin: 0 0 8px 0 !important;
	letter-spacing: -0.03em !important;
}

#wpicp-portal-v2 .wpicp-login-card p {
	font-size: 14px !important;
	color: var(--wpicp-text-muted) !important;
	margin: 0 0 32px 0 !important;
	line-height: 1.5 !important;
}

#wpicp-portal-v2 .wpicp-form-group {
	margin-bottom: 20px !important;
	text-align: left !important;
}

#wpicp-portal-v2 .wpicp-form-group label {
	display: block !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--wpicp-text) !important;
	margin-bottom: 8px !important;
}

#wpicp-portal-v2 .wpicp-form-group input {
	width: 100% !important;
	padding: 12px 16px !important;
	border: 1px solid #d1d5db !important;
	border-radius: 12px !important;
	font-size: 14px !important;
	font-family: inherit !important;
	transition: all 0.2s ease !important;
	box-sizing: border-box !important;
	background: #fff !important;
	color: var(--wpicp-text) !important;
}

#wpicp-portal-v2 .wpicp-form-group input:focus {
	outline: none !important;
	border-color: var(--wpicp-primary) !important;
	box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important;
}

#wpicp-portal-v2 .wpicp-submit-btn {
	width: 100% !important;
	padding: 14px !important;
	background: var(--wpicp-primary) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 12px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	margin-top: 10px !important;
	font-family: inherit !important;
}

#wpicp-portal-v2 .wpicp-submit-btn:hover {
	background: var(--wpicp-primary-hover) !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2) !important;
}

#wpicp-portal-v2 .wpicp-form-footer {
	margin-top: 32px !important;
	font-size: 13px !important;
	color: var(--wpicp-text-muted) !important;
}

#wpicp-portal-v2 .wpicp-form-footer a {
	color: var(--wpicp-primary) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

#wpicp-portal-v2 .wpicp-form-footer a:hover {
	text-decoration: underline !important;
}