/* ZVBlox 2021 — our additions on top of the 2021 Roblox stylesheets. */

/* ── logo (the 2021 Roblox wordmark style, spelled ZVBLOX) ───────────────── */
/* Like .icon-logo / .icon-logo-r: the small mark below 1688px, the wordmark above. */
.zv-logo { display: none; align-items: center; height: 30px; font-family: "HCo Gotham SSm", "Gotham SSm A", "Gotham SSm B", Helvetica, Arial, sans-serif; font-weight: 900; font-size: 23px; line-height: 1; letter-spacing: -.4px; color: #fff; white-space: nowrap; }
.zv-logo i { display: inline-block; box-sizing: border-box; width: 17px; height: 17px; margin: 0 1px 0 2px; border: 6px solid currentColor; transform: rotate(-15deg); }
.zv-logo-r { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; vertical-align: middle; }
.zv-logo-r i { display: block; box-sizing: border-box; width: 23px; height: 23px; border: 8px solid #fff; transform: rotate(-15deg); }
.light-theme .zv-logo { color: #393b3d; }
.light-theme .zv-logo-r i { border-color: #393b3d; }
.rbx-header .navbar-brand { display: block; height: 40px; }
@media (min-width: 1688px) {
  .rbx-header .navbar-brand .zv-logo { display: inline-flex; }
  .rbx-header .navbar-brand .zv-logo-r { display: none; }
}

/* ── page states ─────────────────────────────────────────────────────────── */
.zv-page-loading, .zv-av-loading { padding: 80px 0; text-align: center; }
.zv-error { padding: 40px 0; text-align: center; }
.zv-empty, .zv-av-empty { padding: 24px 0; }
.system-feedback#zv-feedback { position: fixed; top: 40px; left: 0; right: 0; z-index: 1060; pointer-events: none; }
#zv-feedback .alert { display: block; text-align: center; }
.modal-open .zv-modal-root .modal { overflow-y: auto; }
.zv-modal-root .modal { position: fixed; inset: 0; z-index: 1050; }
.zv-modal-root .modal-backdrop { position: fixed; inset: 0; z-index: 1040; opacity: .5; background: #000; }
.zv-modal-root .modal-dialog { margin: 120px auto 40px; }
.zv-modal-root .modal-buttons { display: flex; gap: 12px; justify-content: center; }
.zv-modal-root .modal-buttons .modal-button { min-width: 120px; }
.zv-modal-root .form-group .input-field { width: 100%; }

/* ── game launch dialog ──────────────────────────────────────────────────── */
.zv-launch { text-align: center; padding: 12px 6px 6px; }
.zv-launch-logo { width: 72px; height: 72px; margin: 0 auto 12px; background: url('/zv/img/icon.png') center / contain no-repeat; }
.zv-launch-spinner { height: 40px; margin-bottom: 12px; }
.zv-launch-text { margin-bottom: 8px; }
.zv-launch-help p { margin-bottom: 12px; }

/* ── home ────────────────────────────────────────────────────────────────── */
.home-header-container { margin-bottom: 18px; }
.home-header { display: flex; align-items: center; min-height: 150px; }
.home-header .avatar-headshot-lg { flex: 0 0 auto; }
.home-header .avatar-headshot-lg .avatar-card-image { width: 150px; height: 150px; border-radius: 50%; overflow: hidden; display: block; }
.home-header .avatar-headshot-lg img { width: 100%; height: 100%; }
.home-header .user-info-container { margin-left: 24px; min-width: 0; }
.home-header h1 { margin: 0; font-size: 32px; font-weight: 700; line-height: 1.25; }
.home-header h1 a { color: inherit; }
.home-header .user-name-container { display: flex; align-items: center; gap: 8px; }
.home-header .home-header-username { margin-top: 2px; }

/* ── avatar editor ───────────────────────────────────────────────────────── */
.zv-avatar .avatar-editor-header { margin-bottom: 12px; }
.zv-avatar-cols { display: flex; gap: 24px; align-items: flex-start; }
.zv-avatar-left { flex: 0 0 300px; width: 300px; }
.zv-avatar-right { flex: 1 1 auto; min-width: 0; }
.zv-avatar .avatar-back { position: relative; width: 300px; height: 300px; border-radius: 8px; overflow: hidden; padding: 0; }
.zv-avatar-thumb { display: block; width: 100%; height: 100%; }
.zv-avatar-thumb img { width: 100%; height: 100%; object-fit: contain; }
.zv-avatar-thumb .spinner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.zv-avatar-rig { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 6px; }
.zv-rig-toggle { display: inline-flex; gap: 6px; }
.zv-rig-toggle button { min-width: 52px; }
.zv-redraw { margin: 6px 0 18px; }
.zv-wearing h3 { margin: 0 0 8px; }
.zv-wearing-list .item-card.zv-small { width: 92px; margin: 0 6px 6px 0; }
.zv-wearing-list .item-card.zv-small .item-card-thumb-container { width: 92px; height: 92px; }
.zv-av-tabs { position: relative; margin-bottom: 0; }
.zv-av-tabs .nav-tabs { display: flex; }
.zv-av-tabs .rbx-tab { flex: 1 1 0; }
.zv-av-tabs .rbx-tab .rbx-tab-heading { display: flex; align-items: center; justify-content: center; gap: 4px; }
.zv-av-submenu { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; padding: 12px 16px; border-radius: 0 0 8px 8px; box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.dark-theme .zv-av-submenu { background: #393b3d; }
.light-theme .zv-av-submenu { background: #fff; }
.zv-sub-list { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 0; list-style: none; }
.zv-sub-list a { font-size: 16px; }
.zv-sub-list a.active { font-weight: 700; }
.dark-theme .zv-sub-list a { color: #bdbebe; } .dark-theme .zv-sub-list a:hover, .dark-theme .zv-sub-list a.active { color: #fff; }
.zv-av-crumb { display: flex; align-items: center; gap: 4px; margin: 14px 0 10px; font-size: 16px; }
.zv-av-items { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; }
.zv-av-items .item-card, .zv-wearing-list .item-card { float: none; list-style: none; width: 126px; }
.zv-av-items .item-card-thumb-container { width: 126px; height: 126px; position: relative; }
.item-card .item-card-thumb { display: block; width: 100%; height: 100%; }
.item-card .item-card-thumb img { width: 100%; height: 100%; }
.zv-av-items .item-card .item-card-equipped, .zv-wearing-list .item-card .item-card-equipped { display: none; height: auto; }
.zv-av-items .item-card.zv-worn .item-card-equipped, .zv-wearing-list .item-card.zv-worn .item-card-equipped { display: block; }
.zv-wearing-list { display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
.zv-av-more { text-align: center; margin: 16px 0; }
.zv-skin { padding: 16px; border-radius: 8px; }
.zv-skin-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.zv-skin-parts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.zv-part { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); background: transparent; color: inherit; }
.zv-part.active { border-color: #00a2ff; }
.zv-swatch { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.zv-palette { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.zv-color { width: 40px; height: 40px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.zv-color.selected { box-shadow: 0 0 0 3px #00a2ff; }
.zv-scale { padding: 16px; border-radius: 8px; }
.zv-scale-row { display: flex; align-items: center; gap: 14px; margin: 10px 0; }
.zv-scale-row .text-label { width: 110px; }
.zv-scale-row input { flex: 1; }
.zv-scale-row.disabled { opacity: .5; }
.zv-scale-val { width: 48px; text-align: right; }
.zv-outfit-bar { margin-bottom: 12px; }
@media (max-width: 767px) {
  .zv-avatar-cols { flex-direction: column; }
  .zv-avatar-left, .zv-avatar-right { width: 100%; flex-basis: auto; }
  .zv-avatar .avatar-back { margin: 0 auto; }
}

/* ── settings / membership / transactions ────────────────────────────────── */
.zv-settings .page-heading, .zv-transactions .page-heading { margin-bottom: 12px; }
.zv-setting-row { display: flex; align-items: center; gap: 10px; }
.zv-setting-row .account-settings-label { width: 120px; }
.zv-settings .settings-group { padding: 15px; }
.zv-settings .rbx-select-group { max-width: 360px; position: relative; }
.zv-premium-hero { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.zv-premium-hero h1 { margin: 0 0 4px; }
.zv-premium-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; padding: 0; list-style: none; }
.zv-premium-card { padding: 20px; border-radius: 8px; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.zv-premium-card.current { box-shadow: inset 0 0 0 2px #00b06f; }
.zv-premium-icon { height: 48px; display: flex; align-items: center; justify-content: center; }
.zv-premium-icon .zv-dim { opacity: .3; }
.zv-premium-price { display: flex; align-items: center; justify-content: center; gap: 4px; }
.zv-premium-perks { list-style: none; padding: 0; margin: 0 0 6px; flex: 1; }
.zv-balance { padding: 16px; border-radius: 8px; margin-bottom: 18px; }
.zv-balance-row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.zv-balance-row .text-robux-lg { display: inline-flex; align-items: center; gap: 6px; }
.zv-tx-filter { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.zv-tx-filter .rbx-select-group { width: 240px; position: relative; }
.zv-tx-table { padding: 0 12px; border-radius: 8px; }
.zv-tx-table table { width: 100%; margin: 0; }
.zv-tx-table th, .zv-tx-table td { padding: 10px 8px; }
.zv-neg { opacity: .8; }
.zv-pager { display: flex; justify-content: center; gap: 8px; padding: 12px 0; }

/* ── bare pages (landing) ────────────────────────────────────────────────── */
body.zv-bare { margin-bottom: 0; }
body.zv-bare #navigation-container { display: none; }
body.zv-bare .container-main { margin: 0; padding: 0; min-height: 0; }
body.zv-bare .content { max-width: none; padding: 0; margin: 0; background: transparent; }
body.zv-landing #footer-container { background: #232527; }
body.zv-landing #footer-container .text-footer-nav { color: #bdbebe; }
body.zv-landing #footer-container .copyright-container { border-color: #656668; }
.zv-text-logo { text-align: center; height: 64px; display: flex; align-items: flex-end; justify-content: center; }
.zv-text-logo .zv-logo { display: inline-flex; height: auto; font-size: 58px; letter-spacing: -1px; color: #fff; }
.zv-text-logo .zv-logo i { width: 44px; height: 44px; border-width: 15px; margin: 0 3px 0 5px; }
.zv-download-btn { min-width: 220px; display: inline-block; margin-top: 8px; }
#app-stores { text-align: center; }
.birthday-select-group { display: flex; }
.birthday-select-group .rbx-select-group.month { flex: 0 0 40%; } .birthday-select-group .rbx-select-group.day, .birthday-select-group .rbx-select-group.year { flex: 0 0 30%; }

/* ── launch dialog (protocol handler modals) ─────────────────────────────── */
.zv-launch-root .modal-confirmation { position: fixed; z-index: 1050; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 400px; max-width: calc(100% - 32px); }
.zv-launch-root .modal-confirmation .modal-dialog { width: 100%; margin: 0; }
.zv-launch-root .zv-simplemodal-overlay { opacity: .8; }
.zv-logo-r-95 { display: block; width: 95px; height: 95px; margin: 0 auto 12px; background: url('/zv/img/icon.png') center / contain no-repeat; }
.zv-launch-root .modal-message p { margin: 0 0 12px; }
.zv-launch-root .modal-btns { text-align: center; padding-bottom: 6px; }
.zv-launch-root .modal-footer { text-align: center; }

/* ── profile / misc ──────────────────────────────────────────────────────── */
.zv-bc-icon { margin-right: 6px; }
.zv-more-list { list-style: none; padding: 0; margin: 0; }
.zv-more-list li { padding: 8px 0; }
.zv-resale-cols { display: flex; gap: 24px; flex-wrap: wrap; }
.zv-resale-cols > .tab-pane { display: block; flex: 1 1 320px; }
.zv-inventory .catalog-results { float: right; width: calc(100% - 166px); }
.zv-inventory .search-options { float: left; width: 160px; }
.zv-inventory .heading { margin-bottom: 12px; }

/* friends page card menu (react-bootstrap popover under the "..." icon) */
.avatar-card { position: relative; }
.zv-card-menu { display: block; position: absolute; right: 6px; top: 52px; left: auto; z-index: 30; min-width: 120px; }
.zv-card-menu .arrow { left: auto; right: 12px; }
.zv-card-menu .dropdown-menu { display: block; position: relative; }

/* Premium card */
.zv-premium-card { position: relative; }
.zv-premium-card.zv-featured { box-shadow: inset 0 0 0 2px #00b06f; }
.zv-premium-card.zv-featured.current { box-shadow: inset 0 0 0 3px #00b06f; }
.zv-premium-flag { position: absolute; top: 10px; right: 10px; padding: 2px 8px; border-radius: 4px; background: #00b06f; color: #fff; font-size: 12px; font-weight: 700; }
.home-header .user-name-container .icon-premium-medium { margin-right: 8px; vertical-align: middle; }