/** General CSS **/
:root {
    /* Main Fonts **/
    --font-primary: 'DM Sans', sans-serif;
    --font-secondary: 'Exo', sans-serif;
    --font-code: 'Roboto Mono', monospace;



    /* Font sizing **/
    --font-size: clamp(16px, 2vw, 16px);

    --fs-h1:    clamp(34px, 2vw, 40px);
    --fs-h2:    clamp(30px, 2vw, 34px);
    --fs-h3:    clamp(26px, 2vw, 30px);
    --fs-h4:    clamp(22px, 2vw, 26px);
    --fs-h5:    clamp(20px, 2vw, 22px);
    --fs-h6:    clamp(16px, 2vw, 20px);
    --fs-p:     clamp(16px, 2vw, 16px);
    --fs-small: clamp(14px, 2vw, 14px);
    --fs-xs:    clamp(12px, 5vw, 12px);



    /** Other **/
    --transition-duration: .3s;
    --transition-function: ease;
    --timing: var(--transition-duration) var(--transition-function);

    --br-small: 8px;
    --br: 12px;
    --br-large: 24px;
    --br-round: 10000px;
    --box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);

    --nav-height: 0px; /* Auto sets via JS */



    /** Container Widths **/
    --container-width: 100%;
    --container-width--sm: 540px;
    --container-width--md: 720px;
    --container-width--lg: 960px;
    --container-width--xl: 1200px;
    --container-width--xxl: 1400px;
    --container-width--xxxl: 1440px;



    /** Design Colors **/
    --title-clr: #000000;
    --text-clr: #666666;

    --title-clr-invert: #FFFFFF;
    --text-clr-invert: #F2F2F2;

    --link-clr: #55B030;
    --link-clr-invert: #55B030;

    --border-clr: rgba(0, 0, 0, 0.2);

    --bg-clr: #FFF;
    --bg-clr-dark: #F4F4F4;
    --bg-clr-invert: #2E2D2C;
    --bg-clr-invert-light: #414141;

    --rgb--bg-clr: 255, 255, 255;
    --rgb--bg-clr-dark: 244, 244, 244;
    --rgb--bg-clr-invert: 46, 45, 44;
    --rgb--bg-clr-invert-light: 65, 65, 65;


    /** Main Colors **/
    --primary: #2E2D2C;
    --secondary: #F5F5F5;
    --accent: #55B030;
    --accent-hover: #66B845;
    --accent-trans-50: #55B03080;
    --accent-trans-20: #55B03033;



    /** Support Colors **/

    /** Success Color **/
    --green-100: hsl(120, 70%, 97%);
    --green-200: hsl(120, 70%, 82%);
    --green-300: hsl(120, 70%, 65%);
    --green-400: hsl(120, 70%, 55%);
    --green-500: hsl(120, 70%, 45%);
    --green-700: hsl(120, 70%, 28%);

    /** Warning Color **/
    --orange-100: hsl(38, 100%, 97%);
    --orange-200: hsl(38, 100%, 82%);
    --orange-300: hsl(38, 100%, 65%);
    --orange-400: hsl(38, 100%, 55%);
    --orange-500: hsl(38, 100%, 45%);
    --orange-700: hsl(38, 100%, 28%);

    /** Danger Color **/
    --red-100: hsl(356, 70%, 97%);
    --red-200: hsl(356, 70%, 82%);
    --red-300: hsl(356, 70%, 65%);
    --red-400: hsl(356, 70%, 55%);
    --red-500: hsl(356, 70%, 45%);
    --red-700: hsl(356, 70%, 28%);

    /** Info Color **/
    --blue-100: hsl(221, 100%, 97%);
    --blue-200: hsl(221, 100%, 82%);
    --blue-300: hsl(221, 100%, 65%);
    --blue-400: hsl(221, 100%, 55%);
    --blue-500: hsl(221, 100%, 45%);
    --blue-700: hsl(221, 100%, 28%);

}


/** Base Styles **/
*:not(.wux-icon,[class*="fa"],[class*="swiper"]) {
    margin: 0;
    padding: 0;
    line-height: var(--lh);
    font-family: var(--ff) !important;
    box-sizing: border-box;
    transition:
        color .3s ease-in-out,
        background-color .3s ease-in-out,
        box-shadow .3s ease-in-out,
        border-color .3s ease-in-out,
        text-decoration .3s ease-in-out
    ;
}

[class*="swiper"] {
    margin: 0;
    padding: 0;
    line-height: var(--lh);
    font-family: var(--ff) !important;
    box-sizing: border-box;
}


figure { margin-block: unset; margin-inline: unset; width: fit-content; height: fit-content; }
img { height: 100%; width: auto; display: block; object-fit: cover; }

html { overflow-x: hidden; font-size: 10px; background-color: var(--bg, var(--bg-clr)); scroll-behavior: smooth; }
html:has(.auth) { --bg: var(--bg-clr-light); }

main { min-height: calc(100vh - var(--nav-height)); position: relative; z-index: 2; }

.wux-bg-element { --bg: var(--bg-clr-invert); pointer-events: none; position: absolute; height: 100%; width: 100%; aspect-ratio: 1/1; top: 0; left: 0; overflow: hidden; z-index: 1; }
.wux-bg-element svg { position: absolute; height: 100%; right: -11%; bottom: -13%; width: auto; aspect-ratio: 865/918; }

.wux-bg-element { --bg: #000000; opacity: 1; mask-position: right bottom; }
.wux-bg-element--faded { opacity: .4; }
.wux-bg-element--hide { display: none; }

[data-link] { cursor: pointer; }


/** Typography **/
h1, .h1 { --fs: var(--fs-h1); --lh: 1.2; --fw: 700; }
h2, .h2 { --fs: var(--fs-h2); --lh: 1.2; --fw: 700; }
h3, .h3 { --fs: var(--fs-h3); --lh: 1.2; --fw: 700; }
h4, .h4 { --fs: var(--fs-h4); --lh: 1.2; --fw: 700; }
h5, .h5 { --fs: var(--fs-h5); --lh: 1.2; --fw: 700; }
h6, .h6 { --fs: var(--fs-h6); --lh: 1.2; --fw: 700; }
p, .p { --fs: var(--fs-p); --lh: 1.5; --fw: normal; }

div, .div { --fs: var(--fs-p); --lh: 1.5; --fw: normal; }
a { --fs: var(--fs-x-medium); --lh: 1.5; text-decoration: none; }
li, .li { --fs: var(--fs-p); --lh: 1.5; --fw: normal; }
span, .span { --fs: var(--fs-p); --lh: 1.5; --fw: normal; }
input, .input { --fs: var(--fs-p); --lh: 1.5; --fw: 500; }
select, .select { --fs: var(--fs-p); --lh: 1.5; --fw: 500; }
textarea, .textarea { --fs: var(--fs-p); --lh: 1.5; --fw: 500; }
button, .button { --fs: var(--fs-p); --lh: 1.5; --fw: 500; }
small, .small, small *, .small * { --fs: var(--fs-small); --lh: 1.5; --fw: normal; }

*:is(h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6,p,.p,a,.a,li,.li,span,.span,input,.input,select,.select,textarea,.textarea,button,.button,div,.div,::before,::after){ font-size: var(--fs) !important; --ff: var(--font-primary); font-weight: var(--fw) !important; color: var(--clr-text); --clr-text: var(--text-clr); }
*:is(h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6) { --ff: var(--font-primary); --clr-text: var(--title-clr); }
*:is(div.toast-message) { --clr-text: var(--text-clr); }
*:is(em) { font-style: italic; }
*:is(p strong, pre strong, a strong, li strong, span strong, h3 strong, h4 strong, h5 strong, h6 strong) { --fw: bold; }


:is(h1, .h1) span { --fs: var(--fs-h1); --lh: 1.2; --fw: 700; --clr-text: var(--title-clr); }
:is(h2, .h2) span { --fs: var(--fs-h2); --lh: 1.2; --fw: 700; --clr-text: var(--title-clr); }
:is(h3, .h3) span { --fs: var(--fs-h3); --lh: 1.2; --fw: 700; --clr-text: var(--title-clr); }
:is(h4, .h4) span { --fs: var(--fs-h4); --lh: 1.2; --fw: 700; --clr-text: var(--title-clr); }
:is(h5, .h5) span { --fs: var(--fs-h5); --lh: 1.2; --fw: 700; --clr-text: var(--title-clr); }
:is(h6, .h6) span { --fs: var(--fs-h6); --lh: 1.2; --fw: 700; --clr-text: var(--title-clr); }
:is(p, .p) span { --fs: var(--fs-p); --lh: 1.5; --fw: normal; }

ol,ul { padding-left: 24px; }

.font-code { --ff: var(--font-code) !important; }

.bold, .strong { font-weight: bold !important; }
.italic { font-style: italic !important; }
.meta, .wux-meta, .muted, .wux-muted { opacity: .6; }

.--no-scroll { overflow: hidden; }
.--hidden { display: none !important; }
.--highlight { animation: highlight 2s; }

@media (max-width: 992px) {
    .--mb-hide { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; width: 0px !important; height: 0px !important; overflow: hidden !important; }
}

@keyframes highlight {
    0% { transform: scale(1.0); }
    10% { transform: scale(1.05); }
    20% { transform: scale(1.0); }
    30% { transform: scale(1.05); }
    40% { transform: scale(1.0); }
    50% { transform: scale(1.05); }
    60% { transform: scale(1.0); }
    70% { transform: scale(1.05); }
    80% { transform: scale(1.0); }
    90% { transform: scale(1.05); }
    100% { transform: scale(1.0); }
}

[class*="lc--"] { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: var(--lc, 1); }
.lc--1 { --lc: 1; }
.lc--2 { --lc: 2; }
.lc--3 { --lc: 3; }
.lc--4 { --lc: 4; }
.lc--5 { --lc: 5; }


/** Container **/
.container { --width: var(--container-width); width: 100%; max-width: var(--width); margin-left: auto; margin-right: auto; padding-left: var(--c-padding, 16px); padding-right: var(--c-padding, 16px); position: relative; display: block; }

@media (min-width: 576px) {
    .container { --width: var(--container-width--sm); }
}

@media (min-width: 768px) {
    .container { --width: var(--container-width--md); }

    .container.container--x-small { --width: 700px; }
}

@media (min-width: 992px) {
    .container { --width: var(--container-width--lg); }
    
    .container.container--small { --width: 768px; }
}

@media (min-width: 1200px) {
    .container { --width: var(--container-width--xl); }

    .container.container--medium { --width: 1100px; }
}

@media (min-width: 1400px) {
    .container { --width: var(--container-width--xxl); }

    .container.container--medium { --width: 1200px; }
}

@media (min-width: 1600px) {
    .container { --width: var(--container-width--xxxl); }

    .container.container--large { --width: 1600px; }
}
@media (min-width: 1700px) {
    .container.container--large { --width: 1700px; }
}
@media (min-width: 1800px) {
    .container.container--large { --width: 1760px; }
}


/** Whitespace **/
.wst--none      { --pt: 0px;  padding-top: var(--pt); }
.wst--small     { --pt: 32px; padding-top: var(--pt); }
.wst--medium    { --pt: 64px; padding-top: var(--pt); }
.wst--large     { --pt: 96px; padding-top: var(--pt); }

.mt--none       { --mt: 0px;  margin-top: var(--mt); }
.mt--small      { --mt: 32px; margin-top: var(--mt); }
.mt--medium     { --mt: 64px; margin-top: var(--mt); }
.mt--large      { --mt: 96px; margin-top: var(--mt); }

.wsb--none      { --pb: 0px;  padding-bottom: var(--pb); }
.wsb--small     { --pb: 32px; padding-bottom: var(--pb); }
.wsb--medium    { --pb: 64px; padding-bottom: var(--pb); }
.wsb--large     { --pb: 96px; padding-bottom: var(--pb); }

.mb--none       { --mb: 0px;  margin-bottom: var(--mb); }
.mb--small      { --mb: 32px; margin-bottom: var(--mb); }
.mb--medium     { --mb: 64px; margin-bottom: var(--mb); }
.mb--large      { --mb: 96px; margin-bottom: var(--mb); }


/** Borders **/
[class*="border--"] { --border: 2px solid var(--border-clr); --bt-padding: var(--pt); --bb-padding: var(--pb); }

.border--top > .container { border-top: var(--border); padding-top: var(--bt-padding); }
.border--top > *:first-child .container { border-top: var(--border); padding-top: var(--bt-padding); }

.border--bottom > .container { border-bottom: var(--border); padding-bottom: var(--bb-padding); }
.border--bottom > *:last-child .container { border-bottom: var(--border); padding-bottom: var(--bb-padding); }


/** Backgrounds **/
.bg--light { background-color: var(--bg-clr-light); }
.bg--normal { background-color: var(--bg-clr); }
.bg--dark { background-color: var(--bg-clr-dark); }
.bg--invert-light { background-color: var(--bg-clr-invert-light); }
.bg--invert-normal { background-color: var(--bg-clr-invert); }
.bg--invert-dark { background-color: var(--bg-clr-invert-dark); }


/** Icons **/
/* Styles for when it loads in as the images might take some time */
.wux-icon { transition: color var(--timing); color: var(--clr); font-size: var(--size, 16px); --size: var(--w, var(--h)); --clr: var(--text-clr); }


/** Accordion **/
.wux-accordion { padding: 16px 16px 12px; background-color: var(--bg-clr-dark); border-radius: var(--br); }
.wux-accordion__header { padding-bottom: 4px; cursor: pointer; user-select: none; }
.wux-accordion__body { max-height: 0; overflow: hidden; transition: max-height .75s ease; display: flex; flex-direction: column; }

.wux-accordion.--active .wux-accordion__body { max-height: 1000px; overflow: hidden; }

.wux-accordion-group { width: 100%; }
.wux-accordion-group .wux-accordion { width: 100%; }
.wux-accordion-group .wux-accordion:not(:first-child) { margin-top: 16px; }

.wux-offcanvas__body .wux-accordion { background-color: var(--bg-clr); }


/** BTN Group **/
.btn-group { display: flex !important; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; }
.btn-group--left { justify-content: left; }
.btn-group--right { justify-content: right; }

.btn-group--vert { flex-direction: column; align-items: center; }
.btn-group--vert-right { flex-direction: column; align-items: flex-end; }
.btn-group--vert-left { flex-direction: column; align-items: flex-start; }

@media (min-width: 1200px) {
    .btn-group { flex-wrap: nowrap; }
}

.btn-group-connected { display: inline-flex !important; flex-wrap: nowrap; padding: 8px; background-color: var(--bg-clr-dark); border-radius: var(--br-round); }
.btn-group-connected a { padding: 8px 12px; border-radius: var(--br-round); color: var(--text-clr); cursor: pointer; transition: background-color var(--timing); }
.btn-group-connected a.--active { background-color: var(--bg-clr-invert); color: var(--text-clr-invert); }
.btn-group-connected a.--active i { color: var(--text-clr-invert); }


/** Like button **/
.wux-like { height: 32px; width: 32px; border-radius: var(--br-round); background-color: var(--bg-clr); display: grid; place-content: center; cursor: pointer; transition: background-color var(--timing), opacity var(--timing); }
.wux-like .wux-icon { --w: 16px; --h: var(--w); --clr: var(--text-clr); }
.wux-like:hover { background-color: var(--accent); }
.wux-like:hover .wux-icon { --clr: var(--text-clr-invert); }
.wux-like.--active .wux-icon { --clr: #D50E0E; }

.wux-like--big { height: unset; width: unset; }
.wux-like--big.--active { --clr: var(--red-300) !important; --border: 1px solid var(--red-300) !important; --clr-bg: transparent !important; }
.wux-like--big.--active .wux-icon { --clr: var(--red-300) !important; }

.wux-like--big.--active:hover { --clr: var(--text-clr-invert) !important; --border: 1px solid var(--red-300) !important; --clr-bg: var(--red-300) !important; }
.wux-like--big.--active:hover .wux-icon { --clr: var(--text-clr-invert) !important; }


/** Tag Group **/
.tag-group { display: flex; justify-content: left; align-items: center; gap: 8px; flex-wrap: wrap; }
.tag-group--center { justify-content: center; }
.tag-group--right { justify-content: right; }

.tag-group--vert { flex-direction: column; align-items: center; }
.tag-group--vert-right { flex-direction: column; align-items: flex-end; }
.tag-group--vert-left { flex-direction: column; align-items: flex-start; }


/*** Tags ***/
.tag { --clr: var(--bg-clr-invert); color: var(--clr); border: 1px solid var(--clr); padding: 4px 8px; border-radius: var(--br-round); }
.tag * { color: var(--clr); }
.tag:is(:hover,:focus,:active,.--active) { --clr: var(--accent); background-color: var(--clr); color: var(--text-clr-invert); border: 1px solid var(--clr); }
.tag:is(:hover,:focus,:active,.--active) * { color: var(--text-clr-invert); }

.tag--more { border: unset; padding: 0; }
.tag--more:is(:hover,:focus,:active,.--active) { border: unset; background-color: unset; color: var(--text-clr); }
.tag--more:is(:hover,:focus,:active,.--active) * { color: var(--text-clr); }


/** Label group **/
.label-group { display: flex; justify-content: left; align-items: center; gap: 8px; }
.label-group--center { justify-content: center; }
.label-group--right { justify-content: right; }
.label-group--vert { flex-direction: column; align-items: center; }


/** Label **/
.label-group .label { --clr: var(--bg-clr-invert); color: var(--text-clr-invert); background-color: var(--clr); border-radius: var(--br-small); padding: 4px 8px; --fs: var(--fs-xs); }
.label-group .label * { color: var(--text-clr-invert); }


/** Label category **/
.label-category { display: grid; grid-template-columns: auto auto; gap: 8px 16px; align-items: center; width: fit-content; }
.label-category .labels { display: flex; gap: 8px; align-items: center; }
.label-category .label { padding: 8px 16px; border: 1px solid var(--text-clr); border-radius: var(--br-small); --fs: var(--fs-small); }

.label-category + .label-category { margin-top: 16px; }


/** Tab Group **/
.tab-group { display: flex; justify-content: left; align-items: center; gap: 8px; flex-wrap: wrap; }


/*** Tab ***/
.tab-btn:not(:hover, :focus, :active, .--active) { --clr-bg: var(--bg-clr) !important; }

.tab { opacity: 0; display: none; pointer-events: none; }
.tab.--active { opacity: 1; display: block; pointer-events: all; }


/** Filters **/
.filter-group { display: flex; flex-direction: column; gap: 8px; }
.filter-group .tag-group { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; }
.filter-group .tag-group .tag { cursor: pointer; }
.filter-group .tag-group .tag > * { pointer-events: none; }


/** Display **/
.d-grid { display: grid !important; }
.d-grid--center { display: grid !important; place-content: center !important; }
.d-flex { display: flex !important; }
.d-flex--center { display: flex !important; justify-content: center !important; align-items: center; }
.d-flex.d-flex--ver { display: flex !important; flex-direction: column; }
.d-flex.d-flex--hor { display: flex !important; flex-direction: row; }
.d-none { display: none !important; }

.span--1 { grid-column: span 1; }
.span--2 { grid-column: span 2; }
.span--3 { grid-column: span 3; }
.span--4 { grid-column: span 4; }
.span--5 { grid-column: span 5; }
.span--6 { grid-column: span 6; }
.span--7 { grid-column: span 7; }
.span--8 { grid-column: span 8; }


/** Table **/
.wux-table { width: 100%; border-spacing: 0px; background-color: var(--bg-clr-light); padding: 16px; border-radius: var(--br); }
.wux-table :is(td, th) { text-align: left; padding-bottom: 8px; }
.wux-table :is(td, th).btns { width: fit-content; }


/** Search **/
.wux-search { background-color: var(--bg-clr-dark); }
.wux-search .wux-input { width: 200px; }

.wux-search--big { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 20px; border-radius: var(--br-round); cursor: pointer; }
.wux-search--big > * { opacity: 0.4; }


/** Offcanvas **/
.wux-offcanvas-overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.5); opacity: 0; z-index: 1000; pointer-events: none; transition: opacity var(--timing); }
.wux-offcanvas-overlay:has(> .--active) { opacity: 1; pointer-events: all; }

.wux-offcanvas { background-color: var(--bg-clr-dark); border-top-left-radius: var(--br); border-bottom-left-radius: var(--br); width: 100%; max-width: 400px; height: 100%; overflow-y: auto; position: absolute; right: 0; top: 0; }

.wux-offcanvas__header { padding: 32px 32px 0; display: flex; justify-content: space-between; align-items: center; }
.wux-offcanvas__header  .wux-offcanvas__close { padding: 8px; height: fit-content; width: fit-content; border-radius: var(--br-round); border: none; background-color: var(--bg-clr-invert); cursor: pointer; display: flex; align-items: center; justify-content: center; font-weight: bold; }
.wux-offcanvas__header  .wux-offcanvas__close .wux-icon { --w: 16px; --h: var(--w); --clr: var(--text-clr-invert); pointer-events: none; }
.wux-offcanvas__header  .wux-offcanvas__close:hover { background-color: var(--bg-clr); --clr: var(--text-clr); }
.wux-offcanvas__header  .wux-offcanvas__close:hover .wux-icon { --clr: var(--text-clr); }

.wux-offcanvas__body { padding: 16px 32px 32px; display: flex; flex-direction: column; gap: 8px; }
.wux-offcanvas__body .wux-modal__no-description { color: var(--hover-clr); font-style: italic; }
.wux-offcanvas__body .wux-modal__tags { margin: 8px 0; }
.wux-offcanvas__body .wux-modal__meta { opacity: .6; }

.wux-offcanvas .wux-input { background-color: var(--bg-clr); width: 100%; }


/** Modal **/
.wux-modal-overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; padding: 16px; opacity: 0; pointer-events: none; transition: opacity var(--timing); }
.wux-modal-overlay:has(.--active) { opacity: 1; pointer-events: all; }

.wux-modal { background-color: var(--bg-clr-dark); border-radius: var(--br-large); width: 100%; max-width: 700px; max-height: 70vh; overflow-y: auto; position: fixed; top: 50%; left: 50%; z-index: 1001; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; transition: opacity var(--timing); }
.wux-modal.--active { opacity: 1; pointer-events: all; }
.wux-modal .wux-modal__header { padding: 32px; padding-bottom: 0; }

.wux-modal .wux-modal__header .btn { box-shadow: var(--box-shadow); }
.wux-modal .wux-modal__header .btn-group { position: absolute; bottom: 16px; right: 16px; }
.wux-modal .wux-modal__header .btn-group-small { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; }

.wux-modal .wux-modal__body { padding: 32px; display: flex; flex-direction: column; gap: 8px; }
.wux-modal .wux-modal__body .wux-modal__no-description { color: var(--hover-clr); font-style: italic; }
.wux-modal .wux-modal__body .wux-modal__tags { margin: 8px 0; }
.wux-modal .wux-modal__body .wux-modal__meta { opacity: .6; }

*:has(> .wux-modal--relative) { position: relative; }
.wux-modal--relative {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    max-width: 250px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    border-radius: var(--br);
    background-color: var(--bg-clr);
    border: 2px solid var(--bg-clr-dark);
}

/** Modal > Search **/
.wux-modal--search { background-color: rgba(var(--rgb--bg-clr-invert), 0.98); color: var(--text-clr-invert) !important; }
.wux-modal--search * { color: var(--text-clr-invert) !important; }
.wux-modal--search .wux-modal__body { gap: 16px; }
.wux-modal--search input { background-color: var(--bg-clr-invert-light); }
.wux-modal--search .wux-modal__body > p { padding: 0 16px; }

/** Modal > Filter **/
.wux-modal--filter {  }
.wux-modal--filter .wux-offcanvas__body { padding: 8px 16px; }


/** Form **/
.wux-form-group { display: flex; flex-direction: column; gap: 32px; }
.wux-form-group + .wux-form-group { margin-top: 64px; padding-top: 64px; border-top: 2px solid rgba(var(--rgb--bg-clr-invert-light), .2); }
.wux-form-group--horizontal { flex-direction: column; gap: 32px; }

.wux-input-group { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.wux-input-description { font-size: var(--fs-small); color: var(--text-clr); opacity: 0.8; margin: 0 16px; }

.wux-input { width: 100%; padding: 8px 16px; border: 1px solid var(--border-clr); border-radius: var(--br-round); background-color: var(--bg-clr-dark); color: var(--text-clr); border: unset !important; outline: unset !important; }
.wux-textarea { width: 100%; padding: 8px 16px; border: 1px solid var(--border-clr); border-radius: var(--br); background-color: var(--bg-clr-dark); color: var(--text-clr); border: unset !important; outline: unset !important; }
.wux-select { width: 100%; padding: 8px 16px; border: 1px solid var(--border-clr); border-radius: var(--br); background-color: var(--bg-clr-dark); color: var(--text-clr); border: unset !important; outline: unset !important; }

.wux-input-group :is(.wux-select, input, textarea):is(:disabled) { opacity: 0.8; cursor: not-allowed; }

.wux-checkbox-group { display: flex; flex-direction: column; gap: 4px; }
.wux-checkbox-group > * { width: fit-content; }

/** Form > File **/
.wux-file { width: 100%; padding: 8px 16px; border: 1px solid var(--border-clr); border-radius: var(--br-round); background-color: var(--bg-clr-dark); color: var(--text-clr); border: unset !important; outline: unset !important; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.wux-file input { display: none; }
.wux-file .wux-file__icon { display: flex; align-items: center; }
.wux-file .wux-file__clear { margin-left: auto; display: flex; align-items: center; opacity: 0; pointer-events: none; transition: opacity var(--timing); }
.wux-file .wux-file__clear .wux-icon { --clr: var(--red-300); }

.wux-file.--has-file .wux-file__icon .wux-icon { --clr: var(--accent); }
.wux-file.--has-file .wux-file__clear { margin-left: auto; display: flex; align-items: center; opacity: 1; pointer-events: auto; }

/** Form > Checkbox **/
.wux-checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.wux-checkbox input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.wux-checkbox .checkbox { width: 16px; height: 16px; border: 1px solid var(--border-clr); background-color: var(--bg-clr); border-radius: 4px; display: grid; place-content: center; pointer-events: none; }
.wux-checkbox .checkbox .wux-icon { --w: 10px; --h: 10px; --clr: var(--text-clr-invert); display: none; }
.wux-checkbox input:checked + .checkbox { background-color: var(--accent); }
.wux-checkbox input:checked + .checkbox .wux-icon { display: block; }

.wux-checkbox-group + :is(h3,h4,h5,h6) { margin-top: 8px; }

/** Form > Radio **/
.wux-radio { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.wux-radio input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.wux-radio .radio { width: 16px; height: 16px; border: 1px solid var(--border-clr); background-color: var(--bg-clr); border-radius: 50%; display: grid; place-content: center; pointer-events: none; }
.wux-radio .radio .wux-icon { --w: 10px; --h: 10px; --clr: var(--text-clr-invert); display: none; }
.wux-radio input:checked + .radio { background-color: var(--accent); }
.wux-radio input:checked + .radio .wux-icon { display: block; }

/** Form > Checkbox tag **/
.wux-checkboxes-tags .tag { cursor: pointer; }
.wux-checkboxes-tags .tag input { display: none; }
.wux-checkboxes-tags .tag:has(input:checked) { background-color: var(--clr); color: var(--text-clr-invert); border: 1px solid var(--clr); }


/** Navbar **/
.wux-navbar { --nav-bg: var(--bg-clr); --nav-bg-light: var(--bg-clr-invert-light); position: relative; z-index: 1000; width: 100%; background: var(--nav-bg); display: flex; justify-content: center; align-items: center; padding: 24px 0; }
.wux-navbar::after { content: ''; position: fixed; top: 0; left: 0; z-index: 100; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.3); opacity: 0; pointer-events: none; transition: opacity var(--timing); }

.wux-navbar .container { display: grid; grid-template-columns: 1fr minmax(1fr, 500px) 1fr; }
.wux-navbar .container > div { display: flex; align-items: center; }
.wux-navbar__left { grid-column: 1; justify-content: start; }
.wux-navbar__center { grid-column: 2; }
.wux-navbar__right { grid-column: 3; justify-content: end; }

.wux-navbar__menu { display: flex; gap: 28px; align-items: center; }
.wux-navbar__menu--mobile { display: flex; flex-direction: column; gap: 16px; align-items: start; }

.wux-navbar__sitename { display: flex; align-items: center; margin-right: 48px; }
.wux-navbar__sitename h2 { --clr-text: var(--text-clr-invert) !important; }
.wux-navbar__sitename img { height: 24px; width: auto; }

.wux-navbar__link { text-decoration: none; transition: opacity var(--timing); display: flex; align-items: center; gap: 8px; opacity: 0.6; }
.wux-navbar__link .wux-icon { --w: var(--fs-p); --h: var(--w); --clr: var(--text-clr); }
.wux-navbar__link .wux-navbar__text { --clr-text: var(--text-clr) !important; }
.wux-navbar__link:hover { opacity: 1; }

.wux-navbar__link--marked { opacity: 1; padding-left: 28px; border-left: 1px solid var(--border-clr); padding-right: 28px; border-right: 1px solid var(--border-clr); }
.wux-navbar__link--marked .wux-icon { --fa-style: 600; }
.wux-navbar__link--marked .wux-navbar__text { --fw: 600; }
.wux-navbar__link--marked:last-child { padding-right: unset; border-right: unset; }
.wux-navbar__menu--mobile .wux-navbar__link--marked { padding: unset !important; border: unset !important; }

.wux-navbar__seperator { text-decoration: none; transition: opacity var(--timing); display: flex; align-items: center; gap: 8px; opacity: 0.6; padding: 8px 16px; }
.wux-navbar__seperator .wux-navbar__text { --clr-text: var(--text-clr) !important; --fs: var(--fs-xs); position: relative; }
.wux-navbar__seperator .wux-line { width: 100%; height: 1px; background-color: var(--text-clr); margin-left: 8px; }

.wux-navbar__toggle { display: none !important; cursor: pointer; padding: 10px; }
.wux-navbar__search { display: none !important; cursor: pointer; padding: 10px; }

/* Dropdown Menu */
.wux-navbar__dropdown { position: relative; }

.wux-navbar__dropdown-content { position: absolute; top: 100%; left: 50%; min-width: 220px; background: var(--bg-clr-dark); border: 2px solid var(--bg-clr); border-radius: var(--br); opacity: 0; visibility: hidden; transform: translateY(-10px) translateX(-50%); transition: opacity var(--timing), transform var(--timing), visibility var(--timing); padding: 0; margin-top: 8px; z-index: 1000; }
.wux-navbar__dropdown:hover .wux-navbar__dropdown-content { opacity: 1; visibility: visible; transform: translateY(0) translateX(-50%); }

.wux-navbar__dropdown-content .wux-navbar__link { border-radius: 0; padding: 8px 16px; }
.wux-navbar__dropdown-content .wux-navbar__link:first-child { border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); }
.wux-navbar__dropdown-content .wux-navbar__link:last-child { border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); }
.wux-navbar__dropdown-content .wux-navbar__dropdown { position: relative; }
.wux-navbar__dropdown-content .wux-navbar__dropdown-content { left: 100%; top: 0; margin-top: 0; margin-left: 4px; }

/* Responsive: Convert to Sidebar */
@media (max-width: 1200px) {
    .wux-navbar:has(.wux-navbar__menu--open)::after { opacity: 1; pointer-events: all; }

    .wux-navbar .wux-navbar__menu { display: none; }
    .wux-navbar__menu--icons { display: flex !important; gap: 16px; }
    .wux-navbar .wux-search { display: none; }

    .wux-navbar__search { display: grid !important; }
    .wux-navbar__toggle { display: grid !important; }

    /* Mobile: Accordion-style Dropdowns */
    .wux-navbar__dropdown { width: 100%; }
    .wux-navbar__dropdown-content { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: transparent; padding: 0; margin-top: 0; max-height: 0; overflow: hidden; transition: max-height var(--timing); }
    .wux-navbar__dropdown-content .wux-navbar__link { padding: 10px 16px; }
    
    .wux-navbar__dropdown .wux-navbar__dropdown-content { max-height: 500px; margin-top: 8px; background: var(--bg-clr); }
    .wux-navbar__dropdown:hover .wux-navbar__dropdown-content { opacity: 1; visibility: visible; transform: translateY(0); }

    /* .wux-navbar__dropdown-content .wux-navbar__seperator { text-decoration: none; transition: opacity var(--timing); display: flex; align-items: center; gap: 8px; opacity: 0.6; padding: 10px 8px; }
    .wux-navbar__dropdown-content .wux-navbar__seperator .wux-navbar__text { --clr-text: var(--text-clr) !important; --fs: var(--fs-xs); } */
}


/** Authentication **/
.auth { display: grid; place-content: center; }


/** Site stuff **/
.wux-site-info { display: flex; align-items: center; gap: 8px; }
.wux-site-info__favicon { display: grid; place-content: center; }
.wux-site-info__favicon img { height: 48px; width: auto; border-radius: var(--br-small); object-fit: cover; }
.wux-site-info .wux-text * { --lh: 1; }
.wux-site-info .strong { --clr-text: var(--title-clr); margin-bottom: 8px; }


/** Element stuff **/
.wux-element-info { display: flex; align-items: center; gap: 8px; }
.wux-element-info__favicon { display: grid; place-content: center; }
.wux-element-info__favicon img { height: 48px; width: auto; border-radius: var(--br-small); object-fit: cover; }
.wux-element-info .wux-text * { --lh: 1; }
.wux-element-info .strong { --clr-text: var(--title-clr); margin-bottom: 8px; }

.wux-element-info--large { display: flex; align-items: center; gap: 8px; }
.wux-element-info--large .wux-element-info__favicon { display: grid; place-content: center; }
.wux-element-info--large .wux-element-info__favicon img { height: 32px; width: auto; border-radius: var(--br-small); object-fit: cover; }
.wux-element-info--large .wux-text * { --lh: 1; }
.wux-element-info--large .strong { --clr-text: var(--title-clr); margin-bottom: unset; }