/* ==========================================================================
   Underdog — Account
   Base styles only. Every rule is scoped one class deep (.us-ac .us-ac__x)
   so theme and Elementor kit rules cannot outrank it. The Style tab sits one
   class above that again, so panel settings still win.
   ========================================================================== */

.us-ac {
	--us-ac-brand: var(--brand, #4c2a85);
	--us-ac-deep: var(--brand-deep, #2a1650);
	--us-ac-accent: var(--accent, #e8a33d);
	--us-ac-hot: var(--hot, #c8256b);
	--us-ac-mono: var(--f-mono, "JetBrains Mono", ui-monospace, "Courier New", monospace);
	--us-ac-display: var(--f-display, "Bricolage Grotesque", "Trebuchet MS", sans-serif);

	position: relative;
	display: block;
	max-width: 100%;
}

.us-ac *,
.us-ac *::before,
.us-ac *::after {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   1. Trigger
   -------------------------------------------------------------------------- */

.us-ac .us-ac__trigger-wrap {
	display: flex;
}

/* The trigger lays its logo, label and caret out with flex. Some themes set
   display on every button with !important, which would collapse that, so this
   one property is defended. Everything else stays overridable. */
.us-ac .us-ac__trigger {
	display: inline-flex !important;
	-webkit-appearance: none;
	appearance: none;
	width: auto;
	min-height: 0;
	text-transform: none;
	text-decoration: none;
	letter-spacing: normal;
	text-shadow: none;
	box-shadow: none;
	position: relative;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 7px 14px 7px 8px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 100px;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background .16s, border-color .16s, color .16s;
}

.us-ac .us-ac__trigger:hover {
	background: rgba(255, 255, 255, .16);
}

.us-ac .us-ac__trigger-logo {
	display: block;
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 100px;
	object-fit: cover;
	background: #fff;
}

.us-ac .us-ac__trigger-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	line-height: 0;
}

.us-ac .us-ac__trigger-icon svg {
	width: 18px;
	height: 18px;
	display: block;
	fill: currentColor;
}

.us-ac .us-ac__trigger-icon i {
	font-size: 18px;
	line-height: 1;
}

.us-ac .us-ac__trigger-label {
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   2. Panel
   -------------------------------------------------------------------------- */

.us-ac .us-ac__panel {
	background: var(--us-ac-brand);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 18px;
	padding: 22px;
	box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .6);
	color: #fff;
	min-width: 0;
}

.us-ac .us-ac__panel[hidden] {
	display: none !important;
}

/* Dropdown mode — floats over the page, anchored to the trigger. */
.us-ac--dropdown .us-ac__panel {
	position: absolute;
	z-index: 90;
	top: calc(100% + 10px);
	width: 360px;
	max-width: calc(100vw - 32px);
}

.us-ac--dropdown.us-ac--panel-left .us-ac__panel {
	left: 0;
}

.us-ac--dropdown.us-ac--panel-right .us-ac__panel {
	right: 0;
}

.us-ac--dropdown.us-ac--panel-center .us-ac__panel {
	left: 50%;
	transform: translateX(-50%);
}

/* Inline mode — expands in the flow and pushes content down. */
.us-ac--inline .us-ac__panel,
.us-ac--static .us-ac__panel {
	position: static;
	width: 100%;
	margin-top: 10px;
}

.us-ac--static .us-ac__panel {
	margin-top: 0;
}

/* Deliberately !important. This element is fixed and covers the whole
   viewport, so a stray theme rule making it visible takes the entire page
   down with it. The hidden attribute is the single source of truth. */
.us-ac .us-ac__backdrop {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 89;
	background: rgba(10, 6, 20, .55);
}

.us-ac .us-ac__backdrop[hidden] {
	display: none !important;
}

/* --------------------------------------------------------------------------
   3. Identity — logo, client name, plan chip
   -------------------------------------------------------------------------- */

.us-ac .us-ac__identity {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

.us-ac--identity-row .us-ac__identity {
	flex-direction: row;
	align-items: center;
	text-align: left;
	gap: 13px;
}

.us-ac .us-ac__logo {
	display: grid;
	place-items: center;
	flex: none;
	width: 148px;
	max-width: 100%;
	min-height: 58px;
	padding: 10px 14px;
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}

.us-ac--identity-row .us-ac__logo {
	width: 52px;
	min-height: 52px;
	height: 52px;
	padding: 0;
	border-radius: 12px;
}

.us-ac .us-ac__logo-img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}

.us-ac .us-ac__initials {
	font-family: var(--us-ac-display);
	font-weight: 800;
	font-size: 19px;
	letter-spacing: -.01em;
	color: var(--us-ac-deep);
}

.us-ac .us-ac__identity-text {
	min-width: 0;
}

.us-ac .us-ac__name {
	font-family: var(--us-ac-display);
	font-weight: 800;
	font-size: 26px;
	letter-spacing: -.025em;
	line-height: 1.1;
	margin: 0;
	color: #fff;
	overflow-wrap: anywhere;
}

.us-ac .us-ac__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 7px;
	padding: 3px 11px;
	border-radius: 100px;
	background: var(--us-ac-accent);
	color: var(--us-ac-deep);
	font-family: var(--us-ac-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   4. Details grid
   -------------------------------------------------------------------------- */

.us-ac .us-ac__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 16px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.us-ac .us-ac__fact {
	min-width: 0;
	margin: 0;
}

.us-ac .us-ac__fact-k {
	display: block;
	font-family: var(--us-ac-mono);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
	margin: 0;
	line-height: 1.4;
}

.us-ac .us-ac__fact-v {
	display: block;
	font-size: 15px;
	font-weight: 700;
	margin: 3px 0 0;
	color: #fff;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.us-ac .us-ac__fact-v.is-highlight {
	color: var(--us-ac-accent);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.us-ac .us-ac__actions {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 22px 0 0;
}

.us-ac--actions-inline .us-ac__actions {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 7px;
}

.us-ac .us-ac__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 11px 16px;
	border-radius: 100px;
	border: 1px solid rgba(255, 255, 255, .3);
	background: rgba(255, 255, 255, .07);
	color: #fff;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .16s, border-color .16s, color .16s, transform .16s;
}

.us-ac--actions-inline .us-ac__pill {
	padding: 7px 13px;
	font-size: 12.5px;
	font-weight: 600;
}

.us-ac .us-ac__pill:hover {
	background: rgba(255, 255, 255, .17);
	transform: translateY(-1px);
}

.us-ac .us-ac__pill.is-pay {
	background: var(--us-ac-accent);
	border-color: var(--us-ac-accent);
	color: var(--us-ac-deep);
}

.us-ac .us-ac__pill.is-pay:hover {
	background: #f0b258;
}

.us-ac .us-ac__pill.is-upgrade {
	background: var(--us-ac-hot);
	border-color: var(--us-ac-hot);
	color: #fff;
}

.us-ac .us-ac__pill.is-upgrade:hover {
	background: #d93b7e;
}

.us-ac .us-ac__pill-icon {
	display: inline-flex;
	align-items: center;
	flex: none;
	line-height: 0;
}

.us-ac .us-ac__pill-icon svg {
	width: 15px;
	height: 15px;
	display: block;
	fill: currentColor;
}

/* --------------------------------------------------------------------------
   6. Motion
   -------------------------------------------------------------------------- */

.us-ac--dropdown .us-ac__panel,
.us-ac--inline .us-ac__panel {
	animation: us-ac-in .18s ease-out;
}

@keyframes us-ac-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

.us-ac--dropdown.us-ac--panel-center .us-ac__panel {
	animation: us-ac-in-center .18s ease-out;
}

@keyframes us-ac-in-center {
	from {
		opacity: 0;
		transform: translate(-50%, -6px);
	}
}

/* --------------------------------------------------------------------------
   7. Responsive — the dropdown becomes a bottom sheet on small screens
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	.us-ac--dropdown.is-open .us-ac__backdrop:not([hidden]) {
		display: block;
	}

	/* The sheet is pinned to the viewport edges, so it overrides the panel
	   width and anchor settings from the Style tab. Those are desktop
	   concerns; on a phone the sheet geometry is not negotiable. */
	.us-ac--dropdown .us-ac__panel,
	.us-ac--dropdown.us-ac--panel-left .us-ac__panel,
	.us-ac--dropdown.us-ac--panel-center .us-ac__panel,
	.us-ac--dropdown.us-ac--panel-right .us-ac__panel {
		position: fixed !important;
		z-index: 90;
		top: auto !important;
		right: 12px !important;
		bottom: 12px !important;
		left: 12px !important;
		width: auto !important;
		max-width: none !important;
		transform: none !important;
		max-height: 88vh;
		overflow-y: auto;
		overscroll-behavior: contain;
		border-radius: 16px;
		animation: us-ac-sheet .22s ease-out;
	}

	/* Only the open sheet becomes a flex column. Applying display to the
	   closed panel here would outrank [hidden] and leave it on screen. */
	.us-ac--dropdown .us-ac__panel:not([hidden]) {
		display: block;
	}

	@keyframes us-ac-sheet {
		from {
			opacity: 0;
			transform: translateY(14px);
		}
	}

	.us-ac .us-ac__trigger-label {
		white-space: normal;
	}
}

@media (max-width: 479px) {

	.us-ac .us-ac__name {
		font-size: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.us-ac .us-ac__panel {
		animation: none !important;
	}

	.us-ac .us-ac__trigger,
	.us-ac .us-ac__pill {
		transition: none;
	}

	.us-ac .us-ac__pill:hover {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   8. Accessibility floor
   -------------------------------------------------------------------------- */

.us-ac :focus-visible {
	outline: 3px solid var(--us-ac-accent);
	outline-offset: 2px;
	border-radius: 4px;
}