/**
 * NX Access Public/Frontend Styles
 *
 * Styles for My Apps page, pricing table, modals, and badges.
 *
 * @package GeoStruNXAccess
 */

/* =============================================
 *  CSS Variables
 * ============================================= */
:root {
	--nx-primary: #1e8a8a;
	--nx-primary-hover: #176e6e;
	--nx-success: #22c55e;
	--nx-success-bg: #f0fdf4;
	--nx-warning: #f59e0b;
	--nx-warning-bg: #fffbeb;
	--nx-error: #ef4444;
	--nx-error-bg: #fef2f2;
	--nx-info: #3b82f6;
	--nx-info-bg: #eff6ff;
	--nx-gray-50: #f9fafb;
	--nx-gray-100: #f3f4f6;
	--nx-gray-200: #e5e7eb;
	--nx-gray-300: #d1d5db;
	--nx-gray-500: #6b7280;
	--nx-gray-700: #374151;
	--nx-gray-900: #111827;
	--nx-radius: 12px;
	--nx-radius-sm: 8px;
	--nx-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	--nx-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* =============================================
 *  WooCommerce My Account Layout
 * ============================================= */

/* ---- Sidebar Navigation — minimal, transparent ---- */
.woocommerce-MyAccount-navigation {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.woocommerce-MyAccount-navigation ul li {
	margin: 0 !important;
	padding: 0 !important;
	list-style-type: none !important;
}

.woocommerce-MyAccount-navigation ul li::before,
.woocommerce-MyAccount-navigation ul li::marker {
	content: none !important;
	display: none !important;
}

.woocommerce-MyAccount-navigation ul li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	font-size: 15px;
	font-weight: 500;
	color: #4a5568 !important;
	text-decoration: none !important;
	border-radius: 8px;
	transition: color 0.15s, background 0.15s;
	border: none;
	background: transparent;
}

.woocommerce-MyAccount-navigation ul li a::before {
	font-family: 'etmodules' !important;
	font-size: 20px;
	width: 24px;
	text-align: center;
	flex-shrink: 0;
	speak: never;
	-webkit-font-smoothing: antialiased;
}

/* Divi etmodules icons — clean line style */
.woocommerce-MyAccount-navigation-link--dashboard a::before        { content: "\e00d"; }
.woocommerce-MyAccount-navigation-link--orders a::before            { content: "\e07a"; }
.woocommerce-MyAccount-navigation-link--my-apps a::before           { content: "\e0b4"; }
.woocommerce-MyAccount-navigation-link--subscriptions a::before     { content: "\e032"; }
.woocommerce-MyAccount-navigation-link--downloads a::before         { content: "\e092"; }
.woocommerce-MyAccount-navigation-link--edit-address a::before      { content: "\e081"; }
.woocommerce-MyAccount-navigation-link--edit-account a::before      { content: "\e08e"; }
.woocommerce-MyAccount-navigation-link--customer-logout a::before   { content: "\e0d1"; }

/* Hover */
.woocommerce-MyAccount-navigation ul li a:hover {
	color: #1e8a8a !important;
	background: rgba(30, 138, 138, 0.06);
	text-decoration: none !important;
}

/* Active / selected item — site green */
.woocommerce-MyAccount-navigation ul li.is-active a {
	color: #1e8a8a !important;
	font-weight: 600;
	background: rgba(30, 138, 138, 0.1);
	border-left: 3px solid #1e8a8a;
	padding-left: 11px;
}

/* Logout — subtle, separated */
.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 8px !important;
	padding-top: 8px !important;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: #9ca3af !important;
	font-size: 14px;
}

.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	color: #ef4444 !important;
	background: rgba(239, 68, 68, 0.06);
}

/* Hide Divi search button and container on account pages */
.woocommerce-account .et_pb_menu__search-button,
.woocommerce-account .et_pb_menu__search-container {
	display: none !important;
}

/* Hide admin bar search */
#wpadminbar #wp-admin-bar-search {
	display: none !important;
}


/* Hide default WooCommerce dashboard text */
.woocommerce-MyAccount-content > p:first-child,
.woocommerce-MyAccount-content > p:nth-child(2) {
	display: none !important;
}

/* ---- Content Area — subtle green tint ---- */
.woocommerce-MyAccount-content {
	background: rgba(30, 138, 138, 0.04) !important;
	border-radius: 12px;
	border: 1px solid rgba(30, 138, 138, 0.08);
	box-shadow: none !important;
	padding: 28px 32px;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
	.woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: wrap;
		gap: 2px;
	}
	.woocommerce-MyAccount-navigation ul li a {
		padding: 8px 12px;
		font-size: 13px;
		gap: 6px;
	}
	.woocommerce-MyAccount-navigation ul li a::before {
		font-size: 16px;
		width: 20px;
	}
	.woocommerce-MyAccount-navigation ul li.is-active a {
		border-left: none;
		border-bottom: 2px solid #1e8a8a;
		padding-left: 12px;
		border-radius: 8px 8px 0 0;
	}
	.woocommerce-MyAccount-navigation-link--customer-logout {
		border-top: none;
		margin-top: 0 !important;
		padding-top: 0 !important;
	}
	.woocommerce-MyAccount-content {
		padding: 20px;
	}
}

/* =============================================
 *  Buttons
 * ============================================= */
.nx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	border: none;
	border-radius: var(--nx-radius-sm);
	cursor: pointer;
	transition: all 0.2s ease;
	text-decoration: none;
	font-family: inherit;
}

.nx-btn--primary {
	background: var(--nx-primary);
	color: #fff;
}

.nx-btn--primary:hover {
	background: var(--nx-primary-hover);
	color: #fff;
}

.nx-btn--secondary {
	background: var(--nx-gray-100);
	color: var(--nx-gray-700);
}

.nx-btn--secondary:hover {
	background: var(--nx-gray-200);
}

.nx-btn--danger {
	background: var(--nx-error);
	color: #fff;
}

.nx-btn--danger:hover {
	background: #dc2626;
}

.nx-btn--small {
	padding: 6px 12px;
	font-size: 12px;
}

.nx-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* =============================================
 *  Badges
 * ============================================= */
.nx-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 600;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.nx-badge--success {
	background: var(--nx-success-bg);
	color: #16a34a;
}

.nx-badge--warning {
	background: var(--nx-warning-bg);
	color: #d97706;
}

.nx-badge--error {
	background: var(--nx-error-bg);
	color: var(--nx-error);
}

.nx-badge--info {
	background: var(--nx-info-bg);
	color: var(--nx-info);
}

/* =============================================
 *  Empty State
 * ============================================= */
.nx-public-empty {
	text-align: center;
	padding: 60px 20px;
	color: var(--nx-gray-500);
}

.nx-public-empty p {
	font-size: 16px;
	margin-bottom: 20px;
}

/* =============================================
 *  App Card — minimal (My Account)
 * ============================================= */
.nx-app {
	margin-bottom: 16px;
}

/* Alert banner (payment issue) */
.nx-app__alert {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	background: #fef3c7;
	border-radius: 8px;
	margin-bottom: 10px;
	font-size: 13px;
	color: #92400e;
}

.nx-app__alert .et-pb-icon { font-size: 18px; color: #d97706; }
.nx-app__alert-link { margin-left: auto; color: #1e8a8a; font-weight: 600; text-decoration: none; }
.nx-app__alert-link:hover { text-decoration: underline; }

/* Main row: icon + info + open button */
.nx-app__main {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0 !important;
}

.nx-app__left {
	display: flex !important;
	align-items: center !important;
	gap: 16px;
}

.nx-app__icon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: rgba(30, 138, 138, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.nx-app__icon img {
	width: 100%;
	height: 100%;
	border-radius: 10px;
	object-fit: cover;
}

.nx-app__icon .et-pb-icon {
	font-size: 22px;
	color: #1e8a8a;
}

.nx-app__info {
	display: flex;
	flex-direction: column;
	gap: 0;
	justify-content: center;
}

.nx-app__name {
	font-size: 17px;
	font-weight: 600;
	color: #1a202c;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.2 !important;
}

.nx-app__title-row {
	display: flex !important;
	align-items: center !important;
	gap: 10px;
	flex-wrap: wrap;
	line-height: 1 !important;
}

.nx-app__title-row h3,
.nx-app__title-row h3.nx-app__name,
.woocommerce-MyAccount-content .nx-app__title-row h3 {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.2 !important;
	margin-bottom: 0 !important;
	margin-top: 0 !important;
}

.nx-app__title-row .nx-tag {
	vertical-align: middle;
}

.nx-app__badges {
	display: flex;
	gap: 6px;
	align-items: center;
}

/* Tags (status badges) */
.nx-tag {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 600;
	border-radius: 4px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	line-height: 1.2;
}

.nx-tag--green { background: #ecfdf5; color: #059669; }
.nx-tag--teal    { background: #e6fffa; color: #0d9488; }
.nx-tag--amber   { background: #fffbeb; color: #d97706; }
.nx-tag--warning { background: #fef3cd; color: #856404; }

.nx-dash__app--cancelling {
	opacity: 0.75;
	border-left: 3px solid #d97706;
}

/* Open App button */
.nx-app__open {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	background: #1e8a8a;
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
	border-radius: 8px;
	text-decoration: none !important;
	transition: background 0.15s;
	white-space: nowrap;
	flex-shrink: 0;
}

.nx-app__open:hover {
	background: #176e6e;
	color: #fff !important;
}

.nx-app__open .et-pb-icon {
	font-size: 16px;
}

/* Meta row: plan, expiry, sessions */
.nx-app__meta {
	display: flex;
	gap: 28px;
	padding: 10px 0 0;
	margin-top: 10px;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.nx-app__meta-item {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.nx-app__meta-label {
	font-size: 11px;
	font-weight: 600;
	color: #9ca3af;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.nx-app__meta-value {
	font-size: 14px;
	color: #374151;
	font-weight: 500;
}

/* Empty state */
.nx-empty {
	text-align: center;
	padding: 48px 20px;
}

.nx-empty__icon {
	margin-bottom: 12px;
}

.nx-empty__icon .et-pb-icon {
	font-size: 40px;
	color: #d1d5db;
}

.nx-empty h3 {
	font-size: 18px;
	font-weight: 600;
	color: #374151;
	margin: 0 0 6px;
}

.nx-empty p {
	font-size: 14px;
	color: #9ca3af;
	margin: 0 0 20px;
}

/* Responsive */
@media (max-width: 600px) {
	.nx-app__main {
		flex-direction: column;
		align-items: flex-start;
	}
	.nx-app__open {
		width: 100%;
		justify-content: center;
	}
	.nx-app__meta {
		flex-wrap: wrap;
		gap: 16px;
	}
}

/* =============================================
 *  Dashboard (My Account)
 * ============================================= */
.nx-dash__greeting h2 {
	font-size: 22px;
	font-weight: 700;
	color: #1a202c;
	margin: 0 0 20px;
}

/* Stats row */
.nx-dash__stats {
	display: flex;
	gap: 12px;
	margin-bottom: 24px;
}

.nx-dash__stat {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 16px 12px;
	background: rgba(30, 138, 138, 0.06);
	border-radius: 10px;
	border: 1px solid rgba(30, 138, 138, 0.1);
}

.nx-dash__stat-value {
	font-size: 26px;
	font-weight: 700;
	color: #1e8a8a;
	line-height: 1;
}

.nx-dash__stat-label {
	font-size: 12px;
	color: #6b7280;
	margin-top: 4px;
	font-weight: 500;
}

/* Section */
.nx-dash__section {
	margin-bottom: 20px;
}

.nx-dash__section-title {
	font-size: 14px;
	font-weight: 600;
	color: #9ca3af;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0 0 12px;
}

/* App row in dashboard */
.nx-dash__app {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-radius: 10px;
	background: rgba(30, 138, 138, 0.04);
	border: 1px solid rgba(30, 138, 138, 0.08);
	margin-bottom: 8px;
	transition: background 0.15s;
}

.nx-dash__app:hover {
	background: rgba(30, 138, 138, 0.08);
}

.nx-dash__app-icon {
	width: 38px;
	height: 38px;
	border-radius: 9px;
	background: rgba(30, 138, 138, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.nx-dash__app-icon img {
	width: 100%;
	height: 100%;
	border-radius: 9px;
	object-fit: cover;
}

.nx-dash__app-icon .et-pb-icon {
	font-size: 18px;
	color: #1e8a8a;
}

.nx-dash__app-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.nx-dash__app-info strong {
	display: block;
	font-size: 15px;
	color: #1a202c;
	font-weight: 600;
	line-height: 1.3;
}

.nx-dash__app-detail {
	font-size: 13px;
	color: #6b7280;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 2px;
	line-height: 1.3;
}

.nx-dash__app-open {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 7px 14px;
	background: #1e8a8a;
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
	border-radius: 7px;
	text-decoration: none !important;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background 0.15s;
}

.nx-dash__app-open:hover {
	background: #176e6e;
	color: #fff !important;
}

.nx-dash__app-open .et-pb-icon {
	font-size: 14px;
}

.nx-dash__link {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	color: #1e8a8a !important;
	font-weight: 500;
	text-decoration: none !important;
}

.nx-dash__link:hover {
	text-decoration: underline !important;
}

/* CTA (no apps) */
.nx-dash__cta {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px;
	background: rgba(30, 138, 138, 0.06);
	border: 1px solid rgba(30, 138, 138, 0.1);
	border-radius: 10px;
}

.nx-dash__cta > .et-pb-icon {
	font-size: 32px;
	color: #1e8a8a;
	flex-shrink: 0;
}

.nx-dash__cta strong {
	display: block;
	font-size: 15px;
	color: #1a202c;
}

.nx-dash__cta p {
	margin: 2px 0 0;
	font-size: 13px;
	color: #6b7280;
}

.nx-dash__cta .nx-btn {
	margin-left: auto;
	flex-shrink: 0;
}

/* Quick links */
.nx-dash__links {
	display: flex;
	gap: 8px;
}

.nx-dash__qlink {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	border-radius: 8px;
	background: rgba(30, 138, 138, 0.04);
	border: 1px solid rgba(30, 138, 138, 0.08);
	font-size: 14px;
	font-weight: 500;
	color: #374151 !important;
	text-decoration: none !important;
	transition: background 0.15s;
}

.nx-dash__qlink:hover {
	background: rgba(30, 138, 138, 0.08);
	color: #1e8a8a !important;
}

.nx-dash__qlink .et-pb-icon {
	font-size: 18px;
	color: #1e8a8a;
}

@media (max-width: 600px) {
	.nx-dash__stats { flex-direction: column; }
	.nx-dash__links { flex-direction: column; }
	.nx-dash__app { flex-wrap: wrap; }
	.nx-dash__app-open { width: 100%; justify-content: center; }
	.nx-dash__cta { flex-direction: column; text-align: center; }
	.nx-dash__cta .nx-btn { margin-left: 0; }
}

/* =============================================
 *  WooCommerce Content Area — global overrides
 * ============================================= */

/* Headings inside content area */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.woocommerce-MyAccount-content .sai-account-title {
	font-size: 20px !important;
	font-weight: 600 !important;
	color: #1a202c !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
}

/* WooCommerce notices / info banners */
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .sai-notice,
.woocommerce-MyAccount-content .sai-empty-state {
	background: rgba(30, 138, 138, 0.06) !important;
	border: 1px solid rgba(30, 138, 138, 0.12) !important;
	color: #374151 !important;
	border-radius: 8px !important;
	padding: 14px 18px !important;
	font-size: 14px !important;
	margin-bottom: 16px !important;
}

.woocommerce-MyAccount-content .woocommerce-info::before,
.woocommerce-MyAccount-content .woocommerce-message::before {
	color: #1e8a8a !important;
}

/* WooCommerce error notices */
.woocommerce-MyAccount-content .woocommerce-error {
	background: rgba(239, 68, 68, 0.06) !important;
	border: 1px solid rgba(239, 68, 68, 0.12) !important;
	color: #991b1b !important;
	border-radius: 8px !important;
	padding: 14px 18px !important;
	list-style: none !important;
}

/* Tables inside content */
.woocommerce-MyAccount-content table {
	border-collapse: collapse;
	width: 100%;
	font-size: 14px;
}

.woocommerce-MyAccount-content table th {
	font-size: 11px;
	font-weight: 600;
	color: #9ca3af;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 10px 12px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	text-align: left;
	background: transparent !important;
}

.woocommerce-MyAccount-content table td {
	padding: 12px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.04);
	color: #374151;
	vertical-align: middle;
}

.woocommerce-MyAccount-content table tr:last-child td {
	border-bottom: none;
}

/* Buttons inside content */
.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content button[type="submit"] {
	background: #1e8a8a !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 10px 20px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition: background 0.15s !important;
}

.woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover {
	background: #176e6e !important;
}

/* Form fields */
.woocommerce-MyAccount-content .woocommerce-form input[type="text"],
.woocommerce-MyAccount-content .woocommerce-form input[type="email"],
.woocommerce-MyAccount-content .woocommerce-form input[type="password"],
.woocommerce-MyAccount-content .woocommerce-form select,
.woocommerce-MyAccount-content input.input-text {
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	border-radius: 8px !important;
	padding: 10px 14px !important;
	font-size: 14px !important;
	background: #fff !important;
	transition: border-color 0.15s !important;
}

.woocommerce-MyAccount-content .woocommerce-form input:focus,
.woocommerce-MyAccount-content input.input-text:focus {
	border-color: #1e8a8a !important;
	outline: none !important;
	box-shadow: 0 0 0 2px rgba(30, 138, 138, 0.15) !important;
}

/* =============================================
 *  WooCommerce Login / Forms — page-level
 * ============================================= */

/* Login form container */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-ResetPassword {
	max-width: 420px;
}

/* All WC form inputs (login, register, account, address) */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"],
.woocommerce-account select {
	background: #fff !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	border-radius: 8px !important;
	padding: 12px 14px !important;
	font-size: 15px !important;
	color: #1a202c !important;
	width: 100% !important;
	box-sizing: border-box !important;
	transition: border-color 0.15s, box-shadow 0.15s !important;
	-webkit-appearance: none !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce-account input:focus,
.woocommerce-account select:focus {
	border-color: #1e8a8a !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(30, 138, 138, 0.12) !important;
}

/* Labels */
.woocommerce form .form-row label {
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #374151 !important;
	margin-bottom: 6px !important;
}

.woocommerce form .form-row .required {
	color: #ef4444 !important;
}

/* All WC buttons */
.woocommerce-account .woocommerce-form-login .woocommerce-button,
.woocommerce-account .woocommerce-form-register .woocommerce-button,
.woocommerce-account .woocommerce-Button,
.woocommerce-account button.woocommerce-button,
.woocommerce-account input[type="submit"],
.woocommerce .button,
.woocommerce button.button {
	background: #1e8a8a !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 12px 28px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: background 0.15s !important;
	text-decoration: none !important;
	display: inline-block !important;
	line-height: 1.4 !important;
}

.woocommerce-account .woocommerce-button:hover,
.woocommerce-account button.woocommerce-button:hover,
.woocommerce .button:hover,
.woocommerce button.button:hover {
	background: #176e6e !important;
	color: #fff !important;
}

/* Hide Divi arrow on WC buttons */
.woocommerce .button::after,
.woocommerce button.button::after,
.woocommerce-account .woocommerce-button::after {
	display: none !important;
}

/* "Remember me" checkbox row */
.woocommerce form .form-row .woocommerce-form__label-for-checkbox {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 14px !important;
	color: #6b7280 !important;
}

/* "Lost your password?" link */
.woocommerce-LostPassword a,
.woocommerce-account .woocommerce-form-login .lost_password a {
	color: #1e8a8a !important;
	font-size: 14px !important;
	text-decoration: none !important;
}

.woocommerce-LostPassword a:hover {
	text-decoration: underline !important;
}

/* Override browser autofill blue background */
.woocommerce-account input:-webkit-autofill,
.woocommerce-account input:-webkit-autofill:hover,
.woocommerce-account input:-webkit-autofill:focus,
.woocommerce-account input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 30px #fff inset !important;
	-webkit-text-fill-color: #1a202c !important;
	transition: background-color 5000s ease-in-out 0s !important;
}

/* Password visibility toggle */
.woocommerce form .show-password-input {
	color: #9ca3af !important;
}

/* Page titles (Login, Register, etc.) */
.woocommerce-account h2,
.woocommerce-account .entry-title {
	font-size: 28px !important;
	font-weight: 700 !important;
	color: #1a202c !important;
	margin: 0 0 28px !important;
	padding: 0 !important;
}

/* Login form — constrain width */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-ResetPassword {
	max-width: 440px;
}

/*
 * Login page layout normalization.
 * EN: Divi renders section/row/column modules (provides gutter padding ~10% each side).
 * FR/IT/etc: Polyglot bypasses Divi, renders .woocommerce directly inside et_builder_inner_content.
 * We replicate Divi's default gutters2 layout for the non-Divi case.
 */
.woocommerce-account .et_builder_inner_content > .woocommerce {
	max-width: 80%;
	margin: 0 auto;
	padding: 30px 0 !important;
}

/* Login h2 — all cases */
.woocommerce-account .woocommerce > h2:first-of-type {
	font-size: 28px !important;
	font-weight: 700 !important;
	color: #1a202c !important;
	margin: 0 0 24px !important;
	padding: 0 !important;
}

/* =============================================
 *  Pricing Grid
 * ============================================= */
.nx-pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	padding: 20px 0;
}

.nx-pricing-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: #fff;
	border: 1px solid var(--nx-gray-200);
	border-radius: var(--nx-radius);
	box-shadow: none;
	padding: 32px 24px;
	transition: border-color 0.2s ease;
}

.nx-pricing-card:hover {
	border-color: var(--nx-gray-400);
}

.nx-pricing-card__icon {
	width: 64px;
	height: 64px;
	border-radius: var(--nx-radius-sm);
	object-fit: cover;
	margin-bottom: 16px;
}

.nx-pricing-card__icon--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--nx-gray-100);
	color: var(--nx-gray-500);
	margin-bottom: 16px;
}

.nx-pricing-card__icon--placeholder .dashicons {
	font-size: 32px;
	width: 32px;
	height: 32px;
}

.nx-pricing-card__name {
	font-size: 24px;
	font-weight: 700;
	color: var(--nx-gray-900);
	margin: 0 0 10px;
}

.nx-pricing-card__desc {
	font-size: 16px;
	color: var(--nx-gray-500);
	line-height: 1.5;
	margin: 0 0 20px;
}

/* Period Selector */
.nx-pricing-card__periods {
	display: flex;
	gap: 4px;
	padding: 4px;
	background: var(--nx-gray-100);
	border-radius: 999px;
	margin-bottom: 20px;
}

.nx-period-btn {
	padding: 6px 16px;
	font-size: 13px;
	font-weight: 500;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	background: transparent;
	color: var(--nx-gray-500);
	transition: all 0.2s ease;
	font-family: inherit;
}

.nx-period-btn--active {
	background: var(--nx-primary);
	color: #fff;
	box-shadow: none;
}

.nx-period-btn:hover:not(.nx-period-btn--active) {
	color: var(--nx-gray-700);
}

/* Price Display */
.nx-pricing-card__price {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin-bottom: 24px;
}

.nx-pricing-card__amount {
	font-size: 40px;
	font-weight: 800;
	color: var(--nx-gray-900);
}

.nx-pricing-card__currency {
	font-size: 24px;
	font-weight: 700;
	vertical-align: super;
	margin-right: 2px;
}

.nx-pricing-card__period {
	font-size: 16px;
	color: var(--nx-gray-500);
}

.nx-pricing-card__coming-soon {
	font-size: 14px;
	font-weight: 600;
	color: var(--nx-info);
	padding: 10px 20px;
}

.nx-pricing-empty {
	text-align: center;
	padding: 40px 20px;
	color: var(--nx-gray-500);
}

/* =============================================
 *  Modal (Frontend)
 * ============================================= */
.nx-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nx-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
}

.nx-modal-content {
	position: relative;
	background: #fff;
	border-radius: var(--nx-radius);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
	width: 100%;
	max-width: 440px;
}

.nx-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid var(--nx-gray-200);
}

.nx-modal-header h3 {
	margin: 0;
	font-size: 18px;
	color: var(--nx-gray-900);
}

.nx-modal-close {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: var(--nx-gray-500);
	padding: 0;
	line-height: 1;
}

.nx-modal-body {
	padding: 24px;
}

.nx-modal-body p {
	margin: 0 0 16px;
	color: var(--nx-gray-700);
	line-height: 1.6;
}

.nx-modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 16px 24px;
	border-top: 1px solid var(--nx-gray-200);
	background: var(--nx-gray-50);
	border-radius: 0 0 var(--nx-radius) var(--nx-radius);
}

.nx-confirm-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--nx-gray-700);
	cursor: pointer;
}

.nx-confirm-label input[type="checkbox"] {
	width: 16px;
	height: 16px;
}

/* =============================================
 *  Toast (Frontend)
 * ============================================= */
.nx-toast {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 1000000;
	padding: 12px 20px;
	border-radius: var(--nx-radius-sm);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	animation: nxFadeIn 0.3s ease;
}

.nx-toast--success { background: var(--nx-success); }
.nx-toast--error   { background: var(--nx-error); }
.nx-toast--info    { background: var(--nx-info); }

@keyframes nxFadeIn {
	from { opacity: 0; transform: translateY(-10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* =============================================
 *  Responsive
 * ============================================= */
@media screen and (max-width: 992px) {
	.nx-pricing-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 600px) {
	.nx-pricing-grid {
		grid-template-columns: 1fr;
	}

	.nx-app-card__header {
		flex-direction: column;
		gap: 16px;
		align-items: flex-start;
	}

	.nx-app-card__details {
		flex-direction: column;
		gap: 16px;
	}

	.nx-modal-content {
		margin: 16px;
	}
}