/*
    Nowoczesny — customer layout.
    Loaded after the production bundle, so this file wins without rebuilding app.min.css.
    Colors still come from the theme variables. This file rebuilds the page structure.
*/

:root {
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 16px;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: #2a3854;
    --ring: rgba(59, 110, 246, 0.35);
    --shadow-card: none;
    --sheet: min(640px, 100%);

    /* IronStream palette. Declared last so it wins over admin Look & Feel. */
    --primary: #3b6ef6;
    --secondary: #3b6ef6;
    --tertiary: #22d3ee;
    --surface: #121a2e;
    --foreground: #e8eef8;
    --main-background: #070d18;
    --font__pri-clr: #e8eef8;
    --font__sec-clr: #8b97ad;
    --header__bg: #0b1120;
    --header_logo__clr: #f4f7fb;
    --header_nav__clr: #d5deea;
    --header_nav__hover_clr: #ffffff;
    --header_profile__clr: #f4f7fb;
    --input-bg: #0c1322;
    --input-clr: #e8eef8;
    --link__pri-clr: #7dd3fc;
    --link__pri-hover-clr: #ffffff;
    --btn__bg-clr-pri: #3b6ef6;
    --btn__clr-pri: #ffffff;
    --btn__border-clr-pri: #3b6ef6;
    --navlink__bg: #121a2e;
    --navlink__clr: #8b97ad;
    --navlink__hover-bg: #3b6ef6;
    --navlink__title-clr: #e8eef8;
    --icon_circle__bg: #1b2740;
    --icon_circle__clr: #7dd3fc;
    --search__bg: transparent;
    --search__clr: #e8eef8;
    --search__title-clr: #f4f7fb;
    --search__input-bg: #0c1322;
    --table_row__bg: #121a2e;
    --table_row__bg-even: #0e1628;
    --table_row__bg-hover: #1a2540;
    --preview__bg: transparent;
    --preview__hover-bg: #182238;
    --preview__title-clr: #e8eef8;
}

html {
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

body.cust-help,
.cust-help .wrapper {
    background: #070d18;
    color: #e8eef8;
    letter-spacing: 0;
}

body *:not(code):not(pre):not(kbd):not(samp) {
    font-family: inherit;
}

code,
pre,
kbd,
samp {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

@media (max-width: 900px) {
    .cust-help .wrapper {
        margin-top: 0 !important;
    }
}

/* Header */
.nx-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #0b1120;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nx-header .header__inner {
    min-height: 58px;
    padding: 8px 0;
}

.nx-header .header__logo {
    display: inline-flex;
    align-items: center;
}

.nx-logo {
    display: block;
    height: 42px;
    width: auto;
}

.nx-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #151d30;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.nx-mark::after {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: linear-gradient(180deg, #67e8f9, #0891b2);
}

.header__nav .nav-item a {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: #151d30;
    color: #d5deea;
    font-weight: 600;
}

.cust-help .header__inner .header__nav .nav-item:last-child a,
.cust-help .header__inner .header__nav .nav-item:last-child a:hover {
    border-color: #3b6ef6;
    background: #3b6ef6;
    color: #ffffff;
}

.header .profile__user .profile__menu {
    min-width: 200px;
    padding: 8px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
}

.header .profile__user .profile__menu .profile--logout {
    background: transparent;
    border-top: 1px solid var(--line);
}

.header .profile__user .profile__menu .profile--logout a {
    height: 40px;
    border-radius: var(--radius-sm);
    color: var(--error);
}

.header .profile__user .profile__menu .profile--logout a .icon-log-out {
    fill: currentColor;
}

.breadcrumbs__inner {
    padding: 16px 0 0;
    font-size: 13px;
}

.page-index .breadcrumbs,
.page-category-select .breadcrumbs {
    display: none;
}

/* Homepage */
.nx-hero {
    position: relative;
    padding: 24px 0 8px;
    color: #e8eef8;
    background: transparent;
}

.nx-hero .contr {
    padding: 28px 28px 26px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: #121a2e;
}

.nx-kicker {
    margin: 0 0 10px;
    color: #22d3ee;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.nx-hero .search__title {
    max-width: 16em;
    margin: 0;
    color: #fff;
    text-align: left;
    font-size: 46px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.nx-hero .search__form {
    max-width: 680px;
    margin: 22px 0 0;
    padding: 0;
    background: transparent;
}

.nx-hero .search__form .form-group {
    max-width: none;
    align-items: center;
    padding: 6px 6px 6px 12px;
    background: #0c1322;
    border: 1px solid #2a3854;
    border-radius: 12px;
    box-shadow: none;
}

.nx-hero .search__form .form-group input,
.nx-hero #kb_search {
    width: auto !important;
    flex: 1 1 auto;
    height: 48px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    color: #e8eef8;
}

.nx-hero .search__form .form-group input:hover,
.nx-hero .search__form .form-group input:focus {
    border: 0;
    box-shadow: none;
}

.nx-hero #search-button {
    width: auto !important;
    flex: 0 0 auto;
    height: 44px !important;
    margin: 0 0 0 8px !important;
    padding: 0 18px;
    border-radius: 12px;
}

.nx-hero .kb-suggestions.boxed {
    max-width: none;
    margin-top: 8px;
    border-radius: 16px;
    box-shadow: var(--shadow-card);
}

.nx-hero__messages:empty {
    display: none;
}

.nx-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin: 16px 0 8px;
}

.nx-actions .navlink {
    position: relative;
    width: auto;
    max-width: none;
    min-height: 124px;
    margin: 0;
    padding: 22px 64px 22px 22px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow-card);
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.nx-actions .navlink:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--secondary) 45%, transparent);
    box-shadow: var(--shadow-card);
}

.nx-actions .navlink::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 24px;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--secondary);
    border-right: 2px solid var(--secondary);
    transform: translateY(-50%) rotate(45deg);
}

.nx-actions .navlink__title {
    font-size: 18px;
    letter-spacing: -0.02em;
}

.nx-actions .navlink__descr {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.45;
}

.nx-kb {
    margin-top: 28px;
    padding: 12px 12px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.nx-kb .article__heading {
    margin: 12px 12px 4px;
    text-align: left;
    font-size: 22px;
    letter-spacing: -0.03em;
}

.nx-kb .article__heading a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.nx-kb .tabbed__tabs .tabbed__tabs_tab {
    border: 0;
    border-radius: 12px;
    box-shadow: none;
}

/* Shared pages */
.search__title,
.select__title,
.article__heading--form {
    font-weight: 600;
    letter-spacing: -0.03em;
    text-align: left;
}

.page-my-tickets .search__title,
.page-view-category .search__title,
.page-view-article .help-search {
    margin-top: 12px;
}

h1.article__heading--form,
.article-heading-tip,
.form-submit-ticket {
    width: var(--sheet);
    margin-left: auto;
    margin-right: auto;
}

h1.article__heading--form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 36px;
    margin-bottom: 8px;
    font-size: 30px;
    text-align: center;
}

h1.article__heading--form + .article-heading-tip {
    margin-top: 0;
}

.article-heading-tip {
    justify-content: center;
    margin-top: 0;
    margin-bottom: 22px;
    text-align: center;
}

.nx-cat-form {
    max-width: 420px;
    margin: 28px auto;
}

.nx-cat-header {
    display: flex;
    align-items: center;
    gap: 14px;
    width: var(--sheet);
    margin: 28px auto 0;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: #121a2e;
}

.nx-cat-header .nx-kicker {
    margin: 0 0 2px;
}

.nx-cat-header__text {
    min-width: 0;
}

.nx-cat-header__name {
    margin: 0;
    color: #f4f7fb;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.nx-cat-header__change {
    margin-left: auto;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: #151d30;
    color: #d5deea;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.nx-cat-header__change:hover {
    border-color: #3b6ef6;
    color: #ffffff;
}

.nx-cat-header + h1.article__heading--form {
    margin-top: 18px;
}

.nx-rules {
    margin: 0 0 28px;
    padding: 16px 18px 8px;
    border: 1px solid rgba(34, 211, 238, 0.28);
    border-radius: 14px;
    background: #0c1322;
}

.nx-rules__title {
    margin: 0 0 8px;
    color: #f4f7fb;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.nx-rules__lead,
.nx-rules__note p {
    margin: 0 0 10px;
    color: #c5d0e0;
    font-size: 14px;
    line-height: 1.5;
}

.nx-rules__label {
    margin: 14px 0 8px;
    color: #22d3ee;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nx-rules ul,
.nx-rules ol {
    margin: 0 0 12px;
    padding-left: 1.25em;
}

.nx-rules ul {
    list-style: disc;
}

.nx-rules ol {
    list-style: decimal;
}

.nx-rules li {
    margin: 0 0 6px;
    color: #e8eef8;
    font-size: 14px;
    line-height: 1.45;
}

.nx-rules__note {
    margin: 4px 0 12px;
    padding: 12px 14px;
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: 12px;
    background: rgba(251, 191, 36, 0.08);
}

.nx-rules__note strong {
    display: block;
    margin-bottom: 4px;
    color: #fbbf24;
    font-size: 13px;
}

.nx-rules__note p {
    margin: 0;
}

.nx-template-box {
    margin: 0 0 14px;
}

.nx-template-box--below {
    margin: 14px 0 0;
}

.nx-template-box--below .nx-example {
    margin-bottom: 0;
}

.nx-example,
.nx-blank {
    margin: 0;
    padding: 12px 14px;
    border-radius: 12px;
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
}

.nx-example {
    margin-bottom: 10px;
    border: 1px solid rgba(59, 110, 246, 0.45);
    background: rgba(59, 110, 246, 0.12);
    color: #e8eef8;
}

.nx-example__title {
    margin: 0 0 8px;
    color: #93c5fd;
    font-size: 13px;
    font-weight: 700;
}

.nx-example p {
    margin: 0 0 4px;
}

.nx-example p:last-child {
    margin-bottom: 0;
}

.nx-example pre,
.nx-blank {
    margin: 0;
    font-family: inherit;
}

.nx-copy-template {
    width: 100%;
    margin-bottom: 10px;
}

.nx-blank {
    border: 1px dashed rgba(255, 255, 255, 0.18);
    background: #0c1322;
    color: #c5d0e0;
}

.form-submit-ticket {
    margin-bottom: 40px;
    padding: 28px 32px 36px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

.form-submit-ticket .form-group,
.form-submit-ticket .param,
.form-submit-ticket .form-groups,
.form-submit-ticket .selectize-control,
.form-submit-ticket .dropzone {
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

.form-submit-ticket .selectize-input {
    width: 100% !important;
}

.icon-in-circle {
    width: 44px;
    height: 44px;
    border-radius: 12px;
}

.icon-cat-tv,
.icon-cat-film,
.icon-cat-series {
    width: 1.15em;
    height: 1.15em;
}

.btn,
.btn-full,
.btn-border,
.btn--blue-border,
button,
input[type="submit"] {
    border-radius: 12px;
    letter-spacing: 0;
}

.btn-full,
.btn--blue-border,
.btn-border {
    font-weight: 600;
}

.form input.form-control,
.form textarea.form-control,
.selectize-control .selectize-input {
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    box-shadow: none;
    background: var(--input-bg);
}

.form input.form-control,
.selectize-control .selectize-input {
    height: 46px;
}

.form textarea.form-control {
    min-height: 160px;
    height: 180px;
    padding: 12px 14px;
}

.form input.form-control:focus,
.form textarea.form-control:focus,
.selectize-input.focus,
.selectize-input.input-active {
    border-color: var(--secondary);
    box-shadow: 0 0 0 4px var(--ring);
}

.form-group label,
.label {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
}

.tabbed__head {
    margin: 8px 8px 12px;
    border-bottom: 0;
    justify-content: flex-start;
}

.tabbed__head .tabbed__head_tabs {
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--font__pri-clr) 6%, var(--surface));
}

.tabbed__head .tabbed__head_tabs li {
    min-width: 0;
    margin: 0;
    padding: 8px 16px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--font__sec-clr);
    box-shadow: none;
}

.tabbed__head .tabbed__head_tabs li.current,
.tabbed__head .tabbed__head_tabs li:not(.current):hover {
    border: 0;
    background: var(--surface);
    color: var(--font__pri-clr);
    box-shadow: 0 1px 2px var(--shadow-1-10);
}

.preview {
    border-bottom: 1px solid var(--line);
    box-shadow: none;
}

.topics,
.notification,
.alert,
.table-wrap,
.ticket__body_block,
.modal .modal__body,
.ticket__params .params--bar,
.ticket__params .params--block {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: none;
}

.topics {
    padding: 20px 20px 4px;
}

.block__head {
    justify-content: flex-start;
    text-align: left;
}

.article .block__head {
    background: transparent;
    color: var(--font__pri-clr) !important;
}

.notification {
    overflow: hidden;
}

.notification::before {
    width: 4px;
}

.ticket {
    gap: 20px;
    align-items: flex-start;
}

.ticket__body_block {
    padding: 22px 24px;
    text-align: start;
    background: var(--surface);
}

.ticket__body_block.response {
    background: color-mix(in srgb, var(--secondary) 7%, var(--surface));
    border-color: color-mix(in srgb, var(--secondary) 28%, transparent);
}

.ticket__body_block h1,
.ticket__body_block h2 {
    letter-spacing: -0.03em;
}

.ticket__params .params--block .row {
    border-bottom-color: var(--line);
}

.ticket__params .params--block + .params--block {
    margin-top: 12px;
}

.table-wrap {
    padding: 6px 8px 12px;
    background: var(--surface);
}

.table-wrap .table thead {
    background: transparent;
    color: var(--font__sec-clr);
}

.table-wrap .table thead a {
    color: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.table-wrap .table thead th,
.table-wrap .table tbody td {
    padding: 14px 16px;
}

.table-wrap .table thead th:not(:first-child),
.table-wrap .table tbody td:not(:first-child) {
    border-left: none;
}

.table thead th .handle::before {
    border-bottom-color: var(--font__sec-clr);
}

.table thead th .handle::after {
    border-top-color: var(--font__sec-clr);
}

.selectize-dropdown,
.selectize-control .selectize-dropdown {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
}

.pagination__link,
.pagination__stroke {
    border-radius: 8px;
}

.pagination__item.is-current .pagination__link {
    background: var(--secondary);
    color: var(--surface);
}

.footer {
    margin-top: 48px;
    padding: 22px 16px 28px;
    border-top: 1px solid var(--line);
    color: var(--font__sec-clr);
    font-size: 13px;
}

.divider {
    height: 1px;
    margin: 24px 0;
    background: var(--line);
}

:where(a, button, input, select, textarea, .btn):focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

.cust-help .select__title,
.cust-help .search__title,
.cust-help .article__heading,
.cust-help h1.article__heading--form {
    color: #f4f7fb;
}

.btn-full,
.btn-full:hover,
.nx-hero #search-button {
    border-color: #3b6ef6;
    background: #3b6ef6;
    color: #ffffff;
}

.btn-full:hover,
.nx-hero #search-button:hover {
    background: #4c7ef8;
}

.form input.form-control,
.form textarea.form-control,
.selectize-control .selectize-input,
.selectize-input,
.selectize-input input,
.form-submit-ticket .dropzone,
.dropzone {
    background-color: #0c1322;
    color: #e8eef8;
}

.selectize-dropdown,
.selectize-control .selectize-dropdown {
    background: #121a2e;
    color: #e8eef8;
}

.selectize-dropdown .option.active,
.selectize-dropdown .active {
    background: #3b6ef6;
    color: #ffffff;
}

.breadcrumbs__inner,
.breadcrumbs__inner a,
.breadcrumbs__inner .last {
    color: #8b97ad;
}

.form-submit-ticket,
.nx-kb,
.nx-actions .navlink,
.ticket__body_block,
.table-wrap,
.topics,
.notification {
    background: #121a2e;
    border-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 800px) {
    .nx-hero {
        padding: 16px 0 8px;
    }

    .nx-hero .search__title {
        font-size: 32px;
    }

    .nx-actions,
    .ticket {
        display: flex;
        flex-direction: column;
    }

    .ticket__params {
        width: 100%;
    }

    h1.article__heading--form {
        font-size: 26px;
    }

    .form-submit-ticket {
        padding: 20px 16px 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nx-actions .navlink {
        transition: none;
    }

    .nx-actions .navlink:hover {
        transform: none;
    }
}