:root {
    --jbx-ink: #07172e;
    --jbx-paper: #f6f8fb;
    --jbx-surface: #fff;
    --jbx-orange: #ff7900;
    --jbx-orange-dark: #e76700;
    --jbx-navy: #00142d;
    --jbx-muted: #667083;
    --jbx-line: #dfe4eb;
    --jbx-sans: Inter, "Segoe UI", Arial, sans-serif;
}

html {
    min-width: 320px;
    scroll-behavior: smooth;
}

body.jbx-site {
    min-height: 100vh;
    margin: 0;
    color: var(--jbx-ink);
    background:
        linear-gradient(90deg, rgb(0 20 45 / 88%), rgb(0 20 45 / 66%)),
        url("/media/com_juhubox/images/hero-stage-v2.png") center / cover fixed no-repeat,
        var(--jbx-navy);
    font-family: var(--jbx-sans);
    -webkit-font-smoothing: antialiased;
}

.jbx-site *,
.jbx-site *::before,
.jbx-site *::after {
    box-sizing: border-box;
}

.jbx-site img {
    max-width: 100%;
}

.jbx-site:not(.is-marketplace) a {
    color: var(--jbx-orange-dark);
}

.jbx-shell {
    width: min(1180px, calc(100% - 48px));
    margin-inline: auto;
}

.jbx-header {
    position: fixed;
    z-index: 80;
    top: 0;
    right: 0;
    left: 0;
    border-bottom: 1px solid rgb(255 255 255 / 12%);
    background: var(--jbx-navy);
    backdrop-filter: blur(16px) saturate(1.15);
}

.jbx-header__inner {
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.jbx-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff !important;
    font-size: 1.34rem;
    font-weight: 850;
    letter-spacing: -0.035em;
    text-decoration: none;
}

.jbx-brand__image {
    display: block;
    width: clamp(185px, 17vw, 225px);
    height: auto;
}

.jbx-brand__mark {
    display: grid;
    width: 26px;
    height: 30px;
    place-items: center;
    border-radius: 4px 9px 9px 9px;
    color: var(--jbx-navy);
    background: linear-gradient(145deg, #ff9f45, var(--jbx-orange));
    font: italic 950 1rem/1 var(--jbx-sans);
    transform: skew(-5deg);
}

.jbx-header nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.jbx-header nav a {
    color: rgb(255 255 255 / 84%);
    font-size: 0.76rem;
    font-weight: 750;
    text-decoration: none;
}

.jbx-header nav a:hover,
.jbx-header nav a:focus {
    color: #fff;
}

.jbx-header .jbx-account-link {
    min-height: 39px;
    padding: 10px 14px;
    border: 1px solid rgb(255 255 255 / 35%);
    border-radius: 8px;
    color: #fff;
    background: rgb(255 255 255 / 7%);
}

.jbx-header-logout {
    margin: 0;
}

.jbx-header-logout button {
    min-height: 39px;
    padding: 9px 13px;
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: 8px;
    color: #fff;
    background: transparent;
    cursor: pointer;
    font: 800 0.72rem var(--jbx-sans);
}

.jbx-header-logout button:hover,
.jbx-header-logout button:focus {
    border-color: var(--jbx-orange);
    color: var(--jbx-navy);
    background: var(--jbx-orange);
}

.jbx-main {
    min-height: calc(100vh - 90px);
    padding: clamp(112px, 13vw, 150px) 0 clamp(48px, 8vw, 90px);
}

.jbx-main--marketplace {
    min-height: 0;
    padding: 0;
}

.jbx-component-only > .jbx-content-shell {
    padding-block: 32px;
}

.jbx-content-shell {
    width: min(720px, calc(100% - 32px));
    margin-inline: auto;
}

body.com_juhubox.view-provider .jbx-content-shell,
body.com_juhubox.view-profile .jbx-content-shell {
    width: min(1060px, calc(100% - 32px));
}

.jbx-content-shell > div,
.jbx-content-shell > section,
.jbx-content-shell > article {
    padding: clamp(26px, 5vw, 48px);
    border: 1px solid rgb(255 255 255 / 42%);
    border-radius: 16px;
    background: rgb(255 255 255 / 96%);
    box-shadow: 0 26px 80px rgb(0 0 0 / 25%);
    backdrop-filter: blur(16px);
}

.jbx-content-shell h1,
.jbx-content-shell h2,
.jbx-content-shell legend {
    color: var(--jbx-ink);
    font-family: var(--jbx-sans);
    font-weight: 850;
    letter-spacing: -0.04em;
}

.jbx-content-shell h1 {
    margin: 0 0 28px;
    font-size: clamp(2.25rem, 7vw, 3.8rem);
    line-height: 1.02;
}

.jbx-content-shell h2 {
    font-size: 1.6rem;
}

.jbx-content-shell p,
.jbx-content-shell li {
    color: var(--jbx-muted);
    line-height: 1.7;
}

.jbx-content-shell form {
    display: grid;
    gap: 17px;
}

.jbx-content-shell fieldset {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    border: 0;
}

.jbx-content-shell legend {
    width: 100%;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--jbx-line);
    font-size: 1.42rem;
}

.jbx-content-shell .control-group,
.jbx-content-shell .mb-3 {
    display: grid;
    gap: 7px;
    margin: 0;
}

.jbx-content-shell label,
.jbx-content-shell .control-label {
    color: #4c586a;
    font-size: 0.72rem;
    font-weight: 800;
}

.jbx-content-shell input:not([type="checkbox"]):not([type="radio"]),
.jbx-content-shell select,
.jbx-content-shell textarea {
    width: 100%;
    min-height: 49px;
    padding: 11px 13px;
    border: 1px solid var(--jbx-line);
    border-radius: 8px;
    outline: 0;
    color: var(--jbx-ink);
    background: #fff;
    font: inherit;
}

.jbx-content-shell textarea {
    min-height: 130px;
    resize: vertical;
}

.jbx-content-shell input:focus,
.jbx-content-shell select:focus,
.jbx-content-shell textarea:focus {
    border-color: var(--jbx-orange);
    box-shadow: 0 0 0 3px rgb(255 121 0 / 13%);
}

.jbx-content-shell button,
.jbx-content-shell .btn,
.jbx-primary-link {
    display: inline-flex;
    min-height: 47px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border: 1px solid var(--jbx-line);
    border-radius: 8px;
    cursor: pointer;
    color: var(--jbx-ink);
    background: #fff;
    font: 900 0.88rem var(--jbx-sans);
    letter-spacing: 0.01em;
    text-decoration: none;
}

.jbx-content-shell .btn-primary,
.jbx-content-shell button[type="submit"],
.jbx-primary-link {
    border-color: var(--jbx-orange);
    color: var(--jbx-navy);
    background: var(--jbx-orange);
}

.jbx-content-shell .btn-primary:hover,
.jbx-content-shell button[type="submit"]:hover,
.jbx-primary-link:hover {
    border-color: #ff9f45;
    color: var(--jbx-navy);
    background: #ff9f45;
}

.jbx-content-shell .btn-secondary {
    color: var(--jbx-ink);
    background: var(--jbx-paper);
}

.jbx-content-shell .com-users-login__options,
.jbx-content-shell .list-group,
.jbx-content-shell ul.mod-login__options {
    display: grid;
    gap: 7px;
    margin: 24px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--jbx-line);
    list-style: none;
}

.jbx-content-shell .com-users-login__options a,
.jbx-content-shell .list-group a,
.jbx-content-shell ul.mod-login__options a {
    color: var(--jbx-muted);
    font-size: 0.75rem;
    text-underline-offset: 3px;
}

.jbx-content-shell .form-check,
.jbx-content-shell .checkbox {
    display: flex;
    align-items: center;
    gap: 9px;
}

.jbx-content-shell input[type="checkbox"],
.jbx-content-shell input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--jbx-orange);
}

.jbx-content-shell .form-text,
.jbx-content-shell small {
    color: #8a93a0;
    font-size: 0.68rem;
}

.jbx-content-shell .required::after,
.jbx-content-shell .star {
    color: var(--jbx-orange-dark);
}

.jbx-content-shell .password-group {
    display: flex;
}

.jbx-content-shell .password-group input {
    border-radius: 8px 0 0 8px !important;
}

.jbx-content-shell .password-group button {
    min-width: 48px;
    border-left: 0;
    border-radius: 0 8px 8px 0;
}

.jbx-content-shell .btn-group,
.jbx-content-shell .com-users-registration__submit {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.joomla-alert,
.alert {
    width: min(720px, calc(100% - 32px));
    margin: 82px auto -55px;
    padding: 14px 16px;
    border: 1px solid #d9c996;
    border-radius: 10px;
    color: #594b20;
    background: #fff9df;
    font-size: 0.78rem;
}

.alert-success {
    border-color: #a7c5ad;
    color: #31553a;
    background: #eff8f0;
}

.alert-danger,
.alert-error {
    border-color: #d8aaa4;
    color: #6a2c23;
    background: #fff0ed;
}

.jbx-footer {
    padding-block: 24px;
    border-top: 1px solid rgb(255 255 255 / 12%);
    background: rgb(0 14 31 / 88%);
}

.jbx-footer__inner,
.jbx-footer__inner > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.jbx-footer__inner {
    color: rgb(255 255 255 / 62%);
    font-size: 0.68rem;
}

.jbx-footer a {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid rgb(255 255 255 / 24%);
    border-radius: 7px;
    color: #fff;
    font-size: 0.67rem;
    font-weight: 800;
    text-decoration: none;
}

.jbx-footer .jbx-footer__primary {
    border-color: var(--jbx-orange);
    color: var(--jbx-navy);
    background: var(--jbx-orange);
}

.jbx-system-page {
    display: grid;
    min-height: 100vh;
    padding: 24px;
    place-items: center;
}

.jbx-system-card {
    width: min(580px, 100%);
    padding: clamp(32px, 7vw, 65px);
    border: 1px solid var(--jbx-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 70px rgb(0 0 0 / 18%);
    text-align: center;
}

.jbx-system-card h1 {
    margin: 34px 0 16px;
    font: 850 clamp(2.5rem, 8vw, 4.2rem)/1 var(--jbx-sans);
    letter-spacing: -0.055em;
}

.jbx-system-card p {
    color: var(--jbx-muted);
    line-height: 1.7;
}

.jbx-system-card .jbx-error-code {
    margin: 42px 0 -20px;
    color: var(--jbx-orange-dark);
    font-size: 1rem;
}

.jbx-system-card .jbx-primary-link {
    margin-top: 18px;
}

@media (max-width: 680px) {
    body.jbx-site {
        background-attachment: scroll;
    }

    .jbx-shell {
        width: min(100% - 26px, 1180px);
    }

    .jbx-header__inner {
        min-height: 60px;
    }

    .jbx-brand__image {
        width: 145px;
    }

    .jbx-header nav a:not(.jbx-account-link) {
        display: none;
    }

    .jbx-main {
        padding-top: 98px;
    }

    .jbx-content-shell > div,
    .jbx-content-shell > section,
    .jbx-content-shell > article {
        padding: 25px 20px;
    }

    .jbx-footer__inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 430px) {
    .jbx-footer__inner > div {
        width: 100%;
    }

    .jbx-footer a {
        flex: 1;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}