/* WholesaleWP — customer-facing Team / Subaccounts page
   Theme-neutral; uses CSS custom properties so the host theme can override.
   No brand color is forced; fonts inherit from the storefront.
*/

.wwp-team{
	/* Tokens — override in your child theme */
	--wwp-bg:           #ffffff;
	--wwp-bg-soft:      #fafafa;
	--wwp-bg-muted:     #f5f5f5;
	--wwp-border:       #e5e5e5;
	--wwp-border-soft:  #eeeeee;
	--wwp-border-strong:#d0d0d0;
	--wwp-text:         #1a1a1a;
	--wwp-text-muted:   #666666;
	--wwp-text-faint:   #999999;
	--wwp-accent:       #1a1a1a;
	--wwp-accent-fg:    #ffffff;
	--wwp-accent-soft:  #f0f0f0;
	--wwp-radius:       10px;
	--wwp-radius-sm:    6px;
	--wwp-radius-lg:    14px;

	font-family: inherit;
	color: var(--wwp-text);
	box-sizing: border-box;
}
.wwp-team *, .wwp-team *::before, .wwp-team *::after{ box-sizing: border-box; }

/* ----- Page header ----- */
.wholesalewp_subaccounts_container.wwp-team .wwp-team__head{
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 16px;
	background: transparent !important;
	color: var(--wwp-text) !important;
	padding: 0 !important;
	border-radius: 0 !important;
	margin-bottom: 18px !important;
}
.wwp-team__head-text{ flex: 1; min-width: 0; }
.wwp-team .wwp-team__title{
	font-family: inherit !important;
	font-size: 1.5em !important;
	line-height: 1.2 !important;
	font-weight: 600 !important;
	color: var(--wwp-text) !important;
	background: transparent !important;
	padding: 0 !important;
	letter-spacing: -0.01em;
}
.wwp-team__sub{
	margin-top: 4px;
	font-size: 0.875em;
	color: var(--wwp-text-muted);
	line-height: 1.4;
}
.wwp-team__sub strong{ color: var(--wwp-text); font-weight: 600; }

.wholesalewp_subaccounts_container.wwp-team button.wwp-team__head-cta{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px !important;
	background: var(--wwp-accent) !important;
	color: var(--wwp-accent-fg) !important;
	border: 1px solid var(--wwp-accent) !important;
	border-radius: var(--wwp-radius-sm) !important;
	font-size: 0.875em !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	cursor: pointer !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	transition: opacity .15s ease;
	width: auto !important;
	height: auto !important;
}
.wwp-team button.wwp-team__head-cta:hover{ opacity: .85; }
.wwp-team__head-cta svg{ flex: none; }

/* ----- Members list section ----- */
.wwp-team__section{
	background: var(--wwp-bg);
	border: 1px solid var(--wwp-border);
	border-radius: var(--wwp-radius-lg);
	overflow: hidden;
	margin-bottom: 18px;
}
.wwp-team__section-head{
	font-size: 0.75em;
	font-weight: 600;
	color: var(--wwp-text-muted);
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: 14px 18px 10px;
	border-bottom: 1px solid var(--wwp-border-soft);
	background: var(--wwp-bg-soft);
}
.wwp-team__list{ display: flex; flex-direction: column; }
.wwp-team__row{
	display: grid;
	grid-template-columns: 40px 1fr auto auto;
	gap: 14px;
	align-items: center;
	padding: 12px 18px;
	border-bottom: 1px solid var(--wwp-border-soft);
}
.wwp-team__row:last-child{ border-bottom: none; }

.wwp-team__avatar{
	width: 40px; height: 40px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 0.8125em; font-weight: 600;
	color: var(--wwp-text);
	background: var(--wwp-bg-muted);
	letter-spacing: .03em;
}
/* Soft tinted variants — neutral palette, not brand colors */
.wwp-team__avatar[data-wwp-avatar="owner"]{ background: #e8eaef; color: #2a3144; }
.wwp-team__avatar[data-wwp-avatar="0"]{ background: #ecedef; color: #3a3a3a; }
.wwp-team__avatar[data-wwp-avatar="1"]{ background: #efe9e0; color: #4a3f2e; }
.wwp-team__avatar[data-wwp-avatar="2"]{ background: #e6ebe6; color: #2f4a36; }
.wwp-team__avatar[data-wwp-avatar="3"]{ background: #ebe6ee; color: #3f2e4a; }
.wwp-team__avatar[data-wwp-avatar="4"]{ background: #e6ebef; color: #2e3f4a; }

.wwp-team__person{ min-width: 0; }
.wwp-team__person-line{
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.wwp-team__name{
	font-size: 0.9375em; font-weight: 600; color: var(--wwp-text);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wwp-team__youbadge{
	display: inline-flex; align-items: center;
	background: #e8eaef; color: #2a3144;
	font-size: 0.7em; font-weight: 600;
	padding: 2px 7px; border-radius: 4px;
	letter-spacing: .02em;
}
.wwp-team__person-meta{
	font-size: 0.8125em; color: var(--wwp-text-muted);
	margin-top: 2px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.wwp-team__role{
	font-size: 0.8125em;
	font-weight: 500;
	color: var(--wwp-text-muted);
	padding: 4px 10px;
	background: var(--wwp-bg-muted);
	border-radius: 999px;
	white-space: nowrap;
}

.wwp-team__row-actions{ display: flex; gap: 6px; align-items: center; }
.wholesalewp_subaccounts_container.wwp-team .wwp-team__icon-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px !important; height: 32px !important;
	min-width: 32px !important;
	padding: 0 !important;
	background: transparent !important;
	border: 1px solid var(--wwp-border) !important;
	border-radius: var(--wwp-radius-sm) !important;
	color: var(--wwp-text-muted) !important;
	cursor: pointer !important;
	transition: border-color .15s ease, color .15s ease;
	box-shadow: none !important;
	text-decoration: none !important;
}
.wwp-team .wwp-team__icon-btn:hover{
	border-color: var(--wwp-text) !important;
	color: var(--wwp-text) !important;
}
.wwp-team__empty{
	padding: 18px;
	text-align: center;
	color: var(--wwp-text-faint);
	font-size: 0.875em;
}

/* ----- Invite form ----- */
.wholesalewp_subaccounts_container.wwp-team .wwp-team__form{
	display: none;
	background: var(--wwp-bg) !important;
	border: 1px solid var(--wwp-border) !important;
	border-radius: var(--wwp-radius-lg) !important;
	padding: 0 !important;
	overflow: hidden;
	margin-top: 18px;
}
.wholesalewp_subaccounts_container.wwp-team .wwp-team__form.is-open,
.wholesalewp_subaccounts_container.wwp-team .wwp-team__form[data-wwp-team-open]{ display: block; }
/* Hide the legacy header bar inside the redesigned form */
.wwp-team .wwp-team__form-legacy-head{ display: none !important; }

.wholesalewp_subaccounts_container.wwp-team .wwp-team__form-body{
	padding: 22px 24px 22px !important;
	background: transparent !important;
}

.wwp-team__form-head{
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}
.wwp-team__form-title{
	font-size: 1.125em;
	font-weight: 600;
	color: var(--wwp-text);
}
.wwp-team__form-sub{
	margin-top: 4px;
	font-size: 0.8125em;
	color: var(--wwp-text-muted);
}
.wholesalewp_subaccounts_container.wwp-team button.wwp-team__form-close{
	width: 32px !important; height: 32px !important;
	padding: 0 !important;
	border: 1px solid var(--wwp-border) !important;
	border-radius: var(--wwp-radius-sm) !important;
	background: var(--wwp-bg) !important;
	color: var(--wwp-text-muted) !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: none !important;
}
.wwp-team button.wwp-team__form-close:hover{ border-color: var(--wwp-text) !important; color: var(--wwp-text) !important; }

.wwp-team__form-row{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 14px;
}
@media (max-width: 600px){ .wwp-team__form-row{ grid-template-columns: 1fr; } }

.wwp-team__field{ display: flex; flex-direction: column; margin-bottom: 14px; }
.wwp-team__form-row .wwp-team__field{ margin-bottom: 0; }

.wwp-team__label{
	font-size: 0.75em;
	font-weight: 600;
	color: var(--wwp-text);
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-bottom: 6px;
	display: flex; align-items: center; gap: 8px;
}
.wwp-team__optional{
	font-size: 0.7em;
	font-weight: 500;
	color: var(--wwp-text-faint);
	background: var(--wwp-bg-muted);
	padding: 2px 6px;
	border-radius: 4px;
	letter-spacing: 0;
	text-transform: none;
}

.wholesalewp_subaccounts_container.wwp-team input.wwp-team__input{
	width: 100% !important;
	background: var(--wwp-bg) !important;
	border: 1px solid var(--wwp-border) !important;
	border-radius: var(--wwp-radius-sm) !important;
	padding: 11px 14px !important;
	font-size: 0.9375em !important;
	color: var(--wwp-text) !important;
	font-family: inherit !important;
	line-height: 1.4 !important;
	transition: border-color .15s ease, box-shadow .15s ease;
	box-shadow: none !important;
	height: auto !important;
	margin: 0 !important;
}
.wwp-team input.wwp-team__input:focus{
	outline: none !important;
	border-color: var(--wwp-text) !important;
	box-shadow: 0 0 0 3px rgba(0,0,0,0.06) !important;
}

/* ----- Expandable sections (More details / Customize permissions) ----- */
.wwp-team__expand{ margin-bottom: 14px; }
.wwp-team__expand-toggle{
	display: inline-flex; align-items: center; gap: 6px;
	background: transparent;
	border: none;
	padding: 6px 0;
	font-size: 0.8125em;
	font-weight: 600;
	color: var(--wwp-text);
	cursor: pointer;
	font-family: inherit;
}
.wwp-team__expand-toggle:hover{ color: var(--wwp-text-muted); }
.wwp-team__expand-chev{ transition: transform .2s ease; flex: none; color: var(--wwp-text-faint); }
.wwp-team__expand-toggle[aria-expanded="true"] .wwp-team__expand-chev{ transform: rotate(90deg); }
.wwp-team__expand-toggle--link{
	color: var(--wwp-text);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 500;
}
.wwp-team__expand-toggle--link:hover{ text-decoration: none; }
.wwp-team__expand-body{ margin-top: 12px; padding-top: 8px; }
/* Re-assert hiding when [hidden] is set — child elements set explicit display
   values which would otherwise win over the browser's UA `[hidden]` rule. */
.wwp-team__expand-body[hidden]{ display: none !important; }

/* ----- Role preset cards ----- */
.wwp-team__roles{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
@media (max-width: 700px){ .wwp-team__roles{ grid-template-columns: 1fr; } }
.wholesalewp_subaccounts_container.wwp-team .wwp-team__role-card{
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 6px !important;
	padding: 12px 14px !important;
	background: var(--wwp-bg) !important;
	border: 1px solid var(--wwp-border) !important;
	border-radius: var(--wwp-radius) !important;
	cursor: pointer !important;
	font-family: inherit !important;
	text-align: left !important;
	transition: border-color .15s ease, background .15s ease;
	box-shadow: none !important;
	width: auto !important;
	height: auto !important;
}
.wwp-team .wwp-team__role-card:hover{ border-color: var(--wwp-border-strong) !important; }
.wwp-team .wwp-team__role-card.is-selected{
	border-color: var(--wwp-accent) !important;
	background: var(--wwp-accent-soft) !important;
	box-shadow: 0 0 0 1px var(--wwp-accent) !important;
}
.wwp-team__role-card-head{ display: flex; align-items: center; gap: 8px; }
.wwp-team__role-radio{
	width: 14px; height: 14px;
	border: 1.5px solid var(--wwp-border-strong);
	border-radius: 50%;
	flex: none;
	display: inline-block;
	background: var(--wwp-bg);
	position: relative;
}
.wwp-team__role-card.is-selected .wwp-team__role-radio{
	border-color: var(--wwp-accent);
}
.wwp-team__role-card.is-selected .wwp-team__role-radio::after{
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--wwp-accent);
	transform: translate(-50%, -50%);
}
.wwp-team__role-name{
	font-size: 0.9375em;
	font-weight: 600;
	color: var(--wwp-text);
}
.wwp-team__role-desc{
	font-size: 0.8125em;
	color: var(--wwp-text-muted);
	line-height: 1.4;
	font-weight: 400;
}

/* ----- Customize permissions checkboxes ----- */
.wwp-team__perms{
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: var(--wwp-bg-soft);
	border: 1px solid var(--wwp-border-soft);
	border-radius: var(--wwp-radius);
	padding: 10px 14px;
}
.wholesalewp_subaccounts_container.wwp-team .wwp-team__perm{
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 10px !important;
	padding: 6px 0 !important;
	cursor: pointer !important;
	background: transparent !important;
	border: none !important;
	margin: 0 !important;
}
.wwp-team .wwp-team__perm input[type="checkbox"]{
	width: 16px !important; height: 16px !important;
	margin: 0 !important;
	flex: none !important;
	accent-color: var(--wwp-accent);
}
.wwp-team .wwp-team__perm span{
	font-size: 0.875em !important;
	color: var(--wwp-text) !important;
	font-weight: 400 !important;
}
.wwp-team__perm--child{ padding-left: 26px !important; }
.wwp-team__perm--child span{ color: var(--wwp-text-muted) !important; }

/* ----- Form footer ----- */
.wholesalewp_subaccounts_container.wwp-team .wwp-team__form-foot{
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px;
	padding-top: 18px !important;
	margin-top: 18px !important;
	border-top: 1px solid var(--wwp-border-soft) !important;
	background: transparent !important;
	flex-wrap: wrap;
}
.wwp-team__form-errors{
	font-size: 0.8125em;
	color: #c53030;
	flex: 1; min-width: 0;
}
.wwp-team__form-errors:empty{ display: none; }
.wwp-team__form-actions{ display: flex; gap: 8px; margin-left: auto; }

.wholesalewp_subaccounts_container.wwp-team button.wwp-team__btn{
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 10px 18px !important;
	border-radius: var(--wwp-radius-sm) !important;
	font-size: 0.875em !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	font-family: inherit !important;
	transition: all .15s ease;
	border: 1px solid transparent !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	width: auto !important;
	height: auto !important;
}
.wwp-team button.wwp-team__btn--ghost{
	background: var(--wwp-bg) !important;
	border-color: var(--wwp-border) !important;
	color: var(--wwp-text) !important;
}
.wwp-team button.wwp-team__btn--ghost:hover{ border-color: var(--wwp-text) !important; }
.wwp-team button.wwp-team__btn--primary{
	background: var(--wwp-accent) !important;
	border-color: var(--wwp-accent) !important;
	color: var(--wwp-accent-fg) !important;
}
.wwp-team button.wwp-team__btn--primary:hover{ opacity: .85; }
.wwp-team button.wwp-team__btn--danger{
	background: transparent !important;
	border-color: var(--wwp-border) !important;
	color: #b32a2a !important;
}
.wwp-team button.wwp-team__btn--danger:hover{
	border-color: #b32a2a !important;
	background: rgba(179,42,42,0.04) !important;
}
.wwp-team__btn svg{ flex: none; }


/* ============================================================
   Edit teammate page (Subaccounts /subaccount endpoint)
   ============================================================ */

.wholesalewp_subaccounts_edit_account_container.wwp-team--edit{
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	box-shadow: none !important;
	display: block !important;
}

.wwp-team__back{
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 0.875em; font-weight: 500;
	color: var(--wwp-text-muted);
	text-decoration: none !important;
	margin-bottom: 14px;
	padding: 6px 10px 6px 6px;
	border-radius: var(--wwp-radius-sm);
	transition: color .15s ease, background .15s ease;
}
.wwp-team__back:hover{ color: var(--wwp-text); background: var(--wwp-bg-soft); text-decoration: none !important; }
.wwp-team__back:focus{ outline: none; color: var(--wwp-text); }

.wwp-team__edit-head{
	display: flex; align-items: center; gap: 14px;
	margin-bottom: 18px;
}
.wwp-team__avatar--lg{
	width: 56px; height: 56px;
	font-size: 1em;
}
.wwp-team__edit-headtext{ flex: 1; min-width: 0; }
.wwp-team__edit-headtext .wwp-team__title{
	font-size: 1.5em !important;
	line-height: 1.2 !important;
	font-weight: 600 !important;
}

.wwp-team--edit .wwp-team__section{ background: var(--wwp-bg); }
.wwp-team__section-body{ padding: 18px 18px 8px; }
.wwp-team__section-body .wwp-team__form-row:last-child .wwp-team__field{ margin-bottom: 14px; }

.wwp-team__expand--inline{ margin: 6px 0 14px; }

.wholesalewp_subaccounts_edit_account_container.wwp-team--edit .wwp-team__edit-foot{
	display: flex !important;
	justify-content: space-between !important;
	gap: 12px;
	margin-top: 18px !important;
	padding-top: 18px !important;
	border-top: 1px solid var(--wwp-border-soft) !important;
	background: transparent !important;
	flex-wrap: wrap;
}
.wholesalewp_subaccounts_edit_account_container.wwp-team--edit .wwp-team__edit-foot .wwp-team__btn--primary{
	margin-left: auto !important;
}