/**
 * MeetEm Signup.
 *
 * Two jobs: take the confirm fields off the register form, and make the price
 * readable where it matters -- above the register form, and over the monthly
 * plan on the membership page.
 *
 * wpdating-custom-addons-howard's stylesheet loads after this one, so the rules
 * that have to win over vendor or theme styling say so. The brand purple is
 * #8224e3, kept behind --color-primary the way meetem-profile-tweaks does, and
 * the "limited time" accent is the pink the site already uses in the hero
 * gradient.
 */

/* ---------------------------------------------------------------------------
   The fields that are gone
   --------------------------------------------------------------------------- */

#wpee-registration-form .form-group.meetem-signup-off {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   The price line above the register form

   Howard's four lines, each on its own row:

       100% Free to Register & Browse
       Join after to Message
       $59.99 Limited Time $39.99mo.
       Cancel Anytime
   --------------------------------------------------------------------------- */

.meetem-signup-intro {
	display: block;
	margin: 0 0 14px;
	padding: 10px 14px;
	border-left: 3px solid var( --color-primary, #8224e3 );
	border-radius: 4px;
	background: #f6eefd;
	color: #3a2b4d;
	font-size: 14px;
	line-height: 1.45;
	text-align: center;
}

.meetem-signup-intro-row {
	display: block;
}

.meetem-signup-intro-free {
	font-size: 16px;
	font-weight: 800;
	color: #66288a;
}

.meetem-signup-intro-then {
	font-weight: 600;
}

.meetem-signup-intro-offer {
	margin-top: 2px;
	font-size: 15px;
	font-weight: 700;
	color: #66288a;
}

/* The old price. <s> already draws the line; this keeps it from competing with
   the price actually being charged. */
.meetem-signup-intro-offer .meetem-signup-was {
	opacity: 0.6;
	font-weight: 600;
}

.meetem-signup-intro-offer .meetem-signup-now {
	white-space: nowrap;
}

.meetem-signup-intro-note {
	margin-top: 2px;
	opacity: 0.8;
}

/* ---------------------------------------------------------------------------
   "Limited time -- was USD 59.99" on a plan card
   --------------------------------------------------------------------------- */

/* Howard, 2026-10-22, on a screenshot of the card: "increase size and place
   under" with the old price circled. It was a small grey number trailing the
   badge on the same line, which is the one place a price comparison should not
   be made -- so the badge keeps its line and the old price drops under it at a
   size that can actually be read against the 26px it is being compared with. */
.wpee-plan-item .meetem-signup-cut {
	display: block;
	margin: 8px 0 0;
	line-height: 1.4;
	text-align: center;
}

.wpee-plan-item .meetem-signup-cut-tag {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 10px;
	background: #df1756;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.wpee-plan-item .meetem-signup-cut-was {
	display: block;
	margin: 6px 0 0;
	color: rgba(56, 40, 68, 0.62);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: line-through;
}

/* ---------------------------------------------------------------------------
   Upgrade Account — the membership cards
   ---------------------------------------------------------------------------
   Howard asked on 2026-10-14 to "make this page more attractive" and to repeat
   the Join page's card style here. This is vendor markup
   (wpee-plan-item-wrapper / wpee-plan-item), so it is restyled rather than
   rebuilt — same tokens as meetem-join-partner, written out because that
   stylesheet only loads on the Join page.
   --------------------------------------------------------------------------- */

/* The vendor sets flex-wrap on `.wpee-plan-item-wrapper.d-flex` and a
   33.33% width on the cards, both at two-class specificity, so these rules
   have to be written at the same weight to land. */
.wpee-plan-item-wrapper.d-flex {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpee-plan-item-wrapper.d-flex .wpee-plan-item {
	width: auto;
	display: flex;
	padding: 26px 22px;
	border: 1px solid #dcc8f5;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 6px 26px rgba(56, 40, 68, 0.12);
	text-align: center;
	/* The header band below bleeds to the card's edge with negative margins;
	   this is what rounds its top corners with the card. */
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
   The brand band across the top of each card

   Howard, 2026-10-22, on a screenshot of the One Month card: "can we use a
   background color to make more attractive similar to website color theme".

   The page these cards sit on is the site's lavender (#e2cdfa, sampled from
   that screenshot), so tinting the card itself lavender only greyed it: at a
   strength you could see, the card stopped having edges. The colour goes at
   the top instead, in the brand purple, carrying the plan icon and the plan
   name -- which is where a price card normally carries its colour anyway, and
   it leaves the list and the price on white where they stay easy to read.

   Hung on the two ELEMENTS rather than on "the first two list items", on
   purpose: a free plan's card starts with an extra (usually empty) list item
   for the "plan applied" message, so anything counting positions would paint
   the band in the wrong place on that one card.
   --------------------------------------------------------------------------- */

.wpee-plan-item-wrapper.d-flex .wpee-plan-item-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The gateway list item carries the button, the price and the badge, and it is
   the one that should absorb the spare height so every button lines up. */
.wpee-plan-item-wrapper.d-flex .wpee-plan-item-inner > li:last-child {
	margin-top: auto;
}

/* The band bleeds to the card's edges, so the list items it sits in must not
   add a margin of their own. */
.wpee-plan-item-wrapper.d-flex .wpee-plan-item-inner > li {
	margin: 0;
}

.wpee-plan-item-wrapper.d-flex .wpee-plan-image-wrap {
	margin: -26px -22px 0;
	padding: 24px 22px 12px;
	background: linear-gradient(180deg, #8224e3 0%, #9333ea 100%);
}

.wpee-plan-item-wrapper.d-flex .wpee-plan-image {
	width: 72px;
	height: 72px;
	border: 3px solid rgba(255, 255, 255, 0.92);
	border-radius: 14px;
	background: #fff;
	object-fit: cover;
}

.wpee-plan-item-wrapper.d-flex .wpee-plan-name {
	margin: 0 -22px 18px;
	padding: 0 22px 20px;
	background: #9333ea;
	color: #fff;
	font-size: 17px;
	font-weight: 700;
}

.wpee-plan-item-wrapper.d-flex .wpee-plan-desc {
	margin-bottom: 16px;
	color: rgba(56, 40, 68, 0.72);
	font-size: 14px;
	line-height: 1.55;
}

/* What's included, from meetem_signup_plan_features(). Ticked and left-aligned
   so three cards can be read down the column rather than across. */
.meetem-signup-features {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	text-align: left;
	color: rgba(56, 40, 68, 0.72);
	font-size: 14px;
	line-height: 1.5;
}

.meetem-signup-features li {
	position: relative;
	margin-bottom: 9px;
	padding-left: 24px;
}

.meetem-signup-features li:last-child {
	margin-bottom: 0;
}

.meetem-signup-features li::before {
	content: "";
	position: absolute;
	top: 6px;
	left: 4px;
	width: 10px;
	height: 6px;
	border-left: 2px solid #8224e3;
	border-bottom: 2px solid #8224e3;
	transform: rotate(-45deg);
}

/* The CCBill form: button first, then the price under it. */
.wpee-plan-item-wrapper.d-flex form[name="ccbill-upgrade"] p {
	margin: 0;
}

.wpee-plan-item-wrapper.d-flex form {
	margin-bottom: 0;
}

.wpee-plan-item-wrapper.d-flex .dspdp-btn,
.wpee-plan-item-wrapper.d-flex input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 46px;
	padding: 0 18px;
	border: 2px solid #8224e3;
	border-radius: 999px;
	background: #8224e3;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	white-space: normal;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.wpee-plan-item-wrapper.d-flex .dspdp-btn:hover,
.wpee-plan-item-wrapper.d-flex input[type="submit"]:hover {
	background: #780479;
	border-color: #780479;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(130, 36, 227, 0.24);
}

/* The price CCBill prints under its button. */
.wpee-plan-item-wrapper.d-flex form[name="ccbill-upgrade"] label {
	display: block;
	margin-top: 12px;
	color: #8224e3;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------------------
   Phone
   --------------------------------------------------------------------------- */

@media ( max-width: 600px ) {
	.meetem-signup-intro {
		padding: 9px 11px;
		font-size: 13px;
	}

	.meetem-signup-intro-free {
		font-size: 15px;
	}

	.meetem-signup-intro-offer {
		font-size: 14px;
	}
}


/* ---- the social-media permission, beside the Terms box ----
 * Built in the browser (the register form is vendor markup), so it needs its
 * own styling rather than inheriting a vendor form-group's. Laid out like the
 * Terms row above it: box on the left, wording beside it, note underneath.
 */

.meetem-signup-consent-group {
	display: block;
	width: 100%;
}

.meetem-signup-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
}

.meetem-signup-consent input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: 4px;
}

.meetem-signup-consent-label {
	display: block;
	font-weight: 600;
	line-height: 1.35;
}

.meetem-signup-consent-note {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	line-height: 1.45;
	opacity: 0.75;
}