/**
 * Extension detail – PX File Pro animated hero (html/com_content/article/ext-hero/px-file-pro.php, js/px-ext-filepro.js).
 * Builds on the PX File Manager hero frame (css/px-ext-filemanager.css, .pxfm). Scoped under .pxfp.
 * Every box has a fixed size, so rows and pills that change during the animation never move the page.
 */
.pxfp .pxfm-win { height: 300px; grid-template-rows: 37px 1fr; }
.pxfp .pxfm-side, .pxfp .pxfm-main { overflow: hidden; }
.pxfp .pxfm-main { padding-bottom: 0; }

.pxfp-who { display: flex; align-items: center; gap: 6px; margin-left: auto; padding: 0 12px; font-weight: 600; color: #3b4256; }
.pxfp-who i { color: #8a93a6; }
.pxfp-pill { display: inline-flex; align-items: center; justify-content: center; width: 112px; height: 20px; border-radius: 999px; font-size: 10.5px; font-weight: 700; transition: background .3s, color .3s; }
.pxfp-pill.is-super { background: #fff4e5; color: #b45309; }
.pxfp-pill.is-team { background: var(--pxfm-soft); color: var(--pxfm-ink); }

.pxfp-rows { display: flex; flex-direction: column; }
.pxfp-row { display: flex; flex: none; align-items: center; gap: 8px; height: 31px; padding: 0 12px; border-bottom: 1px solid var(--pxfm-line); font-weight: 500; color: var(--pxfm-text); white-space: nowrap; transition: background .4s; }
.pxfp-row i { width: 13px; text-align: center; color: #f5b301; }
.pxfp-row i.is-img { color: #22a06b; }
.pxfp-row em { margin-left: auto; font-style: normal; font-size: 10.5px; color: var(--pxfm-mute); }
.pxfp-row.is-new { background: #f3fcf6; }
.pxfp-lock { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px; border-radius: 6px; background: #f2f4f7; color: #5b6474; font-size: 10px; font-weight: 600; transition: opacity .3s; }
.pxfp-lock i { width: auto; color: #8a93a6; }
.pxfp .pxfp-gone { display: none; }

.pxfp-toast { position: absolute; left: 50%; bottom: 18px; transform: translate(-50%, 6px); display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px; background: var(--pxfm-navy); color: #fff; font-weight: 700; white-space: nowrap; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
.pxfp-toast i { color: #f87171; }
.pxfp-toast span { font-weight: 500; color: #b9c1e0; }
.pxfp-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.pxfp-list { display: flex; flex-direction: column; gap: 2px; }
.pxfp-list span { display: flex; align-items: center; gap: 7px; height: 24px; padding: 0 6px; border-radius: 6px; font-size: 11px; color: var(--pxfm-text); white-space: nowrap; overflow: hidden; transition: opacity .3s, background .3s; }
.pxfp-list i { width: 12px; text-align: center; color: #8a93a6; }
.pxfp-list i.is-dir { color: #f5b301; }
.pxfp-list i.is-no { color: #d92d20; }
.pxfp-list em { margin-left: auto; font-style: normal; color: var(--pxfm-mute); }
.pxfp-log b { flex: none; height: 16px; padding: 0 6px; border-radius: 4px; background: #475467; color: #fff; font-size: 9.5px; line-height: 16px; font-weight: 700; }
.pxfp-log .is-fail { background: #fef3f2; }
.pxfp-log .is-fail b { background: #d92d20; }
.pxfp .pxfm-cards { margin-top: -46px; }

@media (max-width: 640px) {
	.pxfp .pxfm-win { height: 250px; }
	.pxfp-row { height: 28px; }
	.pxfp .pxfm-cards { margin-top: 10px; }
}