/**
 * NeoYug skin for the MasterStudy account area.
 *
 * v1.31.0: rewritten. Up to v1.30.0 this stylesheet dressed our own template
 * overrides of account/private/parts/edit_account.php and info.php. MasterStudy
 * 3.7.38 deleted those templates and their jQuery (edit_account.js), so nll no
 * longer overrides them. This file now skins MasterStudy's OWN markup:
 *
 *   account/settings.php            .masterstudy-account
 *   account/parts/settings/main.php #masterstudy-account-settings
 *                                   .masterstudy-account-settings__*
 *   sidebar                         .masterstudy-account-sidebar
 *
 * Nothing here changes structure or names, so MasterStudy keeps ownership of
 * the form, its validation and its save path. If MasterStudy renames a class in
 * a future release the worst case is an unstyled but working screen.
 *
 * Contrast values carried over from the v1.21.1 audit:
 *   border      #9C8C80  3.24:1 on white (WCAG 3:1 for controls)
 *   placeholder #7A6C72  4.98:1 on white
 */

/* 1. Tokens ---------------------------------------------------------- */

.masterstudy-account {
	--nyac-purple: #8d22c3;
	--nyac-purple-deep: #261a48;
	--nyac-cream: #faf9f6;
	--nyac-border: #9c8c80;
	--nyac-border-quiet: #e3dbd4;
	--nyac-placeholder: #7a6c72;
	--nyac-ink: #261a48;
	--nyac-muted: #6b6270;
	--nyac-radius: 12px;

	/* MasterStudy's own accent token, repointed at the brand purple. This is
	   what recolours its buttons, active states and focus rings without us
	   having to out-specify each one. */
	--accent-100: var(--nyac-purple);

	color: var(--nyac-ink);
}

/* 2. Non-brand blue cleanup ------------------------------------------
   The site carries a Customizer-level #385BCE that tints the account panel
   and the active tab. Repointing --accent-100 handles anything reading the
   token; these catch the hardcoded cases. */

/*
 * Scoped AWAY from our own components. This rule exists to repaint
 * MasterStudy's leftover non-brand blue links, but at (0,2,1) it also beat
 * `.nyord-pay` at (0,1,0) - which painted the "Complete payment" button's
 * white label purple on a purple background, so it rendered as an empty box.
 * Anything of ours styles itself; this only ever meant MasterStudy's links.
 */
.masterstudy-account a:not(.masterstudy-button):not([class*="nyord-"]):not([class*="nyen-"]) {
	color: var(--nyac-purple);
}

.masterstudy-account a:not(.masterstudy-button):not([class*="nyord-"]):not([class*="nyen-"]):hover {
	color: var(--nyac-purple-deep);
}

/* 3. Panel + sidebar shell -------------------------------------------- */

/* The card treatment belongs to the SETTINGS FORM, not to the container.
   The container is shared: the Enrolled page renders into it too, and putting
   a bordered white card here wrapped the whole Enrolled layout in a box it
   never had before v1.31.0. Scoped to the settings root instead, so Enrolled
   goes back to sitting directly on the page like the original. */
#masterstudy-account-settings {
	background: #fff;
	border: 1px solid var(--nyac-border-quiet);
	border-radius: 16px;
	padding: 28px;
}

/* Container is a pass-through: no background, no border, no padding. */
.masterstudy-account-container {
	background: none;
	border: 0;
	padding: 0;
}

.masterstudy-account-sidebar__wrapper {
	background: var(--nyac-cream);
	border: 1px solid var(--nyac-border-quiet);
	border-radius: 16px;
	padding: 18px 14px;
}

.masterstudy-account-settings__title {
	color: var(--nyac-purple-deep);
	font-weight: 600;
	letter-spacing: -0.01em;
	margin-bottom: 22px;
}

/* 4. Fields -----------------------------------------------------------
   Height 48px and font-size 16px. The 16px is not cosmetic: iOS Safari
   auto-zooms the page on focus for any input below 16px. */

.masterstudy-account-settings__field-label {
	color: var(--nyac-muted);
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 6px;
}

.masterstudy-account-settings__input,
#masterstudy-account-settings input[type="text"],
#masterstudy-account-settings input[type="email"],
#masterstudy-account-settings input[type="password"],
#masterstudy-account-settings textarea {
	min-height: 48px;
	padding: 12px 16px;
	font-family: inherit;
	font-size: 16px;
	color: var(--nyac-ink);
	background: #fff;
	border: 1px solid var(--nyac-border);
	border-radius: var(--nyac-radius);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.masterstudy-account-settings__input::placeholder,
#masterstudy-account-settings textarea::placeholder {
	color: var(--nyac-placeholder);
	opacity: 1;
}

.masterstudy-account-settings__input:focus,
.masterstudy-account-settings__input:focus-visible,
#masterstudy-account-settings input:focus-visible,
#masterstudy-account-settings textarea:focus-visible {
	border-color: var(--nyac-purple);
	box-shadow: 0 0 0 3px rgba(141, 34, 195, 0.16);
	outline: none;
}

@media (forced-colors: active) {
	#masterstudy-account-settings input:focus-visible,
	#masterstudy-account-settings textarea:focus-visible {
		outline: 2px solid Highlight;
		outline-offset: 1px;
	}
}

.masterstudy-account-settings__field {
	margin-bottom: 18px;
}

/* 5. Country / State select2 ------------------------------------------
   Same stacking bug as neoyug-checkout v1.9.15: the theme ships
   .select2-container{z-index:9999999} with !important, which lifts even the
   CLOSED picker above the fixed header. Only Country and State are select2. */

.masterstudy-account .select2-container {
	z-index: auto !important;
}

.masterstudy-account .select2-container--open {
	z-index: 9999 !important;
}

.masterstudy-account .select2-container .select2-selection--single {
	height: 48px;
	border: 1px solid var(--nyac-border);
	border-radius: var(--nyac-radius);
}

.masterstudy-account .select2-container .select2-selection__rendered {
	line-height: 46px;
	padding-left: 16px;
	color: var(--nyac-ink);
}

/* 6. Avatar ------------------------------------------------------------ */

.masterstudy-account-settings__avatar-img,
.masterstudy-account-profile__avatar img {
	border-radius: 50%;
	border: 2px solid var(--nyac-border-quiet);
}

.masterstudy-account-settings__avatar-camera:hover,
.masterstudy-account-settings__avatar-delete:hover {
	color: var(--nyac-purple);
}

/* 7. Save action + messages -------------------------------------------- */

.masterstudy-account-settings__actions {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--nyac-border-quiet);
}

.masterstudy-account .masterstudy-button.masterstudy-button_style-primary {
	height: 48px;
	border-radius: var(--nyac-radius);
	transition: background 0.2s ease, transform 0.1s ease;
}

.masterstudy-account .masterstudy-button.masterstudy-button_style-primary:hover {
	background: var(--nyac-purple-deep);
}

.masterstudy-account .masterstudy-button.masterstudy-button_style-primary:active {
	transform: translateY(1px);
}

.masterstudy-account .masterstudy-button__title {
	font-family: inherit;
	font-weight: 600;
}

.masterstudy-account-settings__message {
	border-radius: 10px;
	font-size: 14px;
}

/* 8. Sidebar menu ------------------------------------------------------- */

.masterstudy-account-sidebar a,
.masterstudy-account-sidebar .masterstudy-account-menu__item {
	border-radius: 10px;
}

/* MasterStudy's stock Have-a-question button opens the enterprise enquiry
   modal. NeoYug routes support through WhatsApp instead, so the stock button
   and its modal are hidden and NYLL_Profile::render_whatsapp_card() prints
   .nyac-wa in the same sidebar slot. */
.masterstudy-account-have-question__button,
.masterstudy-account .masterstudy-enterprise-modal {
	display: none !important;
}

/* 9. WhatsApp card (our markup, hooked to masterstudy_account_sidebar) --- */

.nyac-wa {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
	padding: 14px;
	background: #fff;
	border: 1px solid var(--nyac-border-quiet);
	border-radius: 12px;
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.1s ease;
}

.nyac-wa:hover {
	border-color: #8d22c3;
	transform: translateY(-1px);
}

.nyac-wa:focus-visible {
	outline: 2px solid #8d22c3;
	outline-offset: 2px;
}

/* Inline SVG so there is no extra request and no icon-font dependency. */
.nyac-wa__icon {
	flex: 0 0 34px;
	height: 34px;
	border-radius: 50%;
	background: #25d366 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.86 9.86 0 004.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2zm5.8 14.1c-.24.68-1.2 1.26-1.96 1.42-.52.11-1.2.2-3.49-.75-2.93-1.21-4.81-4.18-4.96-4.37-.14-.19-1.18-1.57-1.18-3s.75-2.13 1.02-2.42c.27-.29.58-.36.78-.36l.56.01c.18.01.42-.07.66.5.24.58.83 2.01.9 2.16.07.14.12.31.02.5-.1.19-.15.31-.29.48-.14.17-.3.38-.43.51-.14.14-.29.29-.12.58.17.29.75 1.24 1.61 2.01 1.11.99 2.04 1.3 2.33 1.44.29.15.46.12.63-.07.17-.19.72-.84.91-1.13.19-.29.39-.24.65-.14.26.09 1.69.8 1.98.94.29.15.48.22.55.34.07.12.07.7-.17 1.38z'/%3E%3C/svg%3E") center/20px 20px no-repeat;
}

.nyac-wa__body {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}

.nyac-wa__title {
	color: #261a48;
	font-weight: 600;
	font-size: 14px;
}

.nyac-wa__sub {
	color: #6b6270;
	font-size: 12px;
}

/* 10. Mobile ------------------------------------------------------------ */

@media (max-width: 768px) {
	#masterstudy-account-settings {
		padding: 20px 16px;
		border-radius: 14px;
	}

	.masterstudy-account-sidebar__wrapper {
		padding: 14px 12px;
	}
}

/* 11. Motion preference ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.masterstudy-account *,
	.masterstudy-account *::before,
	.masterstudy-account *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ==================================================================== *
 * 12. Account shell (v1.32.0 — the hamburger drawer is gone)
 *
 * v1.31.1 turned MasterStudy's account sidebar into a drawer. Kunal removed
 * it: "with the hamburger menu the UI looks really bad". The sidebar is now
 * hidden outright and the two links people actually use — Orders and Profile
 * — are rendered server-side in the Enrolled template by
 * NYLL_Profile::account_links(). Certificates and Log out were dropped at his
 * request; "Profile" points at MasterStudy's Settings screen, since that is
 * where a member's own details live.
 *
 * CONSEQUENCE worth knowing: the drawer's fail-safe is gone with it. That
 * design kept every account link reachable if its JS failed. There is no JS in
 * this path at all now, so there is nothing to fail — but the account pages
 * themselves are reachable only via these links and the site header.
 *
 * The width work from v1.31.1 stays: MasterStudy's container is a FLEX parent
 * and flex items default to min-width:auto, so without min-width:0 the page
 * punches out instead of reflowing.
 * ==================================================================== */

/*
 * !important on the STRUCTURAL rules only, and it is not laziness.
 * MasterStudy enqueues `masterstudy-account-main` from INSIDE its templates
 * (wp_enqueue_style during the_content), so WordPress prints it AFTER
 * nyll-profile, which is enqueued on wp_enqueue_scripts. At equal specificity
 * the later sheet wins. That is why the sidebar stayed visible on My Orders
 * and Settings while it disappeared on Enrolled: same CSS, different print
 * order. Colour and spacing rules below do NOT need this - only the
 * structural ones MasterStudy also declares.
 */
.masterstudy-account {
	display: block !important;
	max-width: none !important;
	/* Top padding clears the fixed site header. 56px was not enough - the
	   greeting was still rendering under the logo on both desktop and phone. */
	/* 64px sides on desktop. The mobile rule below overrides this, so widening
	   here does not eat into the phone layout where space is scarce. */
	padding: 120px 64px 72px !important;
}

.masterstudy-account-sidebar {
	display: none !important;
}

.masterstudy-account-container,
.masterstudy-account-container > * {
	max-width: none !important;
	min-width: 0 !important;
	width: 100% !important;
}

.masterstudy-account .nyen {
	min-width: 0;
	max-width: 100%;
}

/*
 * DEAD RULE, kept commented so it is not written a third time.
 *
 * `.masterstudy-account` above declares `max-width: none !important`, and
 * !important beats any non-important declaration whatever the specificity.
 * So this 1210px cap has never once applied - the settings card renders edge
 * to edge with the shell's 64px side padding, and section 13 lines the back
 * link up with THAT. Re-enable it (with !important) only if you also drop the
 * `.nyord` mirror in section 13, or the two will disagree again.
 *
 * .masterstudy-account:has(#masterstudy-account-settings) { max-width: 1210px; }
 */

@media (max-width: 900px) {
	.masterstudy-account {
		padding: 96px 20px 48px !important;
	}
}

/* ---- Orders / Profile, in the greeting row ---- */

.nyen-acct {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 13px;
	/* Pull the padded links back so the row's visual edge lines up with the
	   content below it rather than sitting 10px further out. */
	margin-right: -10px;
}

.nyen-acct__link {
	/* Real hit area. These were 13px text with no padding, which is a hard
	   target on a phone and barely one with a mouse. */
	display: inline-block;
	padding: 8px 10px;
	color: var(--nyac-purple);
	text-decoration: none;
	border-radius: 8px;
	transition: background 0.2s ease;
}

/* No underline on hover (Kunal) - the background does the work. */
.nyen-acct__link:hover {
	background: rgba(141, 34, 195, 0.08);
}

.nyen-acct__link:focus-visible {
	outline: 2px solid var(--nyac-purple);
	outline-offset: 3px;
}

.nyen-acct__sep {
	color: var(--nyac-border);
}

/* ---- MasterStudy's mobile bottom bar ----
   Kunal: "i don't want that menu at the bottom on the phone". Note it also
   carried site navigation (Home / Courses / Wishlist), so those routes now
   depend on the site's own header on mobile. */

.masterstudy-account-mobile-menu,
.masterstudy-account-float-menu {
	display: none !important;
}

/* ======================================================================
 * 13. "My programs" back link (v1.33.5, alignment fixed v1.33.6)
 *
 * Rendered by NYLL_Profile::render_back_bar() on `masterstudy_before_account`,
 * which is the only insertion point My Orders (our template) and Settings
 * (MasterStudy's) actually share.
 *
 * That action fires OUTSIDE `.masterstudy-account`, and it is the shell that
 * carries the top padding clearing the fixed site header. Left alone, the link
 * would render underneath the logo. So the bar takes the header clearance and
 * the shell below it is pulled back up by the same amount, which keeps the
 * pair looking like one padded page rather than two stacked ones.
 * ==================================================================== */

.nyac-backbar {
	padding: 112px 64px 0;
}

.nyac-backbar + .masterstudy-account {
	padding-top: 14px !important;
}

/*
 * Alignment with the page underneath.
 *
 * SETTINGS needs nothing here. The shell is full width (see the dead-rule note
 * in section 11), so the card's left edge is just the shell's 64px padding -
 * which this bar already matches. The 1210px cap that used to live here WAS
 * the bug: it centred the link inside a 1210px column while the card below ran
 * edge to edge, so on any window wider than ~1210px "My programs" sat well to
 * the right of the card.
 *
 * MY ORDERS is the screen that does need a cap. `.nyord` bounds itself to
 * 1280px and centres inside the shell's content box, so mirror it: 1280 plus
 * the shell's 64px on each side, and the extra 4px is `.nyord`'s own inner
 * padding. Under 1408px neither cap binds and both sit at 68px.
 */
.nyac-backbar:has(+ .masterstudy-account .nyord) {
	max-width: 1408px;
	margin: 0 auto;
	padding-left: 68px;
	padding-right: 68px;
}

.nyac-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/* Same optical pull as .nyen-acct: the padding is hit area, not indent,
	   so the text lines up with the page title below it. */
	margin-left: -10px;
	padding: 8px 10px;
	font-size: 14px;
	line-height: 1.2;
	color: var(--nyac-purple);
	text-decoration: none;
	border-radius: 8px;
	transition: background 0.2s ease;
}

.nyac-back:hover {
	background: rgba(141, 34, 195, 0.08);
	text-decoration: none;
}

.nyac-back:focus-visible {
	outline: 2px solid var(--nyac-purple);
	outline-offset: 3px;
}

.nyac-back__ico {
	flex: 0 0 auto;
}

@media (max-width: 900px) {
	.nyac-backbar {
		padding: 88px 20px 0;
	}

	/* The Orders mirror above out-specifies the rule right before it, so the
	   phone values have to be restated at the same specificity or the bar keeps
	   its 68px desktop gutters. 22px = the shell's 20px plus `.nyord`'s 2px. */
	.nyac-backbar:has(+ .masterstudy-account .nyord) {
		max-width: none;
		padding-left: 22px;
		padding-right: 22px;
	}

	.nyac-backbar + .masterstudy-account {
		padding-top: 10px !important;
	}

	.nyac-back {
		/* 15px and a taller box: this is the only way back on a phone now
		   that MasterStudy's bottom bar is hidden. */
		font-size: 15px;
		padding: 10px 10px;
	}
}