/**
 * Paid Memberships Pro — dark-purple restyle to match the Emrul Kayes theme.
 *
 * Scoped to body[class*="pmpro-"] so it only touches PMPro pages (their body
 * carries classes like pmpro-checkout / pmpro-login / pmpro-levels /
 * pmpro-account / pmpro-variation_1) and never leaks into the rest of the site.
 *
 * Theme tokens: bg #0d0618 · card rgba(255,255,255,.02) · accent #8B5CF6 /
 * #C084FC · heading #f0edf8 · body #c8c0d8 / #a098b8 · border #8b5cf633.
 */

body[class*="pmpro-"] {
	background-color: #0d0618;
	color: #c8c0d8;
}

/* Clear the fixed site header and give the page room to breathe. */
body[class*="pmpro-"] .site-main {
	padding-top: 130px;
	padding-bottom: 90px;
}

/* Remove the default white "singular" article card; center the content. */
body[class*="pmpro-"] .site-main article,
body[class*="pmpro-"].singular .site-main article {
	background-color: transparent !important;
	max-width: 940px;
	margin: 0 auto;
	padding: 0 24px;
	box-shadow: none !important;
	border: 0 !important;
	border-radius: 0 !important;
}

/* Login / lost-password pages read better in a narrow column. */
body.pmpro-login .site-main article,
body.pmpro-lost-password .site-main article {
	max-width: 480px;
}

/* -------------------------------------------------------------------------
   Page title (e.g. "Membership Checkout", "Log In")
   ------------------------------------------------------------------------- */
body[class*="pmpro-"] .entry-header {
	text-align: center;
	margin-bottom: 32px;
}
body[class*="pmpro-"] .entry-title {
	color: #f0edf8;
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 800;
	line-height: 1.1;
}

/* Generic content typography. */
body[class*="pmpro-"] .entry-content h1,
body[class*="pmpro-"] .entry-content h2,
body[class*="pmpro-"] .entry-content h3,
body[class*="pmpro-"] .entry-content h4,
body[class*="pmpro-"] .entry-content legend {
	color: #f0edf8;
}
body[class*="pmpro-"] .entry-content a {
	color: #C084FC;
	text-decoration: none;
}
body[class*="pmpro-"] .entry-content a:hover {
	color: #8B5CF6;
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Cards / sections / tables
   Covers PMPro v3 (.pmpro_card, .pmpro_section) and legacy markup.
   ------------------------------------------------------------------------- */
/* Only PMPro's real "card" component (and account sections) become boxes. */
body[class*="pmpro-"] .pmpro_card,
body[class*="pmpro-"] #pmpro_account > div,
body[class*="pmpro-"] .pmpro_account-profile,
body[class*="pmpro-"] .pmpro_level {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid #8b5cf633;
	border-radius: 20px;
	color: #c8c0d8;
	padding: 28px 30px;
	margin-bottom: 24px;
}

/* Structural wrappers must NOT render as boxes — they were double/triple
   nesting the checkout. Keep them transparent; only .pmpro_card is the box. */
body[class*="pmpro-"] .pmpro,
body[class*="pmpro-"] .pmpro_section,
body[class*="pmpro-"] .pmpro_section_content,
body[class*="pmpro-"] .pmpro_card_content,
body[class*="pmpro-"] .pmpro_checkout > div,
body[class*="pmpro-"] fieldset.pmpro_form_fieldset,
body[class*="pmpro-"] .pmpro_form_fieldset {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
/* A little breathing room between stacked field groups. */
body[class*="pmpro-"] .pmpro_card fieldset.pmpro_form_fieldset + fieldset.pmpro_form_fieldset {
	margin-top: 24px !important;
}

/* --- Spacing clean-up: kill stray empty boxes and top/bottom gaps. --- */
body[class*="pmpro-"] .pmpro_message:empty,
body[class*="pmpro-"] .pmpro_card_actions:empty,
body[class*="pmpro-"] .pmpro_card_content:empty,
body[class*="pmpro-"] .pmpro_form_field:empty {
	display: none !important;
}
/* No stray top gap inside cards. */
body[class*="pmpro-"] .pmpro_card_content {
	padding-top: 0 !important;
}
body[class*="pmpro-"] .pmpro_card_content > *:first-child,
body[class*="pmpro-"] .pmpro_card_title {
	margin-top: 0 !important;
}
/* Secondary-link row inside a card (e.g. "Already have an account?"). */
body[class*="pmpro-"] .pmpro_card_actions {
	margin-top: 20px !important;
	padding-top: 18px !important;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
/* PMPro adds a large gutter between field rows — tighten it. */
body[class*="pmpro-"] .pmpro_form_fields,
body[class*="pmpro-"] .pmpro_cols-2 {
	row-gap: 18px !important;
}
body[class*="pmpro-"] .pmpro_form_field {
	margin-bottom: 0 !important;
}

/* PMPro cards default to display:flex, which indents the card title away from
   the body text. Force normal block flow and left-align the title so the
   heading lines up with the content beneath it. */
body[class*="pmpro-"] .pmpro_card {
	display: block !important;
}
body[class*="pmpro-"] .pmpro_card_title,
body[class*="pmpro-"] .pmpro_card > h2,
body[class*="pmpro-"] .pmpro_card > h3 {
	margin: 0 0 20px 0 !important;
	padding: 0 0 14px 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	text-align: left !important;
	width: auto !important;
}

body[class*="pmpro-"] .pmpro_card_title,
body[class*="pmpro-"] .pmpro_card_content h2,
body[class*="pmpro-"] .pmpro_checkout h2,
body[class*="pmpro-"] .pmpro_checkout h3,
body[class*="pmpro-"] .pmpro_form_fieldset legend,
body[class*="pmpro-"] legend {
	color: #f0edf8;
	font-weight: 700;
}

/* Tables (levels comparison, account history, invoices). */
body[class*="pmpro-"] table {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid #8b5cf633;
	border-radius: 16px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	width: 100%;
}
body[class*="pmpro-"] table th,
body[class*="pmpro-"] .pmpro table thead th {
	background: rgba(139, 92, 246, 0.12) !important;
	color: #f0edf8 !important;
	border: none !important;
	padding: 14px 18px !important;
	text-align: left;
}
body[class*="pmpro-"] table td,
body[class*="pmpro-"] .pmpro table tbody td {
	background: transparent !important;
	border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
	border-bottom: none !important;
	color: #c8c0d8 !important;
	padding: 16px 18px !important;
	vertical-align: middle;
}
body[class*="pmpro-"] table tbody tr:hover td {
	background: rgba(139, 92, 246, 0.05) !important;
}

/* -------------------------------------------------------------------------
   Levels (pricing) page — flatten the nested section/card wrappers so the
   table itself is the single clean pricing card.
   ------------------------------------------------------------------------- */
body.pmpro-levels .site-main article {
	max-width: 1080px;
}
body.pmpro-levels .pmpro,
body.pmpro-levels .pmpro_section,
body.pmpro-levels .pmpro_section_content,
body.pmpro-levels .pmpro_card,
body.pmpro-levels .pmpro_card_content,
body.pmpro-levels .pmpro_level_group {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
body.pmpro-levels .pmpro_levels_table {
	margin: 0 auto;
}
/* Level name + price cells read a touch larger. */
body.pmpro-levels .pmpro_levels_table td:first-child {
	font-weight: 700;
	color: #f0edf8;
	font-size: 17px;
}
body.pmpro-levels .pmpro_levels_table .pmpro_level-price,
body.pmpro-levels .pmpro_levels_table td:nth-child(2) {
	color: #C084FC;
	font-weight: 700;
}

/* -------------------------------------------------------------------------
   Form fields
   ------------------------------------------------------------------------- */
body[class*="pmpro-"] label,
body[class*="pmpro-"] .pmpro_form_label {
	color: #a098b8;
	font-weight: 600;
	display: block;
	margin-bottom: 6px;
}

body[class*="pmpro-"] input[type="text"],
body[class*="pmpro-"] input[type="email"],
body[class*="pmpro-"] input[type="password"],
body[class*="pmpro-"] input[type="tel"],
body[class*="pmpro-"] input[type="number"],
body[class*="pmpro-"] select,
body[class*="pmpro-"] textarea {
	width: 100%;
	background: rgba(0, 0, 0, 0.25) !important;
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 12px;
	padding: 13px 16px;
	color: #f0edf8 !important;
	font-size: 16px;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
body[class*="pmpro-"] input::placeholder,
body[class*="pmpro-"] textarea::placeholder {
	color: #6a6080 !important;
}
/* Keep the dark field on every state — never flip to a white/light background. */
body[class*="pmpro-"] input:focus,
body[class*="pmpro-"] input:active,
body[class*="pmpro-"] input:hover,
body[class*="pmpro-"] select:focus,
body[class*="pmpro-"] textarea:focus {
	outline: none;
	background: rgba(0, 0, 0, 0.25) !important;
	color: #f0edf8 !important;
	border-color: #8B5CF6;
	box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.10);
}
/* Chrome/Safari autofill paints inputs white — force it back to the dark field. */
body[class*="pmpro-"] input:-webkit-autofill,
body[class*="pmpro-"] input:-webkit-autofill:hover,
body[class*="pmpro-"] input:-webkit-autofill:focus,
body[class*="pmpro-"] input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px #140f24 inset !important;
	-webkit-text-fill-color: #f0edf8 !important;
	caret-color: #f0edf8;
	transition: background-color 9999s ease-in-out 0s;
}

/* Checkbox rows ("Remember Me"). */
body[class*="pmpro-"] input[type="checkbox"] {
	accent-color: #8B5CF6;
	width: auto;
}

/* -------------------------------------------------------------------------
   Buttons — gradient primary to match the theme's .btn-primary.
   ------------------------------------------------------------------------- */
body[class*="pmpro-"] .pmpro_btn,
body[class*="pmpro-"] input[type="submit"],
body[class*="pmpro-"] button[type="submit"],
body[class*="pmpro-"] .pmpro_btn-submit,
body[class*="pmpro-"] a.pmpro_btn {
	display: inline-block;
	width: auto;
	background: linear-gradient(135deg, #6C2BD9, #8B5CF6);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 60px;
	padding: 15px 34px;
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 10px 24px rgba(168, 85, 247, 0.35);
	transition: all 0.3s ease;
}
body[class*="pmpro-"] .pmpro_btn:hover,
body[class*="pmpro-"] input[type="submit"]:hover,
body[class*="pmpro-"] button[type="submit"]:hover,
body[class*="pmpro-"] .pmpro_btn-submit:hover,
body[class*="pmpro-"] a.pmpro_btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(168, 85, 247, 0.45);
	color: #fff;
}

/* Full-width submit on the login + checkout forms. */
body.pmpro-login .pmpro_btn-submit,
body.pmpro-login input[type="submit"],
body[class*="pmpro-"] .pmpro_submit .pmpro_btn,
body[class*="pmpro-"] .pmpro_submit input[type="submit"] {
	width: 100%;
	text-align: center;
}

/* Secondary / cancel buttons → outline. */
body[class*="pmpro-"] .pmpro_btn-cancel,
body[class*="pmpro-"] a.pmpro_btn-cancel {
	background: transparent;
	border: 2px solid #8b5cf659;
	color: #C084FC;
	box-shadow: none;
}
body[class*="pmpro-"] .pmpro_btn-cancel:hover {
	background: rgba(139, 92, 246, 0.08);
	color: #C084FC;
}

/* "Show Password" toggle is a .pmpro_btn but must NOT look like the big
   gradient CTA — reset it to a small inline text button. */
body[class*="pmpro-"] .pmpro_btn-plain,
body[class*="pmpro-"] .pmpro_btn-password-toggle,
body[class*="pmpro-"] button.pmpro_btn-password-toggle {
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: #C084FC !important;
	padding: 0 !important;
	width: auto !important;
	min-width: 0 !important;
	font-weight: 600;
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transform: none !important;
}
body[class*="pmpro-"] .pmpro_btn-plain:hover,
body[class*="pmpro-"] .pmpro_btn-password-toggle:hover {
	background: transparent !important;
	color: #8B5CF6 !important;
	transform: none !important;
	box-shadow: none !important;
}
body[class*="pmpro-"] .pmpro_btn-password-toggle .pmpro_icon {
	width: 18px;
	height: 18px;
}
/* Show only the eye icon — hide the "Show Password" / "Hide Password" text. */
body[class*="pmpro-"] .pmpro_form_field-password-toggle-state {
	display: none !important;
}

/* Small helper links. */
body[class*="pmpro-"] .pmpro_show_password_label,
body[class*="pmpro-"] .pmpro_actions_nav a {
	color: #C084FC;
}

/* -------------------------------------------------------------------------
   Messages / errors
   ------------------------------------------------------------------------- */
body[class*="pmpro-"] .pmpro_message,
body[class*="pmpro-"] .pmpro_error,
body[class*="pmpro-"] .pmpro_success,
body[class*="pmpro-"] div.pmpro_asterisk {
	border-radius: 12px;
	padding: 14px 18px;
	border: 1px solid #8b5cf633;
	background: rgba(139, 92, 246, 0.08);
	color: #e8e0f0;
	margin-bottom: 20px;
}
body[class*="pmpro-"] .pmpro_error,
body[class*="pmpro-"] .pmpro_red {
	background: rgba(239, 68, 68, 0.10);
	border-color: rgba(239, 68, 68, 0.35);
	color: #fca5a5;
}

/* Price emphasis. */
body[class*="pmpro-"] .pmpro_level-price,
body[class*="pmpro-"] .pmpro_price,
body[class*="pmpro-"] strong {
	color: #C084FC;
}

/* -------------------------------------------------------------------------
   Login / lost-password page — single centered card.
   ------------------------------------------------------------------------- */
body.pmpro-login .site-main article,
body.pmpro-lost-password .site-main article {
	max-width: 460px;
}
body.pmpro-login .entry-content,
body.pmpro-lost-password .entry-content {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid #8b5cf633;
	border-radius: 22px;
	padding: 36px 32px;
	box-shadow: 0 20px 50px rgba(108, 43, 217, 0.12);
}
/* Neutralise any inner PMPro wrappers so there's no double box. */
body.pmpro-login .entry-content .pmpro_card,
body.pmpro-login .entry-content .pmpro_section,
body.pmpro-login .entry-content .pmpro_login_wrapper,
body.pmpro-lost-password .entry-content .pmpro_card,
body.pmpro-lost-password .entry-content .pmpro_section {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
}
body.pmpro-login .pmpro_form_field,
body.pmpro-login .pmpro_form_fields > div {
	margin-bottom: 18px;
}
/* "Remember me" row sits inline and subtle. */
body.pmpro-login .pmpro_form_field-remember_me label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #a098b8;
	font-weight: 500;
	margin-bottom: 0;
}
/* Lost-password / secondary actions row. */
body.pmpro-login .pmpro_actions_nav,
body.pmpro-login .pmpro_login_wrapper .pmpro_actions_nav {
	text-align: center;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	font-size: 14px;
}

/* -------------------------------------------------------------------------
   Checkout page polish.
   ------------------------------------------------------------------------- */
body.pmpro-checkout .site-main article {
	max-width: 820px;
}
body.pmpro-checkout .pmpro_card {
	padding: 30px 32px;
	margin-bottom: 22px;
}
/* Section headings ("Membership Information", "Account Information", …). */
body.pmpro-checkout .pmpro_card_title,
body.pmpro-checkout .pmpro_card_content > h2,
body.pmpro-checkout .pmpro_card_content > h3,
body.pmpro-checkout fieldset legend {
	font-size: 20px;
	font-weight: 700;
	color: #f0edf8;
	margin-bottom: 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	width: 100%;
}
/* Two-column field rows (name, password, email pairs). */
body.pmpro-checkout .pmpro_cols-2,
body.pmpro-checkout .pmpro_form_fields.pmpro_cols-2 {
	gap: 18px;
}
/* Selected-level summary line. */
body.pmpro-checkout .pmpro_level-name,
body.pmpro-checkout .pmpro_level-price,
body.pmpro-checkout .pmpro_checkout-cost b,
body.pmpro-checkout .pmpro_checkout-cost strong {
	color: #C084FC;
}
/* Card / payment fields (incl. Stripe card element). */
body.pmpro-checkout .StripeElement,
body.pmpro-checkout .pmpro_form_field-card-number input,
body.pmpro-checkout .pmpro_form_field-cvc input,
body.pmpro-checkout .pmpro_form_field-expiration select,
body.pmpro-checkout #CardNumber,
body.pmpro-checkout #CVV {
	background: rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 12px;
	padding: 13px 16px;
	color: #f0edf8;
}
body.pmpro-checkout .StripeElement--focus {
	border-color: #8B5CF6;
	box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.10);
}
/* Discount-code row. */
body.pmpro-checkout .pmpro_form_field-discount_code {
	display: flex;
	gap: 10px;
	align-items: flex-end;
	flex-wrap: wrap;
}
/* Submit button — full width and prominent. */
body.pmpro-checkout .pmpro_submit,
body.pmpro-checkout .pmpro_checkout-fields-submit {
	text-align: center;
	margin-top: 10px;
}
body.pmpro-checkout .pmpro_submit .pmpro_btn-submit,
body.pmpro-checkout .pmpro_submit input[type="submit"] {
	width: 100%;
	font-size: 17px;
	padding: 16px;
}
/* "Already have an account? Log in" link row. */
body.pmpro-checkout .pmpro_checkout-fields-description,
body.pmpro-checkout .pmpro_account-actions {
	text-align: center;
	color: #a098b8;
	margin-top: 18px;
}

/* -------------------------------------------------------------------------
   Custom pricing cards — [emrul_pricing] shortcode.
   ------------------------------------------------------------------------- */
.emrul-pricing {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 8px;
	align-items: stretch;
}
@media (max-width: 880px) {
	.emrul-pricing {
		grid-template-columns: 1fr;
		max-width: 420px;
		margin-left: auto;
		margin-right: auto;
	}
}

.emrul-pricing .emrul-plan {
	position: relative;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid #8b5cf633;
	border-radius: 22px;
	padding: 34px 26px;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.emrul-pricing .emrul-plan:hover {
	transform: translateY(-6px);
	border-color: #8b5cf680;
}
.emrul-pricing .emrul-plan.is-popular {
	border-color: #8B5CF6;
	background: linear-gradient(180deg, rgba(139, 92, 246, 0.12), rgba(255, 255, 255, 0.02));
	box-shadow: 0 20px 50px rgba(108, 43, 217, 0.20);
}

.emrul-pricing .emrul-plan__flag {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(135deg, #6C2BD9, #8B5CF6);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	padding: 6px 18px;
	border-radius: 60px;
	white-space: nowrap;
	box-shadow: 0 8px 20px rgba(108, 43, 217, 0.35);
}

.emrul-pricing .emrul-plan__name {
	color: #f0edf8;
	font-size: 20px;
	font-weight: 800;
	margin: 0 0 14px;
}
.emrul-pricing .emrul-plan__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
}
.emrul-pricing .emrul-plan__amount {
	color: #f0edf8;
	font-size: 40px;
	font-weight: 900;
	line-height: 1;
}
.emrul-pricing .emrul-plan__period {
	color: #a098b8;
	font-size: 14px;
}
.emrul-pricing .emrul-plan__save {
	color: #C084FC;
	font-size: 13px;
	font-weight: 600;
	margin-top: 8px;
}

.emrul-pricing .emrul-plan__features {
	list-style: none;
	margin: 24px 0 28px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 13px;
	flex: 1;
}
.emrul-pricing .emrul-plan__features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14.5px;
	line-height: 1.4;
	color: #c8c0d8;
}
.emrul-pricing .emrul-plan__features li.no {
	color: #6a6080;
}
.emrul-pricing .emrul-plan__features li .ic {
	flex-shrink: 0;
	font-weight: 700;
}
.emrul-pricing .emrul-plan__features li.yes .ic {
	color: #8B5CF6;
}
.emrul-pricing .emrul-plan__features li.no .ic {
	color: #6a6080;
}

.emrul-pricing .emrul-plan__cta {
	display: block;
	text-align: center;
	text-decoration: none;
	background: linear-gradient(135deg, #6C2BD9, #8B5CF6);
	color: #fff;
	font-weight: 700;
	padding: 14px;
	border-radius: 60px;
	box-shadow: 0 10px 24px rgba(168, 85, 247, 0.35);
	transition: all 0.3s ease;
}
.emrul-pricing .emrul-plan__cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(168, 85, 247, 0.45);
	color: #fff;
}
/* Non-highlighted plans use an outline button. */
.emrul-pricing .emrul-plan:not(.is-popular) .emrul-plan__cta {
	background: transparent;
	border: 2px solid #8b5cf659;
	color: #C084FC;
	box-shadow: none;
}
.emrul-pricing .emrul-plan:not(.is-popular) .emrul-plan__cta:hover {
	background: rgba(139, 92, 246, 0.08);
	color: #C084FC;
}
/* Current plan — disabled look. */
.emrul-pricing .emrul-plan__cta.is-current {
	background: transparent;
	border: 2px solid #8b5cf633;
	color: #a098b8;
	box-shadow: none;
	cursor: default;
}
.emrul-pricing .emrul-plan__cta.is-current:hover {
	transform: none;
}