/**
 * Round Table Profile Form Component
 *
 * Complete profile display with:
 * - Cover image with gradient (blue/teal)
 * - Overlapping avatar (140×140)
 * - Name, role, location, action buttons
 * - All content sections (About, Expertise, Experience, Education, Certifications, Endorsements)
 */

/* ──────────────────────────────────────────────────────────────────────────
   UNIVERSAL RESETS & ELEMENTOR OVERRIDES
   ────────────────────────────────────────────────────────────────────────── */

.rt-profile-form,
.rt-profile-form * {
	box-sizing: border-box !important;
}

.rt-profile-form p,
.rt-profile-form p:last-child {
	margin: 0 !important;
	padding: 0 !important;
}

.rt-profile-form ul,
.rt-profile-form li,
.rt-profile-form h1,
.rt-profile-form h2,
.rt-profile-form h3,
.rt-profile-form h4,
.rt-profile-form h5,
.rt-profile-form h6 {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.rt-profile-form button {
	font-family: 'Inter', sans-serif !important;
	border: none;
	background: none;
	cursor: pointer;
	padding: 0;
	margin: 0;
}

.rt-profile-form a {
	color: #558AF5 !important;
	text-decoration: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   ROOT & LAYOUT
   ────────────────────────────────────────────────────────────────────────── */

.rt-profile-form {
	width: 100%;
	max-width: 100%;
	font-family: 'Inter', sans-serif;
	color: #111111;
	background: transparent !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 25px !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   HEADER WRAPPER (Cover + Content)
   ────────────────────────────────────────────────────────────────────────── */

.rt-profile-form__header-wrapper {
	position: relative;
	margin: 0 !important;
	background: #fff !important;
	border-radius: 10px !important;
	/* No overflow:hidden here — it would clip the 3-dot dropdown.
	   Rounded corners are applied to the cover (top) and header-content (bottom) instead. */
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05) !important;
}

/* Cover Image - Full width, 200px height. Clips its own top corners. */
.rt-profile-form__cover {
	position: relative !important;
	width: 100%;
	height: 200px;
	overflow: hidden;
	border-radius: 10px 10px 0 0 !important;
	background: linear-gradient(135deg, #0088ff 0%, #00d4ff 50%, #0055cc 100%);
}

.rt-profile-form__cover-image {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

/* Edit cover pencil button - top right of cover */
.rt-profile-form__edit-cover {
	position: absolute !important;
	top: 16px !important;
	right: 16px !important;
	width: 34px !important;
	height: 34px !important;
	border-radius: 50% !important;
	background: #fff !important;
	color: #111 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
	cursor: pointer !important;
	border: none !important;
	padding: 0 !important;
}

.rt-profile-form__edit-cover:hover {
	background: #f5f5f5 !important;
}

/* Header Content - below cover, holds avatar (pulled up) + info + buttons */
.rt-profile-form__header-content {
	position: relative;
	margin-top: 0 !important;
	padding: 16px 24px 24px 24px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
	background: #fff !important;
	border-radius: 0 0 10px 10px !important;
	z-index: 2;
}

/* Top row: avatar + info side by side */
.rt-profile-form__header-main {
	display: flex !important;
	gap: 20px !important;
	align-items: flex-start !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   AVATAR
   ────────────────────────────────────────────────────────────────────────── */

.rt-profile-form__avatar-wrapper {
	flex-shrink: 0;
	position: relative;
	z-index: 2;
	margin-top: -76px !important;
}

.rt-profile-form__avatar {
	width: 140px !important;
	height: 140px !important;
	border-radius: 50% !important;
	border: 4px solid #fff !important;
	object-fit: cover !important;
	background: #f0f0f0;
	display: block;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	max-width: 140px !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   PROFILE INFO (Name, Role, Location)
   ────────────────────────────────────────────────────────────────────────── */

.rt-profile-form__header-info {
	flex: 1 1 auto !important;
	min-width: 0 !important; /* allow the column to shrink so meta wraps instead of overflowing */
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	padding-top: 0 !important;
}

/* Long role/company should wrap rather than overflow the narrow info column. */
.rt-profile-form__job-title,
.rt-profile-form__company,
.rt-profile-form__work-status,
.rt-profile-form__name {
	min-width: 0 !important;
	overflow-wrap: anywhere !important;
}

/* Name + inline green status dot */
.rt-profile-form__name {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	color: #111111 !important;
	line-height: 1.3 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.rt-profile-form__status-dot {
	display: inline-block !important;
	width: 8px !important;
	height: 8px !important;
	border-radius: 50% !important;
	background: #22c55e !important;
	flex-shrink: 0 !important;
}

.rt-profile-form__meta {
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
	font-size: 16px !important;
	color: #585858 !important;
	flex-wrap: wrap !important;
}

.rt-profile-form__job-title,
.rt-profile-form__company,
.rt-profile-form__work-status {
	font-weight: 400 !important;
	color: #585858 !important;
}

/* "Open to Work" highlighted in green */
.rt-profile-form__work-status--open {
	color: #16a34a !important;
	font-weight: 600 !important;
}

.rt-profile-form__separator {
	color: #999 !important;
	margin: 0 !important;
}

.rt-profile-form__location-contact {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 13px !important;
	color: #666 !important;
}

.rt-profile-form__location {
	font-weight: 400 !important;
	color: #666 !important;
}

.rt-profile-form__contact-link {
	color: #558AF5 !important;
	font-weight: 500 !important;
	text-decoration: none !important;
}

/* Contact Info Button & Tooltip */
.rt-profile-form__contact-info-wrapper {
	position: relative !important;
	display: inline-block !important;
}

.rt-profile-form__contact-btn {
	color: #558AF5 !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	cursor: pointer !important;
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
}

.rt-profile-form__contact-btn:hover {
	text-decoration: underline !important;
}

.rt-profile-form__contact-tooltip {
	position: absolute !important;
	top: 100% !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	margin-top: 8px !important;
	background: white !important;
	border: 1px solid #e0e0e0 !important;
	border-radius: 8px !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
	z-index: 1000 !important;
	min-width: 200px !important;
	padding: 12px !important;
	pointer-events: auto !important;
}

.rt-profile-form__contact-tooltip[hidden] {
	display: none !important;
}

.rt-profile-form__contact-tooltip-arrow {
	position: absolute !important;
	top: -8px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	width: 0 !important;
	height: 0 !important;
	border-left: 8px solid transparent !important;
	border-right: 8px solid transparent !important;
	border-bottom: 8px solid #e0e0e0 !important;
}

.rt-profile-form__contact-tooltip-arrow::after {
	content: '' !important;
	position: absolute !important;
	top: 1px !important;
	left: -8px !important;
	width: 0 !important;
	height: 0 !important;
	border-left: 8px solid transparent !important;
	border-right: 8px solid transparent !important;
	border-bottom: 8px solid white !important;
}

.rt-profile-form__contact-tooltip-content {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
}

.rt-profile-form__contact-item {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
}

.rt-profile-form__contact-label {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: #666 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}

.rt-profile-form__contact-value {
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #558AF5 !important;
	text-decoration: none !important;
	word-break: break-all !important;
}

.rt-profile-form__contact-value:hover {
	text-decoration: underline !important;
}

/* Open to network badge - top-right of header */
/* "Open to network" badge — pinned to the bottom-right of the cover photo.
   z-index 0 keeps it below the header content (z-index 2) so it can never
   paint over the 3-dot options menu. */
.rt-profile-form__network-badge {
	position: absolute !important;
	bottom: 12px !important;
	right: 16px !important;
	top: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	z-index: 0 !important;
}

/* Own-profile options menu — pinned top-right, next to the name */
.rt-profile-form__header-menu {
	position: absolute !important;
	top: 14px !important;
	right: 20px !important;
	z-index: 3 !important;
}

.rt-profile-form__network-badge-text {
	display: inline-block !important;
	padding: 3px 10px !important;
	border: 1px solid rgba(255, 255, 255, 0.7) !important;
	border-radius: 20px !important;
	background: rgba(255, 255, 255, 0.92) !important;
	color: #16a34a !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	white-space: nowrap !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ACTION BUTTONS
   ────────────────────────────────────────────────────────────────────────── */

.rt-profile-form__actions {
	display: flex !important;
	gap: 12px !important;
	flex-shrink: 0 !important;
	padding-top: 0 !important;
}

.rt-profile-form__btn {
	padding: 10px 24px !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	transition: all 150ms ease !important;
	white-space: nowrap !important;
	text-align: center !important;
	border: 1px solid transparent !important;
	line-height: 1.2 !important;
	cursor: pointer !important;
}

.rt-profile-form__btn--primary {
	background: #1d2025 !important;
	color: #fff !important;
}

.rt-profile-form__btn--primary:hover {
	background: #333 !important;
}

.rt-profile-form__btn--secondary {
	background: #fff !important;
	color: #1d2025 !important;
	border: 1px solid #d0d0d0 !important;
}

.rt-profile-form__btn--secondary:hover {
	background: #f5f5f5 !important;
}

/* Three-dot menu button - circular */
.rt-profile-form__btn-menu {
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background: #f0f0f2 !important;
	border: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	transition: background 150ms ease !important;
}

.rt-profile-form__btn-menu:hover {
	background: #e4e4e7 !important;
}

/* Dropdown menu wrapper */
.rt-profile-form__menu-wrap {
	position: relative !important;
	display: inline-flex !important;
}

/* Dropdown panel */
.rt-profile-form__menu {
	position: absolute !important;
	top: calc(100% + 6px) !important;
	right: 0 !important;
	min-width: 190px !important;
	background: #fff !important;
	border: 1px solid #ececec !important;
	border-radius: 10px !important;
	box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.12) !important;
	padding: 6px !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	z-index: 5 !important;
}

.rt-profile-form__menu[hidden] {
	display: none !important;
}

/* Dropdown items */
.rt-profile-form__menu-item {
	display: block !important;
	width: 100% !important;
	text-align: left !important;
	padding: 9px 12px !important;
	border: none !important;
	background: transparent !important;
	border-radius: 6px !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	color: #111 !important;
	line-height: 1.3 !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	transition: background 120ms ease !important;
}

/* Anchor menu items (e.g. "My account") — override the generic link reset. */
.rt-profile-form a.rt-profile-form__menu-item {
	color: #111 !important;
	text-decoration: none !important;
}

.rt-profile-form__menu-item:hover {
	background: #f5f5f7 !important;
}

/* Destructive item (Report / Block) */
.rt-profile-form__menu-item[data-rt-action="report-block"] {
	color: #dc2626 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   SECTIONS WRAPPER
   ────────────────────────────────────────────────────────────────────────── */

.rt-profile-form__sections {
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 25px !important;
	margin: 0 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   SECTION BASE
   ────────────────────────────────────────────────────────────────────────── */

.rt-profile-form__section {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	padding: 24px !important;
	margin: 0 !important;
	background: #fff !important;
	border-radius: 10px !important;
	border: none !important;
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05) !important;
}

/* Hidden attribute must beat the display:flex !important above
   (e.g. the edit-only Details section, shown only via "Edit profile"). */
.rt-profile-form__section[hidden],
.rt-profile-form__view[hidden] {
	display: none !important;
}

/* Section Title */
.rt-profile-form__section-title {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #111 !important;
	line-height: 1.3 !important;
	margin-bottom: 8px !important;
	margin-top: 0 !important;
	padding: 0 !important;
}

.rt-profile-form__section-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	margin: 0 0 4px 0 !important;
	padding: 0 !important;
}

/* When title is inside a header row, remove its own bottom margin */
.rt-profile-form__section-header .rt-profile-form__section-title {
	margin-bottom: 0 !important;
}

.rt-profile-form__section-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 34px !important;
	height: 34px !important;
	aspect-ratio: 1 / 1 !important;
	background: #F0F0F2 !important;
	border-radius: 50% !important;
	color: #111 !important;
	flex-shrink: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

.rt-profile-form__section-icon svg {
	width: 20px !important;
	height: 20px !important;
	display: block !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ABOUT SECTION
   ────────────────────────────────────────────────────────────────────────── */

.rt-profile-form__section-text {
	font-size: 13px !important;
	line-height: 1.6 !important;
	color: #666 !important;
	margin-bottom: 8px !important;
	margin-top: 0 !important;
	padding: 0 !important;
}

.rt-profile-form__show-more {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #558AF5 !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	cursor: pointer !important;
	transition: opacity 150ms !important;
	margin-top: 4px !important;
}

.rt-profile-form__show-more:hover {
	opacity: 0.8 !important;
}

.rt-profile-form__chevron {
	font-size: 11px !important;
	transition: transform 150ms !important;
	line-height: 1 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   TAGS (Expertise)
   ────────────────────────────────────────────────────────────────────────── */

.rt-profile-form__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rt-profile-form__tag {
	display: inline-block !important;
	padding: 6px 12px !important;
	border-radius: 20px !important;
	background: #f0f0f0 !important;
	border: 1px solid #ddd !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #333 !important;
	white-space: nowrap !important;
	margin: 0 !important;
	line-height: 1.4 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   LISTS (Experience, Education, Certifications)
   ────────────────────────────────────────────────────────────────────────── */

.rt-profile-form__list {
	display: flex !important;
	flex-direction: column !important;
	gap: 20px !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Note: selectors prefixed with .rt-profile-form to beat the universal
   `.rt-profile-form li { padding: 0 !important }` reset (higher specificity) */
.rt-profile-form .rt-profile-form__list-item {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	position: relative !important;
	padding-left: 22px !important;
	margin: 0 !important;
}

/* Timeline dot - aligned with title */
.rt-profile-form .rt-profile-form__list-item::before {
	content: '' !important;
	position: absolute !important;
	left: 0 !important;
	top: 6px !important;
	width: 7px !important;
	height: 7px !important;
	border-radius: 50% !important;
	background: #111 !important;
	z-index: 1 !important;
}

/* Timeline connecting line - links dots vertically (not on last item) */
.rt-profile-form .rt-profile-form__list-item:not(:last-child)::after {
	content: '' !important;
	position: absolute !important;
	left: 3px !important;
	top: 13px !important;
	bottom: -22px !important;
	width: 1px !important;
	background: #d9d9d9 !important;
	z-index: 0 !important;
}

.rt-profile-form__item-title {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #111 !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.rt-profile-form__item-meta {
	font-size: 13px !important;
	color: #999 !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ENDORSEMENTS LIST
   ────────────────────────────────────────────────────────────────────────── */

.rt-profile-form__endorsements-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.rt-profile-form__endorsement-item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.rt-profile-form__endorsement-info {
	flex: 1;
}

.rt-profile-form__endorsement-title {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #111 !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.rt-profile-form__endorsement-count {
	font-size: 13px !important;
	color: #999 !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Add Endorsement Button */
.rt-profile-form__add-btn {
	width: 30px !important;
	height: 30px !important;
	aspect-ratio: 1 / 1 !important;
	padding: 0 !important;
	border-radius: 30px !important;
	border: none !important;
	background: transparent !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: opacity 150ms !important;
	flex-shrink: 0 !important;
}

.rt-profile-form__add-btn:hover {
	opacity: 0.8 !important;
}

.rt-profile-form__add-btn svg {
	width: 30px !important;
	height: 30px !important;
	display: block !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.rt-profile-form__section-title {
		font-size: 16px;
	}

	.rt-profile-form__avatar {
		width: 120px !important;
		height: 120px !important;
	}

	.rt-profile-form__avatar-wrapper {
		margin-top: -66px !important;
	}

	.rt-profile-form__name {
		font-size: 18px !important;
	}
}

@media (max-width: 768px) {
	.rt-profile-form__cover {
		height: 180px;
	}

	.rt-profile-form__header-content {
		padding: 12px 20px 20px 20px !important;
		gap: 14px !important;
	}

	.rt-profile-form__header-main {
		gap: 16px !important;
	}

	.rt-profile-form__avatar {
		width: 100px !important;
		height: 100px !important;
		border-width: 3px !important;
	}

	.rt-profile-form__avatar-wrapper {
		margin-top: -58px !important;
	}

	.rt-profile-form__name {
		font-size: 17px !important;
	}

	.rt-profile-form__meta {
		font-size: 13px !important;
		gap: 6px !important;
	}

	.rt-profile-form__section {
		padding: 20px !important;
	}

	.rt-profile-form__section-title {
		font-size: 16px;
	}

	.rt-profile-form__tags {
		gap: 6px;
	}

	.rt-profile-form__tag {
		padding: 5px 10px;
		font-size: 12px;
	}
}

@media (max-width: 480px) {
	.rt-profile-form__cover {
		height: 130px;
	}

	.rt-profile-form__header-content {
		padding: 10px 16px 16px 16px !important;
		gap: 12px !important;
	}

	/* Stack avatar over the info so the role/company line has full width. */
	.rt-profile-form__header-main {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 10px !important;
	}

	.rt-profile-form__header-info {
		width: 100% !important;
	}

	.rt-profile-form__avatar {
		width: 84px !important;
		height: 84px !important;
		border-width: 3px !important;
	}

	.rt-profile-form__avatar-wrapper {
		margin-top: -48px !important;
	}

	.rt-profile-form__name {
		font-size: 16px !important;
	}

	.rt-profile-form__meta,
	.rt-profile-form__location-contact {
		font-size: 13px !important;
		gap: 6px !important;
	}

	/* Action buttons wrap and share the row on small screens. */
	.rt-profile-form__actions {
		width: 100% !important;
		flex-wrap: wrap !important;
	}

	.rt-profile-form__actions .rt-profile-form__btn {
		flex: 1 1 auto !important;
	}

	/* Keep the options menu clear of the name on phones. */
	.rt-profile-form__header-menu {
		top: 10px !important;
		right: 12px !important;
	}

	.rt-profile-form__section {
		padding: 16px !important;
	}

	.rt-profile-form__section-title {
		font-size: 15px;
	}

	.rt-profile-form__section-text {
		font-size: 13px;
	}

	.rt-profile-form__item-title {
		font-size: 13px;
	}

	.rt-profile-form__item-meta {
		font-size: 12px;
	}
}

/* ──────────────────────────────────────────────────────────────────────────
   INLINE EDIT MODE
   ────────────────────────────────────────────────────────────────────────── */

/* Section header actions (edit pencil + add button) */
.rt-profile-form__section-actions {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin-left: auto !important;
}

/* Edit pencil button mirrors the add button (SVG self-contained) */
.rt-profile-form__edit-btn {
	width: 30px !important;
	height: 30px !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	transition: opacity 150ms !important;
}

.rt-profile-form__edit-btn:hover {
	opacity: 0.8 !important;
}

.rt-profile-form__edit-btn svg {
	width: 30px !important;
	height: 30px !important;
	display: block !important;
}

/* Edit form container */
.rt-profile-form__edit {
	display: flex !important;
	flex-direction: column !important;
	gap: 14px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.rt-profile-form__edit[hidden] {
	display: none !important;
}

/* Fields & labels */
.rt-profile-form__field {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
}

.rt-profile-form__label {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: #555 !important;
	line-height: 1.3 !important;
}

/* Inputs / selects / textarea */
.rt-profile-form__input {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 9px 12px !important;
	border: 1px solid #d9d9d9 !important;
	border-radius: 8px !important;
	background: #fff !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 14px !important;
	line-height: 1.3 !important;
	color: #111 !important;
}

.rt-profile-form__input:focus {
	outline: none !important;
	border-color: #558AF5 !important;
	box-shadow: 0 0 0 3px rgba(85, 138, 245, 0.15) !important;
}

.rt-profile-form__textarea {
	resize: vertical !important;
	min-height: 96px !important;
}

/* Two-column details grid */
.rt-profile-form__grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 14px !important;
}

.rt-profile-form__field--full {
	grid-column: 1 / -1 !important;
}

/* Expertise checkbox grid */
.rt-profile-form__checks {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
	gap: 8px 16px !important;
}

.rt-profile-form__check {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 14px !important;
	color: #111 !important;
	cursor: pointer !important;
	line-height: 1.3 !important;
}

.rt-profile-form__check input {
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
	accent-color: #558AF5 !important;
}

/* Radio buttons */
.rt-profile-form__radios {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}

.rt-profile-form__radio-label {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 14px !important;
	color: #111 !important;
	cursor: pointer !important;
	line-height: 1.3 !important;
}

.rt-profile-form__radio {
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
	accent-color: #558AF5 !important;
	cursor: pointer !important;
}

/* Repeating rows */
.rt-profile-form__rows {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}

.rt-profile-form__row,
.rt-profile-form__exp-row {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	padding: 14px 40px 14px 14px !important;
	border: 1px solid #ececec !important;
	border-radius: 10px !important;
	background: #fafafa !important;
}

.rt-profile-form__row {
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
}

.rt-profile-form__row .rt-profile-form__input {
	flex: 1 1 160px !important;
}

.rt-profile-form__input--count {
	flex: 0 0 90px !important;
}

/* Remove-row button */
.rt-profile-form__row-remove {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	width: 24px !important;
	height: 24px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: #efefef !important;
	color: #666 !important;
	font-size: 18px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.rt-profile-form__row-remove:hover {
	background: #e0e0e0 !important;
	color: #111 !important;
}

/* Date pair */
.rt-profile-form__date-group {
	display: flex !important;
	gap: 8px !important;
}

.rt-profile-form__input--month {
	flex: 1 1 60% !important;
}

.rt-profile-form__input--year {
	flex: 1 1 40% !important;
}

/* Add-row button */
.rt-profile-form__add-row {
	align-self: flex-start !important;
	padding: 8px 14px !important;
	border: 1px dashed #c4c4c4 !important;
	border-radius: 8px !important;
	background: #fff !important;
	color: #558AF5 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
}

.rt-profile-form__add-row:hover {
	border-color: #558AF5 !important;
	background: rgba(85, 138, 245, 0.05) !important;
}

/* Save / Cancel row */
.rt-profile-form__edit-actions {
	display: flex !important;
	justify-content: flex-end !important;
	gap: 10px !important;
	margin-top: 2px !important;
}

.rt-profile-form__edit--error::after {
	content: 'Something went wrong. Please try again.';
	display: block;
	color: #dc2626;
	font-size: 13px;
	margin-top: 6px;
}

.rt-profile-form__edit-error-message {
	padding: 10px 12px !important;
	background: #fef2f2 !important;
	border: 1px solid #fecaca !important;
	border-radius: 8px !important;
	color: #dc2626 !important;
	font-size: 13px !important;
	margin-bottom: 16px !important;
	display: block !important;
}

.rt-profile-form__edit-error-message[hidden] {
	display: none !important;
}

/* select2 container fits the field width */
.rt-profile-form .select2-container {
	width: 100% !important;
}

.rt-profile-form .select2-container--default .select2-selection--single {
	height: 38px !important;
	border: 1px solid #d9d9d9 !important;
	border-radius: 8px !important;
	display: flex !important;
	align-items: center !important;
}

.rt-profile-form .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 36px !important;
	padding-left: 12px !important;
	color: #111 !important;
}

.rt-profile-form .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 36px !important;
}

@media (max-width: 640px) {
	.rt-profile-form__grid {
		grid-template-columns: 1fr !important;
	}
}


/* ──────────────────────────────────────────────────────────────────────────
   CONNECT BUTTON STATES
   ────────────────────────────────────────────────────────────────────────── */

/* pending_sent — request we sent, awaiting response — outline style */
.rt-profile-form__connect--pending,
.rt-profile-form__connect--pending_sent {
	background: #fff !important;
	color: #558AF5 !important;
	border: 1px solid #558AF5 !important;
}

/* pending_incoming — they requested us; "Approve request" call-to-action keeps
   the solid primary style inherited from rt-profile-form__btn--primary. */

/* friends/connected — muted, non-actionable */
.rt-profile-form__connect--friends {
	background: #eef3fe !important;
	color: #558AF5 !important;
	border: 1px solid transparent !important;
	cursor: default !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   MESSAGE MODAL
   ────────────────────────────────────────────────────────────────────────── */

.rt-profile-form__modal {
	position: fixed !important;
	inset: 0 !important;
	z-index: 10000 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 20px !important;
}

.rt-profile-form__modal[hidden] {
	display: none !important;
}

.rt-profile-form__modal-backdrop {
	position: absolute !important;
	inset: 0 !important;
	background: rgba(0, 0, 0, 0.45) !important;
}

.rt-profile-form__modal-dialog {
	position: relative !important;
	z-index: 1 !important;
	width: 100% !important;
	max-width: 480px !important;
	background: #fff !important;
	border-radius: 12px !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25) !important;
	padding: 20px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 14px !important;
}

.rt-profile-form__modal-head {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
}

.rt-profile-form__modal-title {
	font-size: 16px !important;
	font-weight: 600 !important;
	color: #111 !important;
	margin: 0 !important;
	line-height: 1.3 !important;
}

.rt-profile-form__modal-close {
	width: 30px !important;
	height: 30px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: #f0f0f2 !important;
	color: #555 !important;
	font-size: 20px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
}

.rt-profile-form__modal-close:hover {
	background: #e4e4e7 !important;
	color: #111 !important;
}

.rt-profile-form__modal-error {
	color: #dc2626 !important;
	font-size: 13px !important;
	margin: 0 !important;
}

.rt-profile-form__modal-error[hidden] {
	display: none !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   PHOTO UPLOAD (avatar + cover)
   ────────────────────────────────────────────────────────────────────────── */

/* Camera overlays are hidden until the pen toggles photo-edit mode. */
.rt-profile-form__photo-upload {
	display: none !important;
}

.rt-profile-form__header-wrapper--photo-edit .rt-profile-form__photo-upload {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	cursor: pointer !important;
	margin-top: -50px !important;
}

/* Cover overlay — centered chip over the cover image. */
.rt-profile-form__photo-upload--cover {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	padding: 10px 16px !important;
	border: none !important;
	border-radius: 8px !important;
	background: rgba(0, 0, 0, 0.55) !important;
	color: #fff !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	z-index: 4 !important;
}

.rt-profile-form__photo-upload--cover:hover {
	background: rgba(0, 0, 0, 0.7) !important;
}

.rt-profile-form__photo-upload--cover svg {
	display: block !important;
}

/* Avatar overlay — camera button bottom-right of the avatar. */
.rt-profile-form__photo-upload--avatar {
	position: absolute !important;
	right: 4px !important;
	bottom: 4px !important;
	width: 38px !important;
	height: 38px !important;
	padding: 0 !important;
	border: 3px solid #fff !important;
	border-radius: 50% !important;
	background: #558AF5 !important;
	color: #fff !important;
	z-index: 3 !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

.rt-profile-form__photo-upload--avatar:hover {
	background: #4472d6 !important;
}

/* Dim the images slightly while in photo-edit mode to signal interactivity. */
.rt-profile-form__header-wrapper--photo-edit .rt-profile-form__cover-image,
.rt-profile-form__header-wrapper--photo-edit .rt-profile-form__avatar {
	filter: brightness(0.85) !important;
}

/* Uploading state — soften + block pointer while the request is in flight. */
.rt-profile-form__header-wrapper--uploading {
	opacity: 0.85 !important;
	pointer-events: none !important;
}

.rt-profile-form__photo-input {
	display: none !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   AVATAR CROPPER + COVER REPOSITION
   ────────────────────────────────────────────────────────────────────────── */

.rt-profile-form__cropper-dialog {
	max-width: 360px !important;
	align-items: center !important;
}

/* Square crop stage with a circular mask ring */
.rt-profile-form__cropper-stage {
	position: relative !important;
	width: 280px !important;
	height: 280px !important;
	max-width: 100% !important;
	margin: 0 auto !important;
	overflow: hidden !important;
	border-radius: 8px !important;
	background: #1d2025 !important;
	touch-action: none !important;
	cursor: grab !important;
	align-self: center !important;
}

.rt-profile-form__cropper-stage:active {
	cursor: grabbing !important;
}

.rt-profile-form__cropper-img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	max-width: none !important;
	user-select: none !important;
	-webkit-user-drag: none !important;
	pointer-events: none !important;
}

/* Circular overlay that shows the crop boundary */
.rt-profile-form__cropper-ring {
	position: absolute !important;
	inset: 0 !important;
	pointer-events: none !important;
	border-radius: 50% !important;
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5) !important;
}

.rt-profile-form__cropper-zoom {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	width: 100% !important;
	max-width: 280px !important;
	margin: 4px auto 0 auto !important;
}

.rt-profile-form__cropper-zoom input[type="range"] {
	flex: 1 !important;
	accent-color: #558AF5 !important;
	cursor: pointer !important;
}

.rt-profile-form__cropper-zoom-icon {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #555 !important;
	width: 14px !important;
	text-align: center !important;
	line-height: 1 !important;
}

/* Cover image is draggable (top↔bottom) while in photo-edit mode */
.rt-profile-form__header-wrapper--photo-edit .rt-profile-form__cover-image {
	cursor: ns-resize !important;
	touch-action: none !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ENDORSEMENTS (skill list + endorse button)
   ────────────────────────────────────────────────────────────────────────── */

.rt-profile-form__endorse-list {
	display: flex !important;
	flex-direction: column !important;
	gap: 20px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.rt-profile-form__endorse-item {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	padding: 0 0 18px 0 !important;
	border-bottom: 1px solid #f0f0f0 !important;
}

.rt-profile-form__endorse-item:last-child {
	border-bottom: none !important;
	padding-bottom: 0 !important;
}

.rt-profile-form__endorse-head {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
}

.rt-profile-form__endorse-skill {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: #111 !important;
	line-height: 1.3 !important;
	margin: 0 !important;
}

/* Endorse button — outline pill, fills when active */
.rt-profile-form__endorse-btn {
	flex-shrink: 0 !important;
	padding: 6px 16px !important;
	border-radius: 20px !important;
	border: 1px solid #558AF5 !important;
	background: #fff !important;
	color: #558AF5 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	cursor: pointer !important;
	transition: all 150ms ease !important;
}

.rt-profile-form__endorse-btn:hover {
	background: rgba(85, 138, 245, 0.08) !important;
}

.rt-profile-form__endorse-btn--active {
	background: #558AF5 !important;
	color: #fff !important;
}

.rt-profile-form__endorse-btn--active:hover {
	background: #4472d6 !important;
}

/* Recent endorser line */
.rt-profile-form__endorse-recent {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 13px !important;
	color: #666 !important;
	line-height: 1.4 !important;
	margin: 0 !important;
}

.rt-profile-form__endorse-recent[hidden] {
	display: none !important;
}

.rt-profile-form__endorse-avatar {
	width: 20px !important;
	height: 20px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	flex-shrink: 0 !important;
	background: #f0f0f0 !important;
}

.rt-profile-form__endorse-recent strong {
	color: #111 !important;
	font-weight: 600 !important;
}

/* Total line with person icon */
.rt-profile-form__endorse-total {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 13px !important;
	color: #888 !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	padding-bottom: 5px !important;
}

.rt-profile-form__endorse-person {
	color: #888 !important;
	flex-shrink: 0 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   RECOMMENDATIONS
   ────────────────────────────────────────────────────────────────────────── */

/* Recommend button (endorsements + recommendations headers) */
.rt-profile-form__recommend-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	flex-shrink: 0 !important;
	padding: 7px 14px !important;
	border-radius: 20px !important;
	border: 1px solid #558AF5 !important;
	background: #fff !important;
	color: #558AF5 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	transition: all 150ms ease !important;
}

/* The [hidden] attribute must beat the display:inline-flex !important above,
   so the button truly disappears once the viewer has recommended. */
.rt-profile-form__recommend-btn[hidden] {
	display: none !important;
}

.rt-profile-form__recommend-btn:hover {
	background: rgba(85, 138, 245, 0.08) !important;
}

.rt-profile-form__recommend-btn svg {
	flex-shrink: 0 !important;
}

/* Recommendation list */
.rt-profile-form__recommend-list {
	display: flex !important;
	flex-direction: column !important;
	gap: 20px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.rt-profile-form__recommend-item {
	display: flex !important;
	gap: 12px !important;
	padding: 0 0 18px 0 !important;
	border-bottom: 1px solid #f0f0f0 !important;
}

.rt-profile-form__recommend-item:last-child {
	border-bottom: none !important;
	padding-bottom: 0 !important;
}

.rt-profile-form__recommend-avatar {
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	flex-shrink: 0 !important;
	background: #f0f0f0 !important;
}

.rt-profile-form__recommend-body {
	flex: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 3px !important;
	min-width: 0 !important;
}

.rt-profile-form__recommend-top {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	flex-wrap: wrap !important;
}

.rt-profile-form__recommend-name {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #111 !important;
	margin: 0 !important;
}

.rt-profile-form__recommend-meta {
	font-size: 13px !important;
	color: #666 !important;
	margin: 0 !important;
}

.rt-profile-form__recommend-rel {
	font-size: 12px !important;
	color: #999 !important;
	margin: 0 !important;
}

.rt-profile-form__recommend-text {
	font-size: 14px !important;
	color: #444 !important;
	line-height: 1.6 !important;
	margin: 4px 0 0 0 !important;
}

.rt-profile-form__recommend-text p {
	margin: 0 0 8px 0 !important;
}

.rt-profile-form__recommend-empty {
	font-size: 13px !important;
	color: #999 !important;
	margin: 0 !important;
}

/* Stars (display) */
.rt-profile-form__stars {
	display: inline-flex !important;
	gap: 2px !important;
	align-items: center !important;
}

.rt-profile-form__star {
	color: #d6d6d6 !important;
}

.rt-profile-form__star--on {
	color: #f5b301 !important;
}

/* Star rating input (modal) */
.rt-profile-form__star-input {
	display: inline-flex !important;
	gap: 4px !important;
	align-items: center !important;
}

.rt-profile-form__star-btn {
	padding: 0 !important;
	border: none !important;
	background: none !important;
	cursor: pointer !important;
	color: #d6d6d6 !important;
	line-height: 0 !important;
	transition: color 100ms ease !important;
}

.rt-profile-form__star-btn--on {
	color: #f5b301 !important;
}

/* Recommendation card actions (edit / delete own) */
.rt-profile-form__recommend-actions {
	margin-left: auto !important;
	display: inline-flex !important;
	gap: 10px !important;
	flex-shrink: 0 !important;
}

.rt-profile-form__recommend-action {
	border: none !important;
	background: none !important;
	padding: 0 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #558AF5 !important;
	cursor: pointer !important;
}

.rt-profile-form__recommend-action:hover {
	text-decoration: underline !important;
}

.rt-profile-form__recommend-action--danger {
	color: #dc2626 !important;
}

/* "View all recommendations" link */
.rt-profile-form__recommend-viewall {
	align-self: flex-start !important;
	margin-top: 4px !important;
	padding: 0 !important;
	border: none !important;
	background: none !important;
	color: #558AF5 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
}

.rt-profile-form__recommend-viewall[hidden] {
	display: none !important;
}

.rt-profile-form__recommend-viewall:hover {
	text-decoration: underline !important;
}

/* View-all modal: scrollable list + pager */
.rt-profile-form__recommend-all-dialog {
	max-width: 560px !important;
	max-height: 80vh !important;
	overflow: hidden !important;
}

.rt-profile-form__recommend-all-dialog .rt-profile-form__recommend-list {
	overflow-y: auto !important;
	max-height: 60vh !important;
	padding-right: 4px !important;
}

.rt-profile-form__recommend-pager {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 14px !important;
	margin-top: 4px !important;
}

.rt-profile-form__recommend-pageinfo {
	font-size: 13px !important;
	color: #666 !important;
	min-width: 48px !important;
	text-align: center !important;
}

.rt-profile-form__recommend-pager .rt-profile-form__btn[disabled] {
	opacity: 0.5 !important;
	cursor: default !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   LOCATION FIELD (UM User Locations + Google Maps)
   ────────────────────────────────────────────────────────────────────────── */

.rt-profile-form__location-map {
	width: 100% !important;
	height: 240px !important;
	margin-top: 10px !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	background: #eef1f5 !important;
	border: 1px solid #e2e2e2 !important;
}

/* Google controls inside the map shouldn't inherit the form resets */
.rt-profile-form__location-map img {
	max-width: none !important;
}

.rt-profile-form__field-hint {
	font-size: 12px !important;
	color: #999 !important;
	margin: 8px 0 0 0 !important;
	line-height: 1.4 !important;
}

/* Google Places autocomplete dropdown floats above the modal/overlay */
.pac-container {
	z-index: 100000 !important;
}