/* ==========================================================
   TNE PROFILE EDITOR
   Progressive UI over EscortWP's existing Edit Profile form.
   ========================================================== */

.tne-profile-editor-shell {
	--tne-pe-bg: #0b0b0d;
	--tne-pe-panel: #121317;
	--tne-pe-panel-2: #18191e;
	--tne-pe-border: rgba(255,255,255,.09);
	--tne-pe-text: #f5f1f3;
	--tne-pe-muted: #aaa2a8;
	--tne-pe-gold: #d8b767;
	--tne-pe-wine: #b3153e;
	width: min(1120px, calc(100% - 32px));
	margin: 32px auto 70px;
	color: var(--tne-pe-text);
}

.tne-profile-editor-shell *,
.tne-profile-editor-shell *::before,
.tne-profile-editor-shell *::after {
	box-sizing: border-box;
}

.tne-profile-editor-top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
	margin-bottom: 22px;
	padding: 4px 2px 0;
}

.tne-profile-editor-kicker,
.tne-profile-editor-eyebrow,
.tne-profile-writer-kicker {
	display: block;
	margin-bottom: 8px;
	color: var(--tne-pe-gold);
	font-size: 11px;
	font-weight: 850;
	letter-spacing: .15em;
	text-transform: uppercase;
}

.tne-profile-editor-top h1 {
	margin: 0 !important;
	color: #fff !important;
	font-size: clamp(34px, 5vw, 54px) !important;
	line-height: 1.02 !important;
	letter-spacing: -.035em;
}

.tne-profile-editor-top p {
	max-width: 720px;
	margin: 12px 0 0;
	color: var(--tne-pe-muted);
	font-size: 15px;
	line-height: 1.6;
}

.tne-profile-editor-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--tne-pe-border);
	border-radius: 12px;
	background: rgba(255,255,255,.025);
	color: #eee7eb !important;
	font-size: 13px;
	font-weight: 750;
	text-decoration: none !important;
	white-space: nowrap;
}

.tne-profile-editor-nav {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 18px;
	padding: 7px;
	border: 1px solid var(--tne-pe-border);
	border-radius: 16px;
	background: #101115;
}

.tne-profile-editor-nav button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 45px;
	padding: 0 10px;
	border: 1px solid transparent;
	border-radius: 11px;
	background: transparent;
	color: #a9a2a7;
	font-size: 12px;
	font-weight: 750;
	cursor: pointer;
}

.tne-profile-editor-tab-number {
	color: #756f74;
	font-size: 10px;
	letter-spacing: .08em;
}

.tne-profile-editor-tab-title {
	color: inherit;
	font-size: inherit;
	letter-spacing: inherit;
}

.tne-profile-editor-tab-mobile {
	display: none;
}

.tne-profile-editor-nav button:hover,
.tne-profile-editor-nav button.is-active {
	border-color: rgba(216,183,103,.22);
	background: linear-gradient(180deg, rgba(179,21,62,.22), rgba(179,21,62,.08));
	color: #fff;
}

.tne-profile-editor-nav button.is-active .tne-profile-editor-tab-number {
	color: var(--tne-pe-gold);
}

.tne-profile-editor-shell > .tne-registration-help {
	margin-bottom: 18px;
}

.tne-profile-editor-form {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

.tne-profile-editor-section {
	padding: clamp(22px, 4vw, 38px);
	border: 1px solid var(--tne-pe-border);
	border-radius: 22px;
	background:
		radial-gradient(circle at 90% 0, rgba(148,20,57,.10), transparent 35%),
		var(--tne-pe-panel);
	box-shadow: 0 28px 70px rgba(0,0,0,.25);
}

.tne-profile-editor-section[hidden] {
	display: none !important;
}

.tne-profile-editor-section-head {
	margin-bottom: 28px;
	padding-bottom: 22px;
	border-bottom: 1px solid rgba(255,255,255,.07);
}

.tne-profile-editor-section-head h2 {
	margin: 0 0 8px !important;
	color: #fff !important;
	font-size: clamp(25px, 3vw, 36px) !important;
	line-height: 1.08 !important;
	letter-spacing: -.025em;
}

.tne-profile-editor-section-head p {
	max-width: 720px;
	margin: 0;
	color: var(--tne-pe-muted);
	font-size: 14px;
	line-height: 1.6;
}

.tne-profile-editor-fields {
	display: grid;
	grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
	column-gap: 32px;
	align-items: start;
}

.tne-profile-editor-fields > .form-label {
	grid-column: 1;
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 17px 0 !important;
	color: #e9e2e6;
}

.tne-profile-editor-fields > .form-input {
	grid-column: 2;
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 10px 0 17px !important;
}

.tne-profile-editor-fields > .formseparator {
	grid-column: 1 / -1;
	width: 100% !important;
	height: 1px !important;
	margin: 0 !important;
	border: 0 !important;
	background: rgba(255,255,255,.05) !important;
}

.tne-profile-editor-fields > [class^="clear"],
.tne-profile-editor-fields > [class*=" clear"] {
	grid-column: 1 / -1;
}

.tne-profile-editor-fields input[type="text"],
.tne-profile-editor-fields input[type="email"],
.tne-profile-editor-fields input[type="password"],
.tne-profile-editor-fields input[type="tel"],
.tne-profile-editor-fields input[type="url"],
.tne-profile-editor-fields input[type="number"],
.tne-profile-editor-fields select,
.tne-profile-editor-fields textarea,
.tne-profile-editor-fields .select2-container .select2-selection {
	box-sizing: border-box;
	border-color: #3a3439 !important;
	border-radius: 11px !important;
	background: var(--tne-pe-panel-2) !important;
	color: #fff !important;
	box-shadow: none !important;
}

.tne-profile-editor-fields input[type="text"],
.tne-profile-editor-fields input[type="email"],
.tne-profile-editor-fields input[type="password"],
.tne-profile-editor-fields input[type="tel"],
.tne-profile-editor-fields input[type="url"],
.tne-profile-editor-fields input[type="number"],
.tne-profile-editor-fields select {
	min-height: 48px;
	padding: 0 13px !important;
}

.tne-profile-editor-fields textarea {
	min-height: 175px;
	padding: 14px !important;
	resize: vertical;
}

.tne-profile-editor-fields input:focus,
.tne-profile-editor-fields select:focus,
.tne-profile-editor-fields textarea:focus {
	border-color: #b51e48 !important;
	outline: 0 !important;
	box-shadow: 0 0 0 3px rgba(181,30,72,.15) !important;
}

.tne-profile-editor-fields small,
.tne-profile-editor-fields .tne-field-optional {
	color: var(--tne-pe-muted) !important;
}

.tne-profile-editor-fields .rates {
	width: 100% !important;
	float: none !important;
}

.tne-profile-editor-original-submit {
	display: none !important;
}

.tne-profile-editor-savebar {
	position: sticky;
	bottom: 14px;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 16px;
	padding: 13px 14px 13px 18px;
	border: 1px solid rgba(216,183,103,.20);
	border-radius: 16px;
	background: rgba(16,17,21,.94);
	box-shadow: 0 18px 50px rgba(0,0,0,.42);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

.tne-profile-editor-savebar > div {
	display: grid;
	gap: 2px;
}

.tne-profile-editor-savebar strong {
	color: #f6f0f4;
	font-size: 13px;
}

.tne-profile-editor-savebar span {
	color: var(--tne-pe-muted);
	font-size: 11px;
}

.tne-profile-editor-save {
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid rgba(216,183,103,.28);
	border-radius: 11px;
	background: linear-gradient(180deg, #c91c49, #91102f);
	color: #fff;
	font-size: 13px;
	font-weight: 850;
	cursor: pointer;
}

/* Profile writer ------------------------------------------------------- */
.tne-profile-writer {
	--tne-pe-panel-2: #18191e;
	--tne-pe-muted: #aaa2a8;
	--tne-pe-gold: #d8b767;
	margin-top: 14px;
	padding: 17px;
	border: 1px solid rgba(216,183,103,.17);
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(216,183,103,.045), rgba(168,20,57,.04));
}

.tne-profile-writer-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}

.tne-profile-writer-head strong {
	display: block;
	color: #fff;
	font-size: 15px;
}

.tne-profile-writer-head p {
	max-width: 620px;
	margin: 5px 0 0;
	color: var(--tne-pe-muted);
	font-size: 12px;
	line-height: 1.5;
}

.tne-profile-writer-status {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0 10px;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 999px;
	color: #a9a1a6;
	font-size: 10px;
	font-weight: 800;
	white-space: nowrap;
}

.tne-profile-writer-status.is-good {
	border-color: rgba(216,183,103,.25);
	color: #e5ca87;
}

.tne-profile-writer-status.is-strong {
	border-color: rgba(68,191,120,.28);
	color: #85d9a6;
}

.tne-profile-writer-tones {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 15px;
}

.tne-profile-writer-tones button,
.tne-profile-writer-preview button {
	min-height: 36px;
	padding: 0 12px;
	border: 1px solid rgba(255,255,255,.10);
	border-radius: 10px;
	background: rgba(255,255,255,.025);
	color: #cfc8cc;
	font-size: 11px;
	font-weight: 750;
	cursor: pointer;
}

.tne-profile-writer-tones button.is-active {
	border-color: rgba(216,183,103,.30);
	background: rgba(216,183,103,.08);
	color: #f0d998;
}

.tne-profile-writer-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
}

.tne-profile-writer-generate {
	min-height: 40px;
	padding: 0 15px;
	border: 1px solid rgba(179,21,62,.55);
	border-radius: 10px;
	background: rgba(179,21,62,.15);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
}

.tne-profile-writer-actions span {
	color: var(--tne-pe-muted);
	font-size: 11px;
}

.tne-profile-writer-preview {
	margin-top: 14px;
	padding: 15px;
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 13px;
	background: #111216;
}

.tne-profile-writer-preview[hidden] {
	display: none !important;
}

.tne-profile-writer-preview p {
	margin: 0;
	color: #dfd8dc;
	font-size: 13px;
	line-height: 1.65;
}

.tne-profile-writer-preview > div {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.tne-profile-writer-preview [data-writer-use] {
	border-color: rgba(216,183,103,.24);
	background: rgba(216,183,103,.07);
	color: #efd997;
}

@media screen and (max-width: 860px) {
	.tne-profile-editor-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tne-profile-editor-fields {
		grid-template-columns: 1fr;
	}

	.tne-profile-editor-fields > .form-label,
	.tne-profile-editor-fields > .form-input {
		grid-column: 1;
	}

	.tne-profile-editor-fields > .form-label {
		padding: 16px 0 2px !important;
	}

	.tne-profile-editor-fields > .form-input {
		padding: 8px 0 16px !important;
	}
}

@media screen and (max-width: 600px) {
	.tne-profile-editor-shell {
		width: min(100% - 20px, 1120px);
		margin-top: 20px;
	}

	.tne-profile-editor-top {
		align-items: flex-start;
		flex-direction: column;
		gap: 15px;
	}

	.tne-profile-editor-back {
		width: 100%;
	}

	/*
	 * Keep every editor section visible on phones. The first row uses
	 * three compact tabs and the second row uses two wider tabs, so
	 * advertisers never have to discover a horizontal scroll gesture.
	 */
	.tne-profile-editor-nav {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 5px;
		overflow: visible;
		padding: 5px;
	}

	.tne-profile-editor-nav button {
		grid-column: span 2;
		min-width: 0;
		min-height: 48px;
		flex-direction: column;
		gap: 2px;
		padding: 6px 4px;
		font-size: 11px;
		line-height: 1.15;
		white-space: normal;
	}

	.tne-profile-editor-nav button:nth-child(4),
	.tne-profile-editor-nav button:nth-child(5) {
		grid-column: span 3;
	}

	.tne-profile-editor-tab-title {
		display: none;
	}

	.tne-profile-editor-tab-mobile {
		display: block;
		color: inherit;
		font-size: 11px;
		font-weight: 800;
		letter-spacing: 0;
	}

	.tne-profile-editor-tab-number {
		font-size: 8px;
	}

	.tne-profile-editor-section {
		padding: 20px 16px;
		border-radius: 18px;
	}

	.tne-profile-writer-head {
		flex-direction: column;
		gap: 10px;
	}

	.tne-profile-editor-savebar {
		bottom: 8px;
		padding: 10px;
	}

	.tne-profile-editor-savebar > div {
		display: none;
	}

	.tne-profile-editor-save {
		width: 100%;
	}
}