/* MeetEm Profile Tweaks
   ------------------------------------------------------------------
   1. Inbox indicator — bigger, filled, and it announces itself when
      there is unread mail, so a free member has a reason to upgrade
      and an interviewed member notices they have been written to.
   2. Albums tab hidden in the profile Media section.
   3. Photo / video buttons on the profile feed composer.
   4. Profile header message button carrying the homepage hero button's
      gradient, so the primary action stops blending into the flat purple.
   5. A real progress bar while a profile photo or video uploads.
*/

/* ── 1. Inbox indicator ─────────────────────────────────────────── */

.wpee-notification-links .meetem-pt-mail > a > .fa-envelope {
	font-size: 1.75em;
	line-height: 1;
	vertical-align: middle;
}

/* Give the enlarged icon its own room so it does not shove the row about. */
.wpee-notification-links .meetem-pt-mail > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.6em;
	min-height: 2.6em;
}

/* Unread state: solid pill instead of a thin outline. */
.wpee-notification-links .meetem-pt-mail.has-unread > a {
	background: #7c3aed;
	border-radius: 999px;
	box-shadow: 0 0 0 0 rgba( 124, 58, 237, 0.55 );
	animation: meetem-pt-mail-pulse 2.4s ease-out infinite;
}

.wpee-notification-links .meetem-pt-mail.has-unread > a > .fa-envelope {
	color: #fff;
}

.wpee-notification-links .meetem-pt-mail.has-unread > a > .wpee-count-num {
	background: #ef4444;
	color: #fff;
	font-weight: 700;
	font-size: 0.78rem;
	min-width: 1.35rem;
	height: 1.35rem;
	line-height: 1.35rem;
	border-radius: 999px;
	border: 2px solid #fff;
	box-sizing: content-box;
}

@keyframes meetem-pt-mail-pulse {
	0%   { box-shadow: 0 0 0 0 rgba( 124, 58, 237, 0.55 ); }
	70%  { box-shadow: 0 0 0 12px rgba( 124, 58, 237, 0 ); }
	100% { box-shadow: 0 0 0 0 rgba( 124, 58, 237, 0 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.wpee-notification-links .meetem-pt-mail.has-unread > a {
		animation: none;
	}
}

/* ── 2. Retired media tabs (Albums, Audios) ─────────────────────── */

/* Hide before paint where :has() is available, so the tab never flashes.
   The JS below adds .meetem-pt-hidden-tab as the fallback for older browsers. */
.profile-section-tab li:has( > a[href*="/media/albums"] ),
.profile-section-tab li:has( > a[href*="/media/audios"] ),
.profile-section-tab .meetem-pt-hidden-tab {
	display: none !important;
}

/* ── 3. Feed composer media buttons ─────────────────────────────── */

/* .form-group is already a wrapping flex row (display:flex from the parent
   theme, flex-wrap:wrap from the child) holding the textarea at flex 1 1 100%
   and Post at margin-left:auto. So the buttons only need to be inserted before
   Post to land on its row at the left; the one addition is vertical centring,
   since without it the default `stretch` pulls the button wrapper taller than
   the 44px buttons inside it. */
.profle-status form.wpee-status-form .form-group {
	align-items: center;
}

/* Sizes deliberately mirror the theme's Post button (44px tall, 14px text,
   5px radius) so the row reads as one set of controls. */
.profle-status form.wpee-status-form .meetem-pt-compose {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 12px 0 16px;
}

.profle-status form.wpee-status-form .meetem-pt-compose-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: auto;
	min-width: 0;
	height: 44px;
	padding: 0 18px;
	margin: 0;
	border: 1px solid var( --color-primary, #8224e3 );
	border-radius: 5px;
	background: transparent;
	color: var( --color-primary, #8224e3 );
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.profle-status form.wpee-status-form .meetem-pt-compose-btn:hover,
.profle-status form.wpee-status-form .meetem-pt-compose-btn:focus-visible {
	background: var( --color-primary, #8224e3 );
	color: #fff;
}

.profle-status form.wpee-status-form .meetem-pt-compose-btn[disabled] {
	opacity: 0.5;
	cursor: default;
	background: transparent;
	color: var( --color-primary, #8224e3 );
}

.profle-status form.wpee-status-form .meetem-pt-compose-btn .fa {
	font-size: 16px;
	line-height: 1;
}

.profle-status form.wpee-status-form .meetem-pt-compose input[type="file"] {
	display: none;
}

/* Own row under the buttons: flex-basis 100% wraps it inside .form-group. It is
   always in the DOM, so the spacing lives on the children — while both are
   hidden the strip is zero-height and costs nothing. */
.profle-status form.wpee-status-form .meetem-pt-feedback {
	flex: 1 1 100%;
	width: 100%;
	margin: 0 0 0 16px;
}

.meetem-pt-status {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: var( --color-primary, #8224e3 );
}

.meetem-pt-status.is-error {
	color: #b91c1c;
}

.meetem-pt-progress {
	margin-top: 10px;
	height: 6px;
	border-radius: 999px;
	background: rgba( 130, 36, 227, 0.15 );
	overflow: hidden;
}

.meetem-pt-progress-bar {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var( --color-primary, #8224e3 );
	transition: width 0.2s ease;
}

.meetem-pt-hidden {
	display: none !important;
}

/* Narrow screens: the avatar column collapses, so drop the left offsets and
   let the three buttons share the row evenly. */
@media ( max-width: 575px ) {
	.profle-status form.wpee-status-form .meetem-pt-compose {
		margin: 12px 0 0;
		gap: 6px;
	}

	.profle-status form.wpee-status-form .meetem-pt-compose-btn {
		padding: 0 12px;
	}

	.profle-status form.wpee-status-form .meetem-pt-feedback {
		margin-left: 0;
	}
}

/* ── 4. Profile header message button ───────────────────────────────
   Howard picked the colour off the homepage hero button ("Watch our
   Exclusive Interviews Free!"), so this is that button's gradient copied
   verbatim from its Elementor rule rather than something approximate:

       .elementor-element-dd2127f .elementor-button {
           background-image: linear-gradient( 331deg, #66288A 0%, #AE1ABB 100% );
       }

   Same angle, same stops. If the homepage button is ever restyled, this is
   the line to bring back into step with it.

   Scoped to .wpee-profile-cta-container, which is only ever the profile
   header — the member cards on the members page keep their own colour, so
   the gradient reads as "the action on this page" rather than decoration
   applied to every button. Covers both labels the button can carry:
   "View & Send Messages" on your own profile and "Say Hello" on someone
   else's.

   The doubled class is deliberate. Additional CSS in the Customizer already
   styles this button through
   `.wpee-modern-cta-container > button.wpee-modern-purple-btn.wpee-video-modal-card-trigger`,
   which is four classes and an element; repeating one class here outweighs
   it without resorting to !important, so the Customizer rule keeps its
   padding and the colour comes from here. */

.wpee-profile-cta-container.wpee-profile-cta-container > button.wpee-modern-purple-btn {
	background-color: transparent;
	background-image: linear-gradient( 331deg, #66288a 0%, #ae1abb 100% );
	border-color: transparent;
	box-shadow: 0 6px 18px rgba( 174, 26, 187, 0.35 );
	font-size: 15px;
	letter-spacing: 0.01em;
}

.wpee-profile-cta-container.wpee-profile-cta-container > button.wpee-modern-purple-btn:hover {
	background-color: transparent;
	background-image: linear-gradient( 331deg, #57216f 0%, #9814a2 100% );
	border-color: transparent;
	box-shadow: 0 10px 26px rgba( 174, 26, 187, 0.48 );
}

.wpee-profile-cta-container.wpee-profile-cta-container > button.wpee-modern-purple-btn:active {
	box-shadow: 0 4px 12px rgba( 174, 26, 187, 0.4 );
}

.wpee-profile-cta-container.wpee-profile-cta-container > button.wpee-modern-purple-btn:focus-visible {
	outline: 3px solid rgba( 174, 26, 187, 0.5 );
	outline-offset: 2px;
}

/* Size. The vendor pins this button to the header's top-right corner with
   `.wpee-profile-cta-container { position:absolute; width:30%; right:0 }` and
   a `width:100%` button, so it was 414px wide whatever it said — fine for
   "Message & MeetEm Now", a long empty bar once it became "Say Hello", and
   wider than the Add Friend / Block buttons it sits under.

   Desktop: as wide as its label, still right-aligned under those buttons. The
   padding needs a third class — the Customizer sets it through
   `.wpee-modern-cta-container > button.wpee-modern-purple-btn.wpee-video-modal-card-trigger`
   (0,3,1), and Customizer CSS prints after this file, so a tie would lose.

   Tablet and phone (<=991px, where the theme turns the header into a centred
   column): out of that corner, which is where the profile photo sits, and into
   the flow below the name. It already follows the name in the markup, ahead of
   Add Friend / Block, so no reordering is needed. Full width on phones to match
   those two buttons there. */
.wpee-profile-cta-container.wpee-profile-cta-container {
	width: auto;
}

.wpee-profile-cta-container.wpee-profile-cta-container.wpee-profile-cta-container > button.wpee-modern-purple-btn {
	width: auto;
	min-width: 150px;
	padding: 8px 24px;
	white-space: nowrap;
}

@media screen and ( max-width: 991px ) {
	.wpee-profile-cta-container.wpee-profile-cta-container {
		position: static;
		width: 100%;
		display: flex;
		justify-content: center;
		margin: 16px 0 0;
	}
}

@media screen and ( max-width: 767px ) {
	.wpee-profile-cta-container.wpee-profile-cta-container.wpee-profile-cta-container > button.wpee-modern-purple-btn {
		width: 100%;
		padding: 12px 24px;
	}
}

/* ── 5. Edit profile — upload progress ──────────────────────────────
   The profile form is a plain multipart POST, so the only feedback a
   member got while a video went up was the browser's tab spinner. On a
   200 MB clip that is a long time to look at a page that appears to have
   done nothing, and the usual reaction is to press Update again. */

.meetem-pt-upload {
	margin: 14px 0 0;
	padding: 14px 16px;
	border: 1px solid rgba( 130, 36, 227, 0.22 );
	border-radius: 10px;
	background: rgba( 130, 36, 227, 0.05 );
}

.meetem-pt-upload-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 10px;
}

.meetem-pt-upload-label {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: inherit;
}

.meetem-pt-upload-pct {
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var( --color-primary, #8224e3 );
}

.meetem-pt-upload-track {
	height: 8px;
	border-radius: 999px;
	background: rgba( 130, 36, 227, 0.15 );
	overflow: hidden;
}

.meetem-pt-upload-fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: linear-gradient( 90deg, #8224e3 0%, #df1756 100% );
	transition: width 0.2s ease;
}

/* Once the last byte is up, the server still has to store the file and hand
   it to Bunny. A determinate bar would sit at 100% looking stuck, so it
   switches to a moving stripe for that stretch. */
.meetem-pt-upload.is-processing .meetem-pt-upload-fill {
	width: 100% !important;
	background-image: repeating-linear-gradient(
		-45deg,
		rgba( 255, 255, 255, 0.35 ) 0 10px,
		rgba( 255, 255, 255, 0 ) 10px 20px
	), linear-gradient( 90deg, #8224e3 0%, #df1756 100% );
	background-size: 28px 100%, 100% 100%;
	animation: meetem-pt-upload-stripe 0.9s linear infinite;
}

.meetem-pt-upload-note {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.45;
	opacity: 0.8;
}

.meetem-pt-upload.is-error {
	border-color: rgba( 223, 23, 86, 0.35 );
	background: rgba( 223, 23, 86, 0.06 );
}

.meetem-pt-upload.is-error .meetem-pt-upload-fill {
	background: #df1756;
	animation: none;
}

@keyframes meetem-pt-upload-stripe {
	from { background-position: 0 0, 0 0; }
	to   { background-position: 28px 0, 0 0; }
}

@media ( prefers-reduced-motion: reduce ) {
	.meetem-pt-upload.is-processing .meetem-pt-upload-fill {
		animation: none;
	}
}

/* ── Full bio in the User Details card ───────────────────────
   MeetEm_PT_Profile_Details appends these rows to the card's own <ul>, so they
   inherit its type, background and spacing. The card lays each row out as a
   flex line where the label is a <span> and the value is a bare text node; ours
   are two spans, which the card's `li span { flex: 1 1 0% }` would otherwise
   split down the middle. These rules put them back in the card's own shape —
   grey label, dark value, value to the right — and give free text a full line
   of its own. */

.profile-user-details .meetem-pt-details-heading {
	margin-top: 6px;
	padding-top: 14px;
	border-top: 1px solid rgba( 0, 0, 0, 0.08 );
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.profile-user-details .meetem-pt-detail {
	line-height: 1.45;
}

.profile-user-details .meetem-pt-detail .meetem-pt-detail-label {
	flex: 0 0 auto;
	max-width: 60%;
	font-weight: 400;
}

.profile-user-details .meetem-pt-detail .meetem-pt-detail-value {
	flex: 1 1 0%;
	text-align: right;
	color: var( --color-heading );
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Free text is a paragraph, not a value sharing a line with its label.
   !important because the theme sets the row to flex through a five-class
   selector (.profile-content-inner .profile-activity-sidebar .wpee-block
   .wpee-block-content .profile-detail-list li) that no sane selector here can
   outrank; matching its specificity would leave the two tied on load order. */
.profile-user-details .meetem-pt-detail-block {
	display: block !important;
}

.profile-user-details .meetem-pt-detail-block .meetem-pt-detail-label {
	display: block;
	max-width: none;
}

.profile-user-details .meetem-pt-detail-block .meetem-pt-detail-value {
	display: block;
	margin-top: 4px;
	text-align: left;
}

/* ── Inbox rows open on a tap anywhere ─────────────────────────────
   The only way into a message was the subject text itself: an inline link a
   couple of words wide sitting in the right-hand half of the row. On a phone
   that is a target well under the 44px Apple and Google both ask for, so a tap
   that lands a few pixels off does nothing at all and the row looks broken.
   MeetEm_PT_Inbox makes the whole row the target; this gives it a cursor, a
   pressed state, and — on its own, with JS off — a subject link big enough to
   hit. */

form.message-block-inbox .dsp_vertical_scrollbar {
	cursor: pointer;
	-webkit-tap-highlight-color: rgba( 130, 36, 227, 0.08 );
	transition: background-color 0.15s ease;
}

form.message-block-inbox .dsp_vertical_scrollbar.is-opening {
	background-color: rgba( 130, 36, 227, 0.06 );
}

/* The sender name and photo still go to the profile, so they must not look
   like part of the row-wide target. */
form.message-block-inbox .dsp_vertical_scrollbar .wpee-received-details a {
	position: relative;
	z-index: 2;
}

form.message-block-inbox .dsp_vertical_scrollbar li:last-child a {
	display: block;
	padding: 11px 0;
	min-height: 44px;
}

@media ( max-width: 767px ) {
	/* Rows are stacked here, so the subject gets the full width and enough
	   height to be a comfortable target on its own. */
	form.message-block-inbox .dsp_vertical_scrollbar {
		padding: 16px;
	}

	form.message-block-inbox .dsp_vertical_scrollbar li:last-child a {
		padding: 12px 0;
		font-size: 15px;
	}
}