/* Profile Background — banner, lifted avatar, and the picker + edit modals.
   Dark theme + --ps-orange accent, matching profile-riftmana.css / the
   avatar-decoration modal. Loaded only on the [fast_profile] page. */

/* ══════════════════════════════════════════════════════════════════════
   HERO  — the banner is a background layer INSIDE the header, and the header
   content (avatar, name, stats) overlays it. The hero shape is ALWAYS applied
   on the fast profile (.rm-profile-hero); the banner shows a neutral default
   background until a preset image is chosen, so nothing shifts when one is
   added or removed. .rm-has-pbg just marks that an actual image is set.
   ══════════════════════════════════════════════════════════════════════ */
.rm-pbg-cover {
	position: absolute;
	inset: 0;
	z-index: 0;                     /* sits behind the header content */
	/* Neutral default hero background when no preset is chosen. A chosen preset
	   overrides `background-image` inline, so the hero SHAPE never changes —
	   picking/removing an image only swaps the picture, nothing shifts. */
	background-color: #15151c;
	background-image: linear-gradient(135deg, #262532 0%, #1a1922 55%, #131218 100%);
	background-size: cover;
	background-position: center;
	border-radius: 16px;            /* soften the hero corners */
}
/* Readability scrim: darker on the left (where the content sits) and along the
   bottom, fading toward the top-right so the art still reads through. */
.rm-pbg-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: 16px;            /* match the banner's rounded corners */
	background:
		linear-gradient(90deg, rgba(8,8,11,.92) 0%, rgba(8,8,11,.7) 40%, rgba(8,8,11,.25) 74%, rgba(8,8,11,.36) 100%),
		linear-gradient(0deg, rgba(8,8,11,.82) 0%, rgba(8,8,11,0) 60%);
}

/* Turn the header into a hero: fixed min-height, no bottom rule, content
   pinned to the bottom over the banner. */
.rm-profile-hero .rm-profile-header {
	position: relative;
	min-height: 240px;
	padding: 0;
	border-bottom: 0;
	/* No overflow:hidden — the banner layer is already exactly header-sized,
	   and clipping here would cut off the gear's dropdown menu. */
}
.rm-profile-hero .rm-profile-header-inner {
	position: relative;
	z-index: 1;                     /* above the .rm-pbg-cover layer */
	min-height: 240px;
	box-sizing: border-box;
	padding: 26px 30px;
	align-items: flex-end;          /* bottom-align avatar + info over the art */
}
/* Gear/actions pinned to the top-right of the content column. */
.rm-profile-hero .rm-profile-actions-wrapper {
	position: absolute;
	top: 16px;
	right: 30px;
	z-index: 2;
	margin: 0;
}
/* Light ring around the avatar so it reads as cut into the banner. Yield to a
   decoration ring when one is present (that ring becomes the visible edge). */
.rm-profile-hero .rm-profile-avatar:not(:has(.rm-avatar-ring)) img {
	border: 3px solid rgba(255, 255, 255, .85);
}
.rm-profile-hero .rm-profile-avatar img {
	box-shadow: 0 6px 20px rgba(0, 0, 0, .55);
}
/* Soft shadow on the name for legibility over brighter art. */
.rm-profile-hero .rm-profile-name {
	text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
/* Desktop hero: raise the whole info block (username + bio + socials) up a bit,
   and give the username an EXTRA lift so there's a gap between it and the bio.
   Because the name row's shift is on top of the block's, the gap is preserved
   while everything moves up together. Both are disabled on mobile (below),
   where the header stacks and a shift would collide with the follow stats.
   Tune the two values. */
.rm-profile-hero .rm-profile-info {
	transform: translateY(-18px);
}
.rm-profile-hero .rm-profile-name-row {
	transform: translateY(-16px);
}
/* Let a long single-word username wrap instead of forcing horizontal overflow
   on narrow screens. */
.rm-fast-profile .rm-profile-name {
	overflow-wrap: anywhere;
}

@media (max-width: 768px) {
	.rm-profile-hero .rm-profile-actions-wrapper { top: 12px; right: 16px; }
	/* Drop the desktop username/info lift from 768px down — the header starts
	   wrapping here, so the transform would collide with the stats/gear. */
	.rm-profile-hero .rm-profile-info,
	.rm-profile-hero .rm-profile-name-row { transform: none; }
}
@media (max-width: 600px) {
	.rm-profile-hero .rm-profile-header,
	.rm-profile-hero .rm-profile-header-inner { min-height: 200px; }
	.rm-profile-hero .rm-profile-header-inner {
		padding: 22px 18px;
		align-items: center;   /* center the stacked column */
		gap: 10px;
	}
	.rm-profile-hero .rm-profile-info { margin-top: 4px; gap: 10px; }
	/* Uniform vertical darken so centered text stays legible over bright art —
	   the desktop scrim is weighted to the left, where nothing sits on mobile. */
	.rm-pbg-cover::after {
		background: linear-gradient(180deg, rgba(8, 8, 11, .5) 0%, rgba(8, 8, 11, .32) 38%, rgba(8, 8, 11, .66) 100%);
	}
}

/* ══════════════════════════════════════════════════════════════════════
   Settings (gear) dropdown — grouped style + click-to-open.
   Scoped to .rm-fast-profile so the auth pages / old UM template are untouched.
   ══════════════════════════════════════════════════════════════════════ */
/* Glass panel */
.rm-fast-profile .rm-settings-menu {
	min-width: 250px;
	padding: 7px;
	/* Near-opaque solid panel — do NOT use backdrop-filter/blur here: it makes
	   this a containing block for position:fixed descendants, which breaks the
	   currency dropdown's fixed-positioned list (positioned from viewport coords)
	   so its panel opens off-screen. */
	background: rgba(20, 20, 27, .98);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
	overflow: visible;
}
/* Click-to-open state (set by JS), layered on top of the base hover/focus-
   within open — so the menu is reachable on touch, where hover never fires. */
.rm-settings-menu.is-open { display: block; }

/* Groups + labels + separators */
.rm-settings-group { display: flex; flex-direction: column; gap: 2px; }
.rm-settings-group-label {
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 700;
	color: rgba(255, 255, 255, .4);
	padding: 8px 10px 4px;
}
.rm-settings-sep { height: 1px; background: rgba(255, 255, 255, .08); margin: 6px 8px; }

/* Menu items (links + button) with icon chips + orange hover */
.rm-fast-profile .rm-settings-menu .rm-menu-item {
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	padding: 9px 10px;
	border: 0;
	border-radius: 9px;
	background: none;
	color: #e9e9ec;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.rm-mi-ic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, .06);
	color: #cfcfd4;
	transition: background .15s ease, color .15s ease;
}
.rm-fast-profile .rm-mi-ic svg { width: 15px; height: 15px; opacity: 1; }
.rm-fast-profile .rm-settings-menu .rm-menu-item:hover {
	background: rgba(255, 166, 0, .13);
	color: #fff;
}
.rm-fast-profile .rm-settings-menu .rm-menu-item:hover .rm-mi-ic {
	background: var(--ps-orange);
	color: #191512;
}
.rm-fast-profile .rm-settings-menu .rm-menu-item:focus-visible {
	outline: 2px solid var(--ps-orange);
	outline-offset: -2px;
}

/* Preference rows — drop the old bordered sections; clean spacing */
.rm-fast-profile .rm-settings-menu .rm-settings-menu-section {
	border: 0;
	padding: 6px 10px;
}
.rm-fast-profile .rm-settings-menu .rm-settings-menu-label {
	font-size: 11px;
	text-transform: none;
	letter-spacing: 0;
	color: rgba(255, 255, 255, .55);
	font-weight: 600;
	margin-bottom: 7px;
}
/* Pricing source → segmented pill group (active option highlighted) */
.rm-fast-profile .rm-settings-menu-section .global-market-buttons {
	display: flex;
	gap: 4px;
	padding: 3px;
	background: rgba(0, 0, 0, .28);
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 9px;
}
.rm-fast-profile .rm-settings-menu-section .global-market-btn {
	flex: 1;
	padding: 7px 8px;
	border: 0;
	border-radius: 6px;
	background: none;
	cursor: pointer;
	transition: background .15s ease;
}
.rm-fast-profile .rm-settings-menu-section .global-market-btn:hover {
	background: rgba(255, 255, 255, .06);
}
.rm-fast-profile .rm-settings-menu-section .global-market-btn.active {
	background: rgba(255, 255, 255, .14);
}
.rm-fast-profile .rm-settings-menu-section .global-market-logo {
	height: 15px;
	display: block;
	margin: 0 auto;
}
/* Currency dropdown trigger — fill the panel width */
.rm-fast-profile .rm-settings-menu-section .global-currency-trigger {
	width: 100%;
	justify-content: space-between;
}

/* Gear button keyboard focus ring */
.rm-fast-profile .rm-settings-gear:focus-visible {
	outline: 2px solid var(--ps-orange);
	outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════
   MODAL SHELL  (.rm-pm-*) — shared by the background picker + edit popup.
   Mirrors the avatar-decoration modal so both feel like one system.
   ══════════════════════════════════════════════════════════════════════ */
.rm-pm-modal[hidden] { display: none; }
.rm-pm-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.rm-pm-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .65);
	animation: rm-pm-fade .15s ease;
}
.rm-pm-box {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: #1a1a1a;
	color: #e0e0e0;
	border: 1px solid #2a2a2a;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
	padding: 28px;
	animation: rm-pm-pop .12s cubic-bezier(.2, .8, .2, 1);
}
.rm-pm-box--edit { max-width: 600px; padding: 0; }

@keyframes rm-pm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rm-pm-pop {
	from { opacity: 0; transform: translateY(8px) scale(.98); }
	to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.rm-pm-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	background: transparent;
	border: 0;
	color: #888;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	border-radius: 6px;
	z-index: 3;
	transition: background .15s ease, color .15s ease;
}
.rm-pm-close:hover { background: #2a2a2a; color: #fff; }

.rm-pm-head { margin-bottom: 20px; }
.rm-pm-head h2 { margin: 0 0 4px; font-size: 18px; color: #fff; font-weight: 700; }
.rm-pm-sub {
	margin: 0;
	color: #888;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.rm-pm-foot {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding-top: 18px;
	margin-top: 4px;
	border-top: 1px solid #2a2a2a;
}
.rm-pm-btn {
	padding: 9px 18px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.rm-pm-btn-primary { background: var(--ps-orange); color: #1a1a1a; border-color: var(--ps-orange); }
.rm-pm-btn-primary:hover { background: var(--ps-orange-2); border-color: var(--ps-orange-2); }
.rm-pm-btn-primary:disabled { opacity: .6; cursor: wait; }
.rm-pm-btn-ghost { background: transparent; color: #ccc; border-color: #3a3a3a; }
.rm-pm-btn-ghost:hover { background: #2a2a2a; color: #fff; border-color: #555; }

/* ── Background picker grid ─────────────────────────────────────────────── */
.rm-bg-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin-bottom: 4px;
}
.rm-bg-tile {
	position: relative;
	padding: 0;
	border: 2px solid #2a2a2a;
	border-radius: 10px;
	overflow: hidden;
	background: #202027;
	cursor: pointer;
	text-align: left;
	transition: border-color .15s ease, transform .15s ease;
}
.rm-bg-tile:hover { transform: translateY(-2px); border-color: #444; }
.rm-bg-tile:focus-visible { outline: 2px solid var(--ps-orange); outline-offset: 2px; }
.rm-bg-tile.is-selected { border-color: var(--ps-orange); }

.rm-bg-swatch {
	display: block;
	height: 80px;
	background-color: #17171d;
	background-size: cover;
	background-position: center;
}
.rm-bg-swatch-none {
	background-image:
		linear-gradient(135deg, transparent 47%, #3a3a44 47%, #3a3a44 53%, transparent 53%);
}
.rm-bg-tile-label {
	display: block;
	padding: 9px 12px;
	font-size: 12.5px;
	font-weight: 600;
	color: #e0e0e0;
	background: rgba(255, 255, 255, .03);
}
.rm-bg-check {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ps-orange);
	color: #1a1a1a;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 2;
}
.rm-bg-check svg { width: 13px; height: 13px; }
.rm-bg-tile.is-selected .rm-bg-check { display: flex; }

.rm-bg-locked-hint {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 16px 0 0;
	padding: 11px 14px;
	border: 1px dashed #333;
	border-radius: 10px;
	font-size: 12.5px;
	color: #888;
}
.rm-bg-locked-hint svg { width: 15px; height: 15px; flex-shrink: 0; }

@media (max-width: 520px) {
	.rm-bg-grid { grid-template-columns: 1fr; }
}

/* ── Edit-profile form inside the modal ─────────────────────────────────
   Strip the form's own centered-card chrome so it sits flush in the modal
   box (the modal already provides the card). The form markup + its secure
   save handler are otherwise untouched. */
.rm-pm-box--edit .rm-fast-edit {
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}
.rm-pm-box--edit .rm-fast-edit h2 { margin-top: 0; }

/* Sticky header + footer: the title and Save/Cancel stay put while the body
   scrolls. The box (.rm-pm-box) is the scroll container, so sticky anchors to
   it. Only in the modal — the ?edit=1 page keeps normal flow. */
.rm-pm-box--edit .rm-edit-head {
	position: sticky;
	top: 0;
	z-index: 2;
	margin: 0;
	padding: 22px 26px 16px;
	background: #1a1a1a;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.07 );
}
.rm-pm-box--edit .rm-edit-error { margin: 14px 26px 0; }
.rm-pm-box--edit .rm-edit-body { padding: 4px 26px 8px; }
.rm-pm-box--edit .rm-fast-edit-actions {
	position: sticky;
	bottom: 0;
	z-index: 2;
	margin-top: 0;
	padding: 15px 26px;
	background: #1a1a1a;
	border-top: 1px solid rgba( 255, 255, 255, 0.07 );
}

/* ── Motion / a11y ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.rm-pm-backdrop, .rm-pm-box { animation: none; }
	.rm-bg-tile { transition: none; }
}