html, body {
height: 100%;
margin: 0;
}
body {
font-family: var(--uzex-font-family);
background-color: var(--uzex-surface-alt);
color: var(--uzex-text);
}
#app {
height: 100%;
}
/* Shown by App.razor while the auth session is being restored, before the
router (and any protected content) mounts. */
.app-boot-loading {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.app-boot-spinner {
width: 2.5rem;
height: 2.5rem;
border-radius: var(--uzex-radius-full);
border: 3px solid var(--uzex-border);
border-top-color: var(--uzex-blue-600);
animation: app-boot-spin 0.8s linear infinite;
}
@keyframes app-boot-spin {
to {
transform: rotate(360deg);
}
}
/* Static pre-Blazor boot loader shown in #app by wwwroot/index.html
while the WASM runtime and Radzen are still loading - kept distinct
from .app-boot-loading above (that one is a Razor component rendered
by App.razor after Blazor has already started, while restoring the
auth session). Plain HTML/CSS only, no card/shadow/gradient. */
.boot-loader {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 24px;
min-height: 100dvh;
padding: var(--uzex-space-4);
box-sizing: border-box;
background-color: var(--uzex-surface-alt);
}
.boot-loader-logo {
display: block;
height: 48px;
width: auto;
max-width: 100%;
object-fit: contain;
background: transparent;
}
/* Theme-aware logo, same pattern as Login.razor.css: driven by the
data-theme attribute the inline script in index.html sets on
before first paint (mirrored again once Blazor starts). */
.boot-loader-logo-dark {
display: none;
}
:root[data-theme="dark"] .boot-loader-logo-light {
display: none;
}
:root[data-theme="dark"] .boot-loader-logo-dark {
display: block;
}
.boot-loader-spinner {
width: 2rem;
height: 2rem;
border-radius: var(--uzex-radius-full);
border: 3px solid var(--uzex-border);
border-top-color: var(--uzex-blue-600);
animation: boot-loader-spin 0.8s linear infinite;
}
@keyframes boot-loader-spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.boot-loader-spinner {
animation: boot-loader-pulse 1.6s ease-in-out infinite;
}
@keyframes boot-loader-pulse {
0%, 100% {
opacity: 0.35;
}
50% {
opacity: 1;
}
}
}
.boot-loader-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
h1:focus {
outline: none;
}
/* Placeholder feature pages: title + short description only. */
.page-placeholder {
max-width: 42rem;
}
.page-placeholder h1 {
margin: 0 0 var(--uzex-space-2);
font-size: 1.5rem;
font-weight: 600;
color: var(--uzex-text);
}
.page-placeholder p {
margin: 0;
color: var(--uzex-text-muted);
}
#blazor-error-ui {
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
/* Support ("Yordam") FAQ — categories + items management pages and dialogs.
Mirrors the About FAQ / News Categories layout using the shared design tokens. */
.support-faq-page { min-width: 0; overflow-x: clip; }
.support-faq-page h1 { margin: 0; color: var(--uzex-text); }
.support-faq-page-description { margin: var(--uzex-space-2) 0 var(--uzex-space-5); color: var(--uzex-text-muted); }
.support-faq-page-alert { margin-bottom: var(--uzex-space-4); }
.support-faq-panel { min-width: 0; padding: var(--uzex-space-4); border: 1px solid var(--uzex-border-strong); border-radius: var(--uzex-radius-panel); background: var(--uzex-surface); }
.support-faq-panel-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: var(--uzex-space-2); flex-wrap: wrap; }
.support-faq-category-filter { min-width: 16rem; margin-right: auto; }
.support-faq-grid-scroll { width: 100%; min-width: 0; margin-top: var(--uzex-space-4); overflow-x: auto; }
.support-faq-grid-scroll .rz-data-grid { min-width: 52rem; }
.support-faq-answer-cell { display: block; max-width: 28rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--uzex-text-muted); }
.support-faq-actions { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.support-faq-reorder-hint { margin-top: var(--uzex-space-3); font-size: 0.8125rem; color: var(--uzex-text-muted); }
/* FAQ Category / FAQ Item 5-step editor dialogs — aligned 1:1 with the shared
Cabinet wizard pattern (About Video Materials / News Categories editors):
compact pill stepper, full-width fields, bordered footer. Rules live here
(global) rather than in a scoped .razor.css because the FAQ module already
keeps its styles in app.css; selectors reach .rz-* directly (no ::deep). */
.support-faq-wizard { min-width: 0; color: var(--uzex-text); }
/* Compound .rz-steps.support-faq-steps (0,2,1) so the divider's own padding-bottom
outranks Radzen's later-loaded theme rule `.rz-steps ul { padding: 0 }` (0,1,1) --
a plain `.support-faq-steps > ul` (0,1,1) ties and loses on source order, which
left the 1px border-bottom stuck flush under the step pills. This mirrors how the
scoped wizard styles (`[b-xxx] .announcement-category-steps > ul`) win the cascade. */
.rz-steps.support-faq-steps > ul { display: flex; flex-wrap: nowrap; justify-content: safe center; overflow-x: auto; border-bottom: 1px solid var(--uzex-border-strong); padding-bottom: var(--uzex-space-4); margin-bottom: 1.25rem; }
.support-faq-steps .rz-steps-title { white-space: nowrap; }
.support-faq-steps > ul > li.rz-steps-item { position: relative; flex: 0 0 auto; }
.support-faq-steps > ul > li.rz-steps-item:not(:last-child) { padding-right: 2rem; }
.support-faq-steps > ul > li.rz-steps-item:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: 0; width: 2rem; height: 2px; transform: translateY(-50%); background: var(--uzex-border-strong); }
.support-faq-steps > ul > li.rz-steps-item .rz-menuitem-link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.875rem 0.25rem 0.25rem; border: 1px solid var(--uzex-border-strong); border-radius: 999px; }
.support-faq-steps > ul > li.rz-steps-item.rz-steps-current .rz-menuitem-link { border-color: var(--uzex-blue-600); }
.support-faq-steps.steps-completed-1 > ul > li:nth-child(-n+1):not(.rz-steps-current) .rz-steps-number,
.support-faq-steps.steps-completed-2 > ul > li:nth-child(-n+2):not(.rz-steps-current) .rz-steps-number,
.support-faq-steps.steps-completed-3 > ul > li:nth-child(-n+3):not(.rz-steps-current) .rz-steps-number,
.support-faq-steps.steps-completed-4 > ul > li:nth-child(-n+4):not(.rz-steps-current) .rz-steps-number { background: var(--rz-success-dark); color: #fff; }
.support-faq-steps.steps-completed-1 > ul > li:nth-child(-n+1):not(.rz-steps-current) .rz-steps-title,
.support-faq-steps.steps-completed-2 > ul > li:nth-child(-n+2):not(.rz-steps-current) .rz-steps-title,
.support-faq-steps.steps-completed-3 > ul > li:nth-child(-n+3):not(.rz-steps-current) .rz-steps-title,
.support-faq-steps.steps-completed-4 > ul > li:nth-child(-n+4):not(.rz-steps-current) .rz-steps-title { color: var(--rz-success-dark); font-weight: 600; }
.support-faq-steps.steps-completed-1 > ul > li:nth-child(-n+1):not(.rz-steps-current) .rz-menuitem-link,
.support-faq-steps.steps-completed-2 > ul > li:nth-child(-n+2):not(.rz-steps-current) .rz-menuitem-link,
.support-faq-steps.steps-completed-3 > ul > li:nth-child(-n+3):not(.rz-steps-current) .rz-menuitem-link,
.support-faq-steps.steps-completed-4 > ul > li:nth-child(-n+4):not(.rz-steps-current) .rz-menuitem-link { border-color: var(--rz-success-dark); }
.support-faq-steps.steps-completed-1 > ul > li:nth-child(-n+1):not(.rz-steps-current)::after,
.support-faq-steps.steps-completed-2 > ul > li:nth-child(-n+2):not(.rz-steps-current)::after,
.support-faq-steps.steps-completed-3 > ul > li:nth-child(-n+3):not(.rz-steps-current)::after,
.support-faq-steps.steps-completed-4 > ul > li:nth-child(-n+4):not(.rz-steps-current)::after { background: var(--rz-success-dark); }
.support-faq-step-heading { margin-bottom: var(--uzex-space-3); font-size: 1.0625rem; font-weight: 600; }
.support-faq-step { display: flex; flex-direction: column; gap: var(--uzex-space-4); width: 100%; }
.support-faq-step .support-faq-step-heading { margin-bottom: 0; }
.support-faq-name-field, .support-faq-step { width: 100%; }
.support-faq-name-field .rz-form-field, .support-faq-step .rz-form-field { display: flex; width: 100%; }
.support-faq-name-field .rz-textbox, .support-faq-step .rz-textbox, .support-faq-step .rz-textarea { width: 100%; }
.support-faq-step .rz-textarea { min-height: 8.5rem; resize: vertical; }
.support-faq-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--uzex-space-4); align-items: end; margin-top: var(--uzex-space-4); }
.support-faq-review { margin-top: var(--uzex-space-4); padding-top: var(--uzex-space-4); border-top: 1px solid var(--uzex-border-strong); display: grid; grid-template-columns: 1fr 1fr; gap: var(--uzex-space-3); }
.support-faq-review-item { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; padding: var(--uzex-space-3); border: 1px solid var(--uzex-border-strong); border-radius: var(--uzex-radius-md); background: var(--uzex-surface-alt); }
.support-faq-review-item strong { overflow-wrap: anywhere; }
.support-faq-review-locale { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: var(--uzex-text-muted); }
.support-faq-wizard-actions { padding-top: var(--uzex-space-3); border-top: 1px solid var(--uzex-border-strong); }
@media (max-width: 720px) { .support-faq-settings-grid, .support-faq-review { grid-template-columns: 1fr; } .support-faq-category-filter { margin-right: 0; width: 100%; } .support-faq-wizard-actions { align-items: stretch !important; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .support-faq-steps .rz-steps-fade, .support-faq-steps .rz-steps-slide { transition-duration: 0s !important; animation-duration: 0s !important; } }
/* Support holiday / trading schedule ("Yordam / Bayram kunlari jadvali") management page. */
.support-holiday-page { min-width: 0; overflow-x: clip; }
.support-holiday-page h1 { margin: 0; color: var(--uzex-text); }
.support-holiday-page-description { margin: var(--uzex-space-2) 0 var(--uzex-space-5); color: var(--uzex-text-muted); }
.support-holiday-page-alert { margin-bottom: var(--uzex-space-4); }
.support-holiday-panel { min-width: 0; padding: var(--uzex-space-4); border: 1px solid var(--uzex-border-strong); border-radius: var(--uzex-radius-panel); background: var(--uzex-surface); }
.support-holiday-panel-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: var(--uzex-space-2); flex-wrap: wrap; }
.support-holiday-grid-scroll { width: 100%; min-width: 0; margin-top: var(--uzex-space-4); overflow-x: auto; }
.support-holiday-grid-scroll .rz-data-grid { min-width: 54rem; }
.support-holiday-markets-cell { display: block; max-width: 24rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--uzex-text-muted); }
.support-holiday-actions { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.support-holiday-reorder-hint { margin-top: var(--uzex-space-3); font-size: 0.8125rem; color: var(--uzex-text-muted); }
/* Holiday Schedule 5-step editor dialog — aligned 1:1 with the shared Cabinet
wizard pattern (see the FAQ block above). Compound .rz-steps.support-holiday-steps
(0,2,1) so the divider's padding-bottom outranks Radzen's later-loaded
`.rz-steps ul { padding: 0 }` (0,1,1). */
.support-holiday-wizard { min-width: 0; color: var(--uzex-text); }
.rz-steps.support-holiday-steps > ul { display: flex; flex-wrap: nowrap; justify-content: safe center; overflow-x: auto; border-bottom: 1px solid var(--uzex-border-strong); padding-bottom: var(--uzex-space-4); margin-bottom: 1.25rem; }
.support-holiday-steps .rz-steps-title { white-space: nowrap; }
.support-holiday-steps > ul > li.rz-steps-item { position: relative; flex: 0 0 auto; }
.support-holiday-steps > ul > li.rz-steps-item:not(:last-child) { padding-right: 2rem; }
.support-holiday-steps > ul > li.rz-steps-item:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: 0; width: 2rem; height: 2px; transform: translateY(-50%); background: var(--uzex-border-strong); }
.support-holiday-steps > ul > li.rz-steps-item .rz-menuitem-link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.875rem 0.25rem 0.25rem; border: 1px solid var(--uzex-border-strong); border-radius: 999px; }
.support-holiday-steps > ul > li.rz-steps-item.rz-steps-current .rz-menuitem-link { border-color: var(--uzex-blue-600); }
.support-holiday-steps.steps-completed-1 > ul > li:nth-child(-n+1):not(.rz-steps-current) .rz-steps-number,
.support-holiday-steps.steps-completed-2 > ul > li:nth-child(-n+2):not(.rz-steps-current) .rz-steps-number,
.support-holiday-steps.steps-completed-3 > ul > li:nth-child(-n+3):not(.rz-steps-current) .rz-steps-number,
.support-holiday-steps.steps-completed-4 > ul > li:nth-child(-n+4):not(.rz-steps-current) .rz-steps-number { background: var(--rz-success-dark); color: #fff; }
.support-holiday-steps.steps-completed-1 > ul > li:nth-child(-n+1):not(.rz-steps-current) .rz-steps-title,
.support-holiday-steps.steps-completed-2 > ul > li:nth-child(-n+2):not(.rz-steps-current) .rz-steps-title,
.support-holiday-steps.steps-completed-3 > ul > li:nth-child(-n+3):not(.rz-steps-current) .rz-steps-title,
.support-holiday-steps.steps-completed-4 > ul > li:nth-child(-n+4):not(.rz-steps-current) .rz-steps-title { color: var(--rz-success-dark); font-weight: 600; }
.support-holiday-steps.steps-completed-1 > ul > li:nth-child(-n+1):not(.rz-steps-current) .rz-menuitem-link,
.support-holiday-steps.steps-completed-2 > ul > li:nth-child(-n+2):not(.rz-steps-current) .rz-menuitem-link,
.support-holiday-steps.steps-completed-3 > ul > li:nth-child(-n+3):not(.rz-steps-current) .rz-menuitem-link,
.support-holiday-steps.steps-completed-4 > ul > li:nth-child(-n+4):not(.rz-steps-current) .rz-menuitem-link { border-color: var(--rz-success-dark); }
.support-holiday-steps.steps-completed-1 > ul > li:nth-child(-n+1):not(.rz-steps-current)::after,
.support-holiday-steps.steps-completed-2 > ul > li:nth-child(-n+2):not(.rz-steps-current)::after,
.support-holiday-steps.steps-completed-3 > ul > li:nth-child(-n+3):not(.rz-steps-current)::after,
.support-holiday-steps.steps-completed-4 > ul > li:nth-child(-n+4):not(.rz-steps-current)::after { background: var(--rz-success-dark); }
.support-holiday-step-heading { margin-bottom: var(--uzex-space-3); font-size: 1.0625rem; font-weight: 600; }
.support-holiday-step { display: flex; flex-direction: column; gap: var(--uzex-space-4); width: 100%; }
.support-holiday-step .support-holiday-step-heading { margin-bottom: 0; }
.support-holiday-step .rz-form-field { display: flex; width: 100%; }
.support-holiday-step .rz-textbox, .support-holiday-step .rz-textarea { width: 100%; }
.support-holiday-step .rz-textarea { min-height: 8.5rem; resize: vertical; }
.support-holiday-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--uzex-space-4); align-items: end; margin-top: var(--uzex-space-4); }
.support-holiday-wizard-actions { padding-top: var(--uzex-space-3); border-top: 1px solid var(--uzex-border-strong); }
@media (max-width: 720px) { .support-holiday-settings-grid { grid-template-columns: 1fr; } .support-holiday-wizard-actions { align-items: stretch !important; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .support-holiday-steps .rz-steps-fade, .support-holiday-steps .rz-steps-slide { transition-duration: 0s !important; animation-duration: 0s !important; } }
/* Support "Anketalar va yuklamalar" (Forms & downloads) management pages. */
.support-downloads-page { min-width: 0; overflow-x: clip; }
.support-downloads-page h1 { margin: 0; color: var(--uzex-text); }
.support-downloads-page-description { margin: var(--uzex-space-2) 0 var(--uzex-space-5); color: var(--uzex-text-muted); }
.support-downloads-page-alert { margin-bottom: var(--uzex-space-4); }
.support-downloads-panel { min-width: 0; padding: var(--uzex-space-4); border: 1px solid var(--uzex-border-strong); border-radius: var(--uzex-radius-panel); background: var(--uzex-surface); }
.support-downloads-panel-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: var(--uzex-space-2); flex-wrap: wrap; }
.support-downloads-category-filter { min-width: 16rem; margin-right: auto; }
.support-downloads-grid-scroll { width: 100%; min-width: 0; margin-top: var(--uzex-space-4); overflow-x: auto; }
.support-downloads-grid-scroll .rz-data-grid { min-width: 60rem; }
.support-downloads-desc-cell { display: block; max-width: 24rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--uzex-text-muted); }
.support-downloads-file-chip { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8125rem; font-weight: 600; }
.support-downloads-actions { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.support-downloads-reorder-hint { margin-top: var(--uzex-space-3); font-size: 0.8125rem; color: var(--uzex-text-muted); }
/* Support Downloads / Download Categories 5-step editor dialogs — aligned 1:1 with
the shared Cabinet wizard pattern (see the FAQ block above). Compound
.rz-steps.support-downloads-steps (0,2,1) so the divider's padding-bottom
outranks Radzen's later-loaded `.rz-steps ul { padding: 0 }` (0,1,1). */
.support-downloads-wizard { min-width: 0; color: var(--uzex-text); }
.rz-steps.support-downloads-steps > ul { display: flex; flex-wrap: nowrap; justify-content: safe center; overflow-x: auto; border-bottom: 1px solid var(--uzex-border-strong); padding-bottom: var(--uzex-space-4); margin-bottom: 1.25rem; }
.support-downloads-steps .rz-steps-title { white-space: nowrap; }
.support-downloads-steps > ul > li.rz-steps-item { position: relative; flex: 0 0 auto; }
.support-downloads-steps > ul > li.rz-steps-item:not(:last-child) { padding-right: 2rem; }
.support-downloads-steps > ul > li.rz-steps-item:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: 0; width: 2rem; height: 2px; transform: translateY(-50%); background: var(--uzex-border-strong); }
.support-downloads-steps > ul > li.rz-steps-item .rz-menuitem-link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.875rem 0.25rem 0.25rem; border: 1px solid var(--uzex-border-strong); border-radius: 999px; }
.support-downloads-steps > ul > li.rz-steps-item.rz-steps-current .rz-menuitem-link { border-color: var(--uzex-blue-600); }
.support-downloads-steps.steps-completed-1 > ul > li:nth-child(-n+1):not(.rz-steps-current) .rz-steps-number,
.support-downloads-steps.steps-completed-2 > ul > li:nth-child(-n+2):not(.rz-steps-current) .rz-steps-number,
.support-downloads-steps.steps-completed-3 > ul > li:nth-child(-n+3):not(.rz-steps-current) .rz-steps-number,
.support-downloads-steps.steps-completed-4 > ul > li:nth-child(-n+4):not(.rz-steps-current) .rz-steps-number { background: var(--rz-success-dark); color: #fff; }
.support-downloads-steps.steps-completed-1 > ul > li:nth-child(-n+1):not(.rz-steps-current) .rz-steps-title,
.support-downloads-steps.steps-completed-2 > ul > li:nth-child(-n+2):not(.rz-steps-current) .rz-steps-title,
.support-downloads-steps.steps-completed-3 > ul > li:nth-child(-n+3):not(.rz-steps-current) .rz-steps-title,
.support-downloads-steps.steps-completed-4 > ul > li:nth-child(-n+4):not(.rz-steps-current) .rz-steps-title { color: var(--rz-success-dark); font-weight: 600; }
.support-downloads-steps.steps-completed-1 > ul > li:nth-child(-n+1):not(.rz-steps-current) .rz-menuitem-link,
.support-downloads-steps.steps-completed-2 > ul > li:nth-child(-n+2):not(.rz-steps-current) .rz-menuitem-link,
.support-downloads-steps.steps-completed-3 > ul > li:nth-child(-n+3):not(.rz-steps-current) .rz-menuitem-link,
.support-downloads-steps.steps-completed-4 > ul > li:nth-child(-n+4):not(.rz-steps-current) .rz-menuitem-link { border-color: var(--rz-success-dark); }
.support-downloads-steps.steps-completed-1 > ul > li:nth-child(-n+1):not(.rz-steps-current)::after,
.support-downloads-steps.steps-completed-2 > ul > li:nth-child(-n+2):not(.rz-steps-current)::after,
.support-downloads-steps.steps-completed-3 > ul > li:nth-child(-n+3):not(.rz-steps-current)::after,
.support-downloads-steps.steps-completed-4 > ul > li:nth-child(-n+4):not(.rz-steps-current)::after { background: var(--rz-success-dark); }
.support-downloads-step-heading { margin-bottom: var(--uzex-space-3); font-size: 1.0625rem; font-weight: 600; }
/* Full-width, one-per-row locale fields — same shared wizard rule as FAQ / Holiday
(the step previously left RadzenFormField at its default inline-flex width). Used
by the translation steps and by the Download Category locale Name + Slug rows. */
.support-downloads-step { display: flex; flex-direction: column; gap: var(--uzex-space-4); width: 100%; }
.support-downloads-step .support-downloads-step-heading { margin-bottom: 0; }
.support-downloads-step .rz-form-field { display: flex; width: 100%; }
.support-downloads-step .rz-textbox, .support-downloads-step .rz-textarea { width: 100%; }
.support-downloads-step .rz-textarea { min-height: 8.5rem; resize: vertical; }
.support-downloads-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--uzex-space-4); align-items: end; margin-top: var(--uzex-space-4); }
.support-downloads-wizard-actions { padding-top: var(--uzex-space-3); border-top: 1px solid var(--uzex-border-strong); }
.support-downloads-review { margin-top: var(--uzex-space-4); padding-top: var(--uzex-space-4); border-top: 1px solid var(--uzex-border-strong); display: grid; grid-template-columns: 1fr 1fr; gap: var(--uzex-space-3); }
.support-downloads-review-item { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; padding: var(--uzex-space-3); border: 1px solid var(--uzex-border-strong); border-radius: var(--uzex-radius-md); background: var(--uzex-surface-alt); }
.support-downloads-review-locale { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: var(--uzex-text-muted); }
.support-downloads-file-section { margin-top: var(--uzex-space-4); padding-top: var(--uzex-space-4); border-top: 1px solid var(--uzex-border-strong); display: flex; flex-direction: column; gap: var(--uzex-space-2); }
.support-downloads-file-current, .support-downloads-file-selected { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; min-width: 0; }
.support-downloads-file-current span, .support-downloads-file-selected span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-downloads-file-meta { color: var(--uzex-text-muted); flex-shrink: 0; }
.support-downloads-file-hint, .support-downloads-file-help { margin: 0; font-size: 0.8125rem; color: var(--uzex-text-muted); }
.support-downloads-field-error { font-size: 0.8125rem; color: var(--rz-danger); }
.support-downloads-preview { display: flex; flex-direction: column; height: 100%; gap: var(--uzex-space-3); }
.support-downloads-preview-frame { flex: 1; min-height: 0; border: 1px solid var(--uzex-border-strong); border-radius: var(--uzex-radius-md); overflow: hidden; }
.support-downloads-preview-frame iframe { width: 100%; height: 100%; border: 0; }
.support-downloads-preview-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
@media (max-width: 720px) { .support-downloads-settings-grid, .support-downloads-review { grid-template-columns: 1fr; } .support-downloads-category-filter { margin-right: 0; width: 100%; } .support-downloads-wizard-actions { align-items: stretch !important; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .support-downloads-steps .rz-steps-fade, .support-downloads-steps .rz-steps-slide { transition-duration: 0s !important; animation-duration: 0s !important; } }