:root {
    /*COLORS*/
    --color-primary-1: #FF6D00;
    --color-primary-2: #14A855;

    --color-neutral-1: #1F1F1F;
    --color-neutral-2: #545454;
    --color-neutral-3: #8E8F90;
    --color-neutral-4: #C7C7C7;
    --color-neutral-5: #E3E3E4;
    --color-neutral-6: #F3F3F3;
    --color-neutral-7: #FBFBFB;
    --color-neutral-8: #FFFFFF;

    --color-tooltip-1: #8DA688;
    --color-tooltip-2: #D0EBCC;
    --color-tooltip-3: #EDFCEA;
    --color-tooltip-4: #FFF9DC;
    --color-tooltip-5: #FFCFCF;

    --color-additional-1: #399963;
    --color-additional-2: #4FD88B;
    --color-additional-3: #7EE69F;
    --color-additional-4: #C7EBD6;
    --color-additional-5: #E6FBEF;
    --color-additional-6: #F5FBF3;
    --color-additional-7: #F37B21;
    --color-additional-8: #FFA663;
    --color-additional-9: #FFBF53;
    --color-additional-10: #CD3B32;
    --color-additional-11: #FF4C40;
    --color-additional-12: #FFCFCF;

    /*ELEVATION SHADOWS*/
    --box-shadow-button: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --box-shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
    --box-shadow-popup: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);

    /* FONTS */
    --font-default: normal 600 1rem/1.5rem 'Mont', system-ui;
    --font-smallest: normal 600 0.75rem/1rem 'Mont', system-ui;
    --font-small: normal 600 0.875rem/1.25rem 'Mont', system-ui;
    --font-big: normal 700 1.125rem/1.5rem 'Mont', system-ui;
    --font-biggest: normal 700 1.5rem/2rem 'Mont', system-ui;
}

/* BASIC */

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

html {
    position: relative;
    height: 100%;
    font-size: 16px;
}

body {
    position: relative;
    margin: 0;
    padding: 0;
    min-height: calc(100vh - 16px);
    min-height: calc(100svh - 16px);
    color: var(--color-neutral-1, #1F1F1F);
    font: var(--font-default);
}

strong, b {
    font-weight: 700 !important;
}

.primaryColorText {
    color: var(--color-primary-2, #14A855);
}

.primaryErrorColorText {
    color: var(--color-additional-11, #FF4C40)
}

/* SCROLL */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-neutral-4, #C7C7C7);
    border-radius: 5px;
}

/* INPUTS AND LINKS */
input[name="password"]::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    position: absolute;
    right: 0;
}

::-ms-reveal {
    display: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s !important;
}

input[type="text"], input[type="password"], input[type="tel"], input[type="email"], input[type="number"] {
    outline: none;
    display: inline-block;
    min-width: 0;
    border: none;
    border-bottom: 1px solid var(--color-neutral-1, #1F1F1F);
    background-color: transparent;
    padding: 8px 16px;

    font: var(--font-default);
    color: var(--color-neutral-1, #1F1F1F);
}

input[type="text"]::placeholder, input[type="password"]::placeholder, input[type="tel"]::placeholder, input[type="email"]::placeholder, input[type="number"]::placeholder {
    color: var(--color-neutral-3, #8E8F90);
    font: var(--font-small);
}

input[type="text"]:hover, input[type="password"]:hover, input[type="tel"]:hover, input[type="email"]:hover, input[type="number"]:hover {
    color: var(--color-primary-2, #14A855);
    border-color: var(--color-primary-2, #14A855);
}

input[type="text"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="email"]:focus, input[type="number"]:focus {
    color: var(--color-neutral-1, #1F1F1F);
    border-color: var(--color-primary-2, #14A855);
}

input[type="text"][disabled], input[type="password"][disabled], input[type="tel"][disabled], input[type="email"][disabled], input[type="number"][disabled], [readonly] {
    color: var(--color-neutral-4, #C7C7C7) !important;
    border-color: var(--color-neutral-4, #C7C7C7) !important;
}

input:invalid, .error {
    color: var(--color-neutral-1, #1F1F1F) !important;
    border-color: var(--color-additional-11, #FF4C40) !important;
}

/* FAKE CHECKBOX AND RADIO */
:where(input[type="checkbox"] + label span:first-child, input[type="checkbox"]:checked + label span:first-child) {
    background: url('/cockpit/images/icon/checkbox_false-21b4e6ccf8c926b712576a597ba8f405.svg') no-repeat;
    flex-shrink: 0;
}

:where(input[type="radio"] + label span:first-child, input[type="radio"]:checked + label span:first-child) {
    background: url('/cockpit/images/icon/radio_false-19393d8dad09d5a16abe2295c6191ef3.svg') no-repeat;
    flex-shrink: 0;
}

input[type="radio"] {
    display: none;
}

input[type="checkbox"] {
    display: none;
}

:where(input[type="radio"] + label span:first-child, input[type="checkbox"] + label span:first-child) {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    vertical-align: middle;
    background-position: center;
    cursor: pointer;
}

:where(input[type="checkbox"]:checked + label span:first-child) {
    background: url('/cockpit/images/icon/checkbox_true-7451af3dfde37ad97ff539ecefe7581d.svg') no-repeat;
    flex-shrink: 0;
}

:where(input[type="radio"]:checked + label span:first-child) {
    background: url('/cockpit/images/icon/radio_true-190ddbfaba4441b1b6b435c261b18b41.svg') no-repeat;
    flex-shrink: 0;
}

:where(input[type="radio"] + label, input[type="checkbox"] + label) {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 4px;
}

textarea {
    outline: none;
    display: inline-block;
    min-width: 0;
    border: 1px solid var(--color-neutral-1, #1F1F1F);
    border-radius: 30px;
    background-color: transparent;
    padding: 1rem 2rem;

    font: var(--font-default);
    color: var(--color-neutral-1, #1F1F1F);
}

textarea::placeholder {
    color: var(--color-neutral-3, #8E8F90);
    font: var(--font-small);
}

textarea:hover {
    color: var(--color-primary-2, #14A855);
    border-color: var(--color-primary-2, #14A855);
}

textarea:focus {
    color: var(--color-neutral-1, #1F1F1F);
    border-color: var(--color-primary-2, #14A855);
}

textarea[disabled] {
    color: var(--color-neutral-4, #C7C7C7) !important;
    border-color: var(--color-neutral-4, #C7C7C7) !important;
}

textarea:invalid {
    color: var(--color-neutral-1, #1F1F1F) !important;
    border-color: var(--color-additional-11, #FF4C40) !important;
}

input[list]::-webkit-calendar-picker-indicator {
    display: none !important;
}

.inputWrapper {
    min-height: 5.625rem;
}

.inputWrapper--textArea {
    min-height: 12rem;
}

.monthSelectWrapper {
    width: 8rem;
    display: inline-block;
    vertical-align: middle;
}

hr {
    box-sizing: border-box;
    border: 1px solid var(--color-neutral-4, #C7C7C7);
    width: 100%;
    margin: 1rem 0;
}

.displayNone {
    display: none !important;
}

.hidden {
    visibility: hidden;
}

a, a:visited {
    text-decoration: none;
    color: var(--color-primary-2, #14A855);
    font-weight: 700;
    font-size: 1rem;
    transition: color 200ms ease-in-out;
}

a:not(.button):hover {
    color: var(--color-additional-3, #7EE69F);
}

a:not(.button):is(:focus, :focus-within, :active) {
    color: var(--color-additional-1, #399963);
}

.alternateLink, .alternateLink:visited {
    padding: 0;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    font: var(--font-default);
    text-decoration: underline;
    color: var(--color-neutral-1, #1F1F1F);
}

.alternateLink--noDecoration, .alternateLink--noDecoration:visited {
    text-decoration: none;
}

.alternateLink--smallFont, .alternateLink--smallFont:visited {
    font: var(--font-small);
}

.alternateLink--selected {
    pointer-events: none;
    color: var(--color-primary-2, #14A855);
}

.alternateLink:hover {
    color: var(--color-additional-3, #7EE69F);
}

.alternateLink:focus, .alternateLink:focus-within, .alternateLink:active {
    color: var(--color-additional-1, #399963);
}

form.htmx-request, .button.htmx-request {
    opacity: .5;
    transition: opacity 300ms linear;
}

.button.htmx-request {
    cursor: wait;
    pointer-events: none;
}

.button, .button:visited {
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: var(--font-default);
    font-weight: bold;
    background-color: var(--color-primary-2, #14A855);
    color: var(--color-neutral-8, #FFFFFF);
    border: none;
    border-radius: 100px;
    padding: 8px 24px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-shadow: var(--box-shadow-button);
    transition: background-color 200ms ease-in-out;
}

.button:hover {
    background-color: var(--color-additional-3, #7EE69F);
}

.button:focus, .button:active .button:focus-within {
    background-color: var(--color-additional-1, #399963);
    box-shadow: none;
}

.button--secondary, .button--secondary:visited {
    box-shadow: none;
    color: var(--color-primary-2, #14A855);
    background-color: var(--color-neutral-8, #FFFFFFFF);
    border: 1px solid var(--color-primary-2, #14A855FF);
}

.button--secondary:hover {
    box-shadow: none;
    background-color: var(--color-additional-5, #E6FBEFFF);
}

.button--secondary:focus, .button--secondary:active, .button--secondary:focus-within {
    box-shadow: none;
    background-color: var(--color-additional-4, #C7EBD6);
}

.button--primaryAlternative, .button--primaryAlternative:visited {
    background-color: var(--color-primary-1, #FF6D00);
}

.button--primaryAlternative:hover {
    background-color: var(--color-additional-8, #FFA663);
}

.button--primaryAlternative:focus, .button--primaryAlternative:active, .button--primaryAlternative:focus-within {
    background-color: var(--color-additional-7, #F37B21);
}

.button[disabled], .button--disabled, .formTabs__tab[disabled] {
    cursor: default;
    background-color: var(--color-neutral-6, #f3f3f3) !important;
    color: var(--color-neutral-3, #8E8F90);
    box-shadow: none;
}

.button--nowrap {
    white-space: nowrap;
}

.pseudoLinkButton {
    cursor: pointer;
    background: transparent;
    border: none;
    color: var(--color-neutral-2, #545454);
    font: var(--font-small);
    font-weight: 700;
    display: flex;
    gap: 5px;
    text-decoration: underline;
}

.pseudoLinkButton--regular {
    font: var(--font-default);
    font-weight: 600;
    text-decoration: none;
    text-align: left;
    color: var(--color-neutral-1, #1F1F1F);
}

.pseudoLinkButton--serviceControl {
    column-gap: 1rem;
    align-items: center;
    text-decoration: none;
    text-align: left;
    color: var(--color-neutral-1, #1F1F1F);
}

.pseudoLinkButton--regular:is(:hover, :focus) {
    color: var(--color-primary-2, #14A855);
}

.pseudoLinkButton--centered {
    justify-content: center;
    align-items: center;
}

.pseudoLinkButton--defaultColor {
    color: var(--color-primary-2, #14A855);
}

.iconButton {
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
}

.iconButton img {
    display: block;
    max-width: 100%;
    width: 1.5rem;
    height: 1.5rem;
}

.icon {
    width: 1.5rem;
    height: 1.5rem;
}

.errorLabel {
    color: var(--color-additional-11, #FF4C40);
    margin: 2px 0;
    display: flex;
    gap: 5px;
    align-items: center;
    font: var(--font-smallest);
    opacity: 1;
    transition-behavior: allow-discrete;
    transition-property: display, opacity, color;
    transition-duration: 400ms;
    transition-timing-function: ease-out;
    @starting-style {
        opacity: 0;
    }
}

.errorLabel--centered {
    justify-content: center;
}

.errorLabel--emailCode {
    width: 275px;
    margin: 2px auto;
}

.errorLabel:has(span:empty) {
    display: none;
    opacity: 0;
}

.passwordEyeWrapper {
    position: relative;
    display: inline-block;
}

.passwordEyeWrapper__icon {
    cursor: pointer;
    position: absolute;
    right: 2px;
    bottom: 9px;
    width: 24px;
    height: 24px;
    object-fit: contain;
    object-position: center;
}

/* UTILS */

.flex-right {
    display: flex;
    align-items: center;
    justify-content: end;
}

.flex-space-between-gap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.flex-centered-gap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.flex-wrap {
    flex-wrap: wrap;
}

.center {
    display: grid;
    place-items: center;
}

.allRows {
    grid-column: 1 / -1;
}

.grey-text {
    color: var(--color-neutral-3, #8E8F90);
}

.small-text {
    font: var(--font-small);
}

.plainHeader {
    display: inline-block;
    margin: 0;
    color: inherit;
    font: var(--font-default);
}

.tabular-nums {
    font-variant-numeric: tabular-nums;
}

.number-to-text-style {
    appearance: textfield;
}

.number-to-text-style::-webkit-outer-spin-button, .number-to-text-style::-webkit-inner-spin-button {
    appearance: none;
}

.extra-bold {
    font-weight: 800;
}

.neutral-2 {
    color: var(--color-neutral-2, #545454);
}

.neutral-3 {
    color: var(--color-neutral-3, #8E8F90);
}

/* COCKPIT LAYOUT */
body:has(.cockpit) {
    background-color: var(--color-neutral-7, #FBFBFB);
}

.cockpit {
    position: relative;
    margin: 0 auto;
    max-width: 1440px;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    column-gap: 14px;
    row-gap: 24px;
    grid-template-areas:
                        "header header"
                        "menu content"
                        "footer footer";
    grid-template-columns: 300px auto;
    grid-template-rows: min-content auto min-content;
    overflow-y: hidden;
}

.content {
    container: content / inline-size;
    grid-area: content;
    border-radius: 15px;
    background-color: var(--color-neutral-8, #FFFFFF);
    padding: 24px;
    overflow: hidden;
}

.content--mobile:not(:empty) ~ .content {
    display: none;
}

.content__grid {
    display: grid;
    column-gap: 1rem;
    row-gap: 2rem;
    grid-template-columns: repeat(2, minmax(344px, 516px));
}

.content__gridForArticles {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(480px, 2fr) minmax(300px, 1fr);
    justify-content: space-between;
}

@container content (max-width: 860px) {
    .content__gridForArticles {
        grid-template-columns: 1fr;
    }
}

.tempContainer:empty {
    display: none;
}

.content__cell {
    container: content-cell / inline-size;
    height: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}

.content__cell--noHeight {
    height: initial;
}

.content__cell--twoColumns {
    grid-column: 1 / span 2;
}

.content__cell--maxWidth {
    max-width: 782px;
}

/* hiding titles for next elements of container */

.content__cellsWrapper {
    grid-column: span 2;
    display: grid;
    grid-template-columns: subgrid;
    column-gap: 1.5rem;
    row-gap: 1rem;
}

.content__cellsWrapper .content__cell:first-child {
    grid-column-start: 1;
}

.content__cellsWrapper .content__cellTitle {
    display: none;
}

.content__cellsWrapper .content__cell:first-child .content__cellTitle {
    display: block;
}

.content__cellsWrapper .content__cell:nth-child(2) .content__cellTitle {
    display: block;
    visibility: hidden;
}

@media screen and (max-width: 1066px){
    .content__cellsWrapper .content__cell:nth-child(2) .content__cellTitle {
        display: none;
    }

    .content__cellsWrapper {
        grid-column: auto;
    }
}

.content__cellTitle {
    font: var(--font-default);
    font-weight: 700;
    margin: 0;
}

.content__cellBody {
    border-top: 24px solid var(--color-additional-3, #7EE69F);
    border-radius: 15px;
    box-shadow: var(--box-shadow-card);
    padding: 2rem;
    flex-grow: 1;
    position: relative;
}

.content__cellBody:has(.htmx-indicator) {
    min-height: calc(265px + 24px);
}

.content__cellBody--noPadding {
    padding: 0;
}

.content__cellBody--noStyle {
    border-top: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.content__cellBody--addPackage {
    padding: 1.5rem;
    border-top: none;
}

.content__cellBody--noNotch {
    border-top: none;
}

.content__cellBody--lightNotch {
    border-color: #7EE69F66;
}

.back {
    display: flex;
    gap: 0.25rem;
    align-items: center
}

@media screen and (max-width: 1066px){
    .content__grid {
        grid-template-columns: 1fr;
    }

    .content__cell--twoColumns {
        grid-column: auto;
    }
}

@media screen and (max-width: 400px) {
    .content {
        padding: 0.5rem;
    }
}

/* HEADER */
.header {
    grid-area: header;
    display: flex;
    flex-direction: column;
    row-gap: 24px;
}

.header__firstRow {
    min-height: 3rem;
    padding-inline: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header__secondRow {
    padding-inline: 2rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.header__city, .header__centre, .header__signout {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header__cityList {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    column-gap: 80px;
    row-gap: 16px;
    grid-template-columns: repeat(auto-fit, 148px);
    width: calc(148px * 3 + 80px * 2);
    max-width: calc(100vw - 5rem);
}

#city-list-error {
    grid-column: 1 / -1;
    text-align: center;
}

.header__regions {
    display: flex;
    column-gap: 40px;
    align-items: center;
}

.header__site, .header__site:hover, .header__site:active,
.header__site:visited, .header__site:focus, .header__site:focus-within {
    font: var(--font-small);
    font-weight: 700;
    color: var(--color-neutral-2, #545454);
    text-decoration: underline;
}

.header__nav {
    display: flex;
    column-gap: 32px;
    align-items: center;
}

.header__contract {
    font: var(--font-small);
}

.header__logoWrapper {
    flex: 0 0 calc(300px + 14px - 2rem); /*menu + gap - row padding*/
}

.header__logoImage {
    height: 48px;
    width: 163px;
    object-fit: contain;
    object-position: left;
}

.header__searchWrapper {
    flex: 1 0 auto;
    margin-right: 80px;
}

.header__searchWrapper .search {
    max-width: 800px;
    margin: 0;
}

.mobileHeader {
    grid-area: mobileHeader;
    display: none;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--box-shadow-card);
}

.mobileHeader__logo {
    max-height: 24px;
}

.mobileHeader__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobileHeader__button {
    padding: 1rem;
    position: relative;
}

.mobileHeader__button--active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50%;
    width: 32px;
    height: 3px;
    border-bottom: 3px solid var(--color-additional-3, #7EE69F);
}

.mobileHeader__button--active img {
    filter: invert(87%) sepia(10%) saturate(1604%) hue-rotate(80deg) brightness(94%) contrast(92%);
}

/* SEARCH */
.search {
    color: var(--color-neutral-1, #1F1F1F);
    width: 100%;
    margin: 24px auto;
    position: relative;
    outline: none;
    border: 1px solid var(--color-neutral-6, #f3f3f3);
    background-color: var(--color-neutral-6, #f3f3f3);
    border-radius: 30px;
    padding: 16px 16px 16px 56px;
    background-image: url("/cockpit/images/icon/search-9f5116a8e906aa0dad073c088af65163.svg");
    background-repeat: no-repeat;
    background-position: 1rem 1rem;
    min-height: 56px;
}

.search--noMargin {
    margin: 0 auto;
}

.search:focus, .search:hover, .search:not(:placeholder-shown) {
    background-color: var(--color-neutral-8, #FFFFFF);
    border: 1px solid var(--color-primary-2, #14A855);
}

.search::-webkit-search-cancel-button, .search::-webkit-search-cancel-button {
    display: none;
}

.search::placeholder {
    color: var(--color-neutral-3, #8E8F90);
}

.search--articleResultActive {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--color-neutral-5, #E3E3E4) !important;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: var(--box-shadow-popup);
}

.articleSearchResult {
    width: 100vw;
    width: 100svw;
    max-width: 100%;
}

.articleSearchResult__noResult {
    text-align: center;
}

.articleSearchResult__noResult--mobile {
    margin-block: 1rem;
    padding-block: 1rem;
    border-top: 1px solid var(--color-additional-3, #7EE69F);
    border-bottom: 1px solid var(--color-additional-3, #7EE69F);
}

.articleSearchResult__all {
    display: block;
    text-align: center;
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 1rem;
}

.articleSearchResult__all::after {
    content: "";
    margin: 0 auto;
    width: calc(100% + 2rem - 4px);
    height: 1px;
    border-bottom: 1px solid #cbcbcc;
    display: block;
    position: absolute;
    bottom: 0;
    left: calc(-1rem + 2px);
    padding-bottom: 1rem;
}

.articleSearchResult__all--mobile {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-additional-3, #7EE69F);
    border-bottom: 1px solid var(--color-additional-3, #7EE69F);
}

.articleSearchResult__all--mobile::after {
    display: none;
}

.articleSearchResult__grid {
    display: grid;
    grid-template-columns: 160px auto;
    column-gap: 0.5rem;
    row-gap: 1rem;
    overflow-y: auto;
    max-height: 60vh;
}

.articleSearchResult__grid--mobile {
    grid-template-columns: auto;
    overflow-y: visible;
    max-height: none;
}

.articleSearchResult__category {
    color: var(--color-neutral-2, #545454);
    font: var(--font-small);
}

.articleSearchResult__articles {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}

.articleSearchResult__articles--mobile {
    padding-block-end: 2rem;
    border-bottom: 1px solid var(--color-neutral-5, #E3E3E4);
    margin-block-end: 1rem;
}

.articleSearchResult__articles--mobile:last-child {
    border: none;
    margin: 0;
    padding: 0;
}

.articleSearchResult__article, .articleSearchResult__article:visited {
    display: block;
    color: var(--color-neutral-1, #1F1F1F);
    font: var(--font-default);
    padding-left: 0.5rem;
    border-left: 3px solid transparent;
    transition: background-color 200ms ease-in-out;
}

.articleSearchResult__article:hover, .articleSearchResult__article:active,
.articleSearchResult__article:focus, .articleSearchResult__article:focus-within {
    color: var(--color-neutral-1, #1F1F1F);
    background-color: var(--color-additional-6, #F5FBF3);
    border-left: 3px solid var(--color-additional-3, #7EE69F);

}

.searchAll {
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
}

.searchAll__title {
    margin: 0;
    font: var(--font-biggest);
    font-weight: 800;
}

.searchAll__tags {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    column-gap: 1.5rem;
    row-gap: 1rem;
}

.searchAll__label {
    cursor: pointer;
}

.searchAll__results {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-direction: column;
    row-gap: 1.5rem;
}

/* FOOTER */
.footer {
    grid-area: footer;
    background-color: var(--color-neutral-8, #FFFFFF);
    min-height: 64px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 32px 16px;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.footer__firm, .footer__copyright {
    font: var(--font-small);
}

.footer__copyright, .footer__copyright:hover, .footer__copyright:active,
.footer__copyright:visited, .footer__copyright:focus, .footer__copyright:focus-within {
    color: inherit;
    text-decoration: underline;
}

.footer__supportWrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 56px;
}

.footer__social {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.footer__socialLink {
    display: block;
    flex-basis: 24px;
    width: 24px;
    height: 24px;
}

.footer__socialImage {
    width: 1.5rem;
    height: 1.5rem;
    transition: filter 300ms;
}

.footer__socialLink:hover .footer__socialImage {
    filter: invert(40%) sepia(66%) saturate(1908%) hue-rotate(120deg) brightness(96%) contrast(84%);
}

.footer__supportEmails {
    text-align: right;
}

.footer__supportEmails a {
    display: block;
}

.footer__supportTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.footer__appsBanners {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.footer__appsBanners a, .footer__appsBanners img {
    display: block;
}

@media screen and (max-width: 1000px){
    .footer:has(.footer__appsBanners) .footer__supportWrapper {
        flex-grow: 1;
    }
}

@media screen and (max-width: 700px){
    .footer, .footer__supportWrapper {
        flex-direction: column-reverse;
        justify-content: center;
        row-gap: 32px;
    }

    .footer__copyright {
        display: block;
        text-align: center;
    }
}

/* MENU */
.menu {
    grid-area: menu;
}

.menu__contract {
    padding: 0.5rem 2rem;
    max-width: 100%;
}

.menu__contract > * {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: clamp(0.725rem, 4vw, 1.2rem);
    line-height: normal;
}

.menu__contractValue {
    color: var(--color-neutral-3, #8E8F90);
}

.menu__list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-direction: column;
}

.menu__item--active {
    background-color: var(--color-additional-6, #F5FBF3);
}

.menu__item--active a, .menu__item--active a:visited {
    color: var(--color-additional-1, #399963);
}

.menu__link, .menu__link:visited {
    display: flex;
    align-items: center;
    column-gap: 24px;
    padding: 0.5rem 2rem;
    font: var(--font-default);
    color: var(--color-neutral-1, #1F1F1F);
}

.menu__link:hover {
    color: var(--color-additional-3, #7EE69F);
}

.menu__link:focus, .menu__link:focus-within, .menu__link:active {
    color: var(--color-additional-1, #399963);
}

.menu__icon {
    width: 1.5rem;
    height: 1.5rem;
}

.menu__link:hover .menu__icon {
    filter: invert(90%) sepia(10%) saturate(1738%) hue-rotate(76deg) brightness(91%) contrast(97%);
}

.menu__link:focus  .menu__icon,
.menu__link:focus-within  .menu__icon,
.menu__link:active  .menu__icon{
    filter: invert(48%) sepia(77%) saturate(340%) hue-rotate(94deg) brightness(91%) contrast(87%);
}

.menu__item--active .menu__icon {
    filter: invert(50%) sepia(13%) saturate(1877%) hue-rotate(93deg) brightness(97%) contrast(81%) !important;
}

.menu__divider {
    box-sizing: border-box;
    border: 1px solid var(--color-neutral-5, #E3E3E4);
    width: 100%;
    margin: 1rem 0;
}

.menu__mobilePart {
    display: none;
}

@media screen and (max-width: 850px) {
    .header {
        display: none;
    }

    .menu {
        z-index: 1;
        transform: translateX(-100%);
        scale: 0; /* prevent vertical scroll while hidden */
        transition: transform 600ms ease-in-out;
        background: var(--color-neutral-8, #FFFFFF);
        position: absolute;
        grid-row: 2;
        width: 100vw;
        width: 100svw;
    }

    .menu__mobilePart {
        margin-top: 2rem;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        align-items: center;
    }

    .menu--mobileActive {
        transform: translateX(0);
        scale: 1;
        position: static;
    }

    .mobileHeader {
        display: flex;
    }

    .footer {
        padding-top: 2rem;
        box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.3);
    }

    .cockpit {
        grid-template-areas:
                        "mobileHeader mobileHeader"
                        "content content"
                        "footer footer";
    }

    .cockpit:has(.menu--mobileActive) {
        grid-template-areas:
                        "mobileHeader mobileHeader"
                        "menu menu"
                        "footer footer";
    }

    .menu--mobileActive ~ .content {
        position: absolute;
        max-width: 100%;
        grid-row-start: 2;
        grid-row-end: 3;
        inset: 0;
    }
}

/* POPUP */
.popUp {
    display: none;
    opacity: 0;
    position: relative;
    border: none;
    border-radius: 15px;
    padding: 32px;
    width: min-content;
    min-width: 330px;
    background-color: var(--color-tooltip-4, #FFF9DC);
    box-shadow: var(--box-shadow-popup);
    transition-behavior: allow-discrete;
    transition-property: display, opacity, overlay;
    transition-duration: 400ms;
    transition-timing-function: ease-out;
}

.popUp[open] {
    position: fixed;
    display: block;
    opacity: 1;

    @starting-style {
        opacity: 0;
    }
}

.popUp--error {
    background-color: var(--color-tooltip-5, #FFCFCF);
}

.popUp--question {
    background-color: var(--color-additional-5, #E6FBEF);
}

.popUp--blank {
    background-color: var(--color-neutral-8, #FFFFFF);
}

.popUp:has(#nightConfirmation) {
    background-color: var(--color-neutral-8, #FFFFFF);
    width: clamp(300px, 531px, 90vw);
}

.popUp--restore {
    width: clamp(300px, 469px, 90vw);
}

.popUp--suspend {
    width: clamp(300px, 708px, 90vw);
}

.popUp--textCentered .popUp__content {
    text-align: center;
}

.popUp::backdrop {
    opacity: 0;
    backdrop-filter: blur(0);
    transition-behavior: allow-discrete;
    transition-property: backdrop-filter, opacity, overlay;
    transition-duration: 400ms;
    transition-timing-function: ease-out;
}

.popUp[open]::backdrop {
    opacity: 1;
    backdrop-filter: blur(4px);
}

@starting-style {
    .popUp[open]::backdrop {
        opacity: 0;
        backdrop-filter: blur(0);
    }
}

.popUp__closeForm {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 8px;
    right: 8px;
}

.popUp__closeButton {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    width: 24px;
    height: 24px;
}

.popUp__image {
    max-width: 100%;
    display: block;
    margin: 0 auto 1rem;
}

.popUp__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.popUp__headerText {
    margin: 0;
    font: var(--font-default);
    font-weight: 700;
}

/* POPUPS WITH CUSTOM PLACEMENT */
.tippy-box[data-theme~='custom-fragment'] {
    font: var(--font-default);
    color: var(--color-neutral-1, #1F1F1F);
    border: none;
    border-radius: 0 0 15px 15px;
    width: min-content;
    background-color: var(--color-neutral-8, #FFFFFF);
    box-shadow: var(--box-shadow-popup);
}

.tippy-box[data-theme~='custom-fragment'] > .tippy-content {
    padding: 2rem;
}

.tippy-box[data-theme~='search'] {
    font: var(--font-default);
    color: var(--color-neutral-1, #1F1F1F);
    border: none;
    border-radius: 0 0 15px 15px;
    width: min-content;
    background-color: var(--color-neutral-8, #FFFFFF);
    box-shadow: var(--box-shadow-popup);
}

.tippy-box[data-theme~='search'] > .tippy-content {
    padding: 1rem;
}

.popUpFragment--search::before {
    content: "";
    position: absolute;
    height: 2px;
    top: -2px;
    z-index: 1;
    left: 0;
    width: 100%;
    border-left: 2px solid var(--color-neutral-8, #FFFFFF);
    border-right: 2px solid var(--color-neutral-8, #FFFFFF);
}

.popUpFragment__closeButton {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 8px;
    right: 8px;
}

.popUpFragment__closeButton--search {
    top: -40px;
    right: 16px;
}

.popUp:has(.choices) {
    overflow: visible;
}

.popUp--fixIp {
    width: clamp(300px, 795px, 90vw);
}

.popUp--payment {
    width: clamp(300px, 600px, 90vw);
}

.popUp--email {
    width: clamp(300px, 32.5rem, 90vw);
}

/* RESTORE POPUP */

.popUp--restoreInfo {
    width: clamp(300px, 580px, 90vw);
}

.popUp--restoreFromPause {
    background-color: #FFDFA9;
}

.popUp--restoreFromPause .restoreInfoContainer__services {
    background-color: #FFF7CE;
}

.popUp--restoreFromDisconnected {
    background-color: var(--color-tooltip-5, #FFCFCF);
}

.popUp--restoreFromDisconnected .restoreInfoContainer__services {
    background-color: #FCEAEA;
}

/* SPOILER */
.spoilerIcon {
    display: none;
}

.spoilerTitle .spoilerIcon {
    display: block;
    transition: transform 1s ease-in-out;
}

.spoilerTitle--active .spoilerIcon {
    transform: rotate(180deg);
}

.spoilerBody {
    max-height: 0;
    overflow: hidden;
    filter: blur(8px);
    transition: max-height 1s cubic-bezier(0, 1, 0, 1), filter 1s ease-in-out;
}

.spoilerBody--active {
    display: block !important;
    max-height: 3000px;
    filter: blur(0);
    transition: max-height 1s ease-in-out, filter 1s ease-in-out;
}


/* NOTIFICATIONS */
.notificationHolder {
    display: grid;
    grid-column: 1 / -1;
    row-gap: 1rem;
}

.notificationHolder:not(:has(.notification)) {
    display: none;
}

.notification {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    opacity: 1;
    scale: 1;

    position: relative;
    padding: 1.5rem;
    background-color: var(--color-tooltip-4, #FFF9DC);
    border-radius: 15px;
    box-shadow: var(--box-shadow-popup);

    transition-property: display, opacity, scale, translate;
    transition-duration: 600ms;
    transition-timing-function: ease-out;
    @starting-style {
        opacity: 0;
        scale: 0.3;
    }
}

.notification--error {
    background-color: var(--color-tooltip-5, #FFCFCF);
}

.notification--question {
    background-color: var(--color-additional-5, #E6FBEF);
}

.notification--blank {
    background-color: var(--color-neutral-8, #FFFFFF);
}

.notification--gray {
    background-color: var(--color-neutral-6, #F3F3F3);
}

.notification--noImageShadow .notification__image {
    box-shadow: none;
}

.notification__closeButton {
    position: absolute;
    top: 6px;
    right: 6px;
}

.notification__image {
    display: block;
    object-fit: contain;
    object-position: center;
    width: 138px;
    height: 138px;
    aspect-ratio: 1 / 1;
    border-radius: 15px;
    box-shadow: var(--box-shadow-card);

    float: left;
    margin-inline-end: 1rem;
    margin-block-end: 1rem;
}

.notification__title {
    font: var(--font-big);
    margin: 0;
    display: flex;
    column-gap: 1rem;
    row-gap: 0.5rem;
    align-items: center;
}

.notification__title ~ .notification__body {
    margin-block-start: 1rem;
}

.notification__titleText {
    overflow-wrap: anywhere;
}

.notification__buttons {
    display: flex;
    column-gap: 2rem;
    row-gap: 1rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* NOTIFICATION POPUPS */
.emailFormInput[type="email"] {
    display: block;
    width: 18rem;
    max-width: 100%;
    margin: 0 auto;
}

.emailFormInput:invalid:placeholder-shown {
    border-color: var(--color-neutral-1, #1F1F1F) !important;
}

.emailCodeFormInput {
    display: block !important;
    width: 8ch;
    max-width: 100%;
    text-align: center;
    margin: 1rem auto 0;
}

.emailCodeFormInput:invalid:placeholder-shown, #popup-confirm-phone-code:invalid:placeholder-shown {
    border-color: var(--color-neutral-1, #1F1F1F) !important;
}

.radioGroup {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
}

.phoneForm__buttons {
    margin-block-start: 2rem;
}

.phoneFormSelect, .phoneForm__codeFields {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    align-items: center;
}

.phoneFormSelect__option:has(#current-phone-radio:checked) [readonly] {
    color: var(--color-neutral-1, #1F1F1F) !important;
    cursor: not-allowed;
}

.phoneInput {
    width: 16ch;
    text-align: center;
    margin: 0 auto;
    display: block !important;
}

.phoneCodeFormInput {
    width: 6ch;
    margin: 0 auto;
    display: block !important;
}

.lifecellCodeForm__inputs {
    max-width: 430px;
    margin: 0 auto 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.resendCode__text {
    text-align: center;
    margin-block-end: 1.5rem;
}

#lifecell-otp-timer {
    display: inline-block;
    min-width: 4ch;
}

/* SLIDER */
.glide {
    width: 500px;
}

.glide__image {
    display: block;
    width: 100%;
    height: 330px;
    object-fit: cover;
    object-position: center;
}

/* TABS */
.formTabs {
    min-height: 40px;
    margin-block: 36px;
    display: flex;
}

.formTabs--smallMargin {
    margin-block: 1.5rem;
}

.formTabs--noMargin {
    margin: 0;
}

.formTabs__tab {
    cursor: pointer;
    flex: 1 0 50%;
    border-left: none;
    border-right: 1px solid var(--color-additional-3, #7EE69F);
    border-top: 1px solid var(--color-additional-3, #7EE69F);
    border-bottom: 1px solid var(--color-additional-3, #7EE69F);
    margin: 0;
    padding: 0;
    width: auto;
    overflow: visible;
    background-color: transparent;
    color: inherit;
    font: inherit;
    text-align: center;
    line-height: 40px;
    transition: 150ms background ease-in-out;
}

.formTabs__tab:last-child {
    border-right: none;
}

.formTabs__tab--active {
    background: var(--color-additional-3, #7EE69F);
}

.formTabs__tab--rounded:first-child {
    border-top-left-radius: 15px;
    border-left: 1px solid var(--color-additional-3, #7EE69F);
}

.formTabs__tab--rounded:last-child {
    border-top-right-radius: 15px;
    border-right: 1px solid var(--color-additional-3, #7EE69F);
}

.formTabContainer {
    display: none;
    padding-inline: 42px;
    padding-block-end: 32px;
    margin-top: 2rem;
}

.formTabContainer--noPadding {
    padding: 0;
}

.formTabContainer--autoPayment {
    padding-inline: 2rem;
    padding-block-end: 1.5rem;
    margin-top: 1.5rem;
}

.formTabContainer--active {
    display: block;
}

/* TOOLTIPS */
.tooltip, .serviceTooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    height: 24px;
    width: 24px;
    background: url("/cockpit/images/icon/info-b3af23533d3f7a9c4172b4751a115cba.svg") no-repeat center;
    background-size: contain;
}

.tooltip--question {
    background: url("/cockpit/images/icon/question-mark-7dc11df3228e1a8c3d6d17255e4f27fc.svg") no-repeat center;
}

.tooltip--noStyle {
    display: initial;
    align-items: initial;
    vertical-align: initial;
    height: auto;
    width: auto;
    background: none;
}

.serviceTooltip {
    background: url("/cockpit/images/icon/question-mark-7dc11df3228e1a8c3d6d17255e4f27fc.svg") no-repeat center;
}

.tippy-box[data-theme~='custom-default'] {
    color: var(--color-neutral-1, #1F1F1F);
    background-color: var(--color-tooltip-2, #D0EBCC);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    border-radius: 15px;
}

.tippy-box[data-theme~='custom-default'] > .tippy-content {
    padding: 1rem;
}

.tippy-box[data-theme~='custom-default'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: var(--color-tooltip-2, #D0EBCC);
}
.tippy-box[data-theme~='custom-default'][data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: var(--color-tooltip-2, #D0EBCC);
}
.tippy-box[data-theme~='custom-default'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color: var(--color-tooltip-2, #D0EBCC);
}
.tippy-box[data-theme~='custom-default'][data-placement^='right'] > .tippy-arrow::before {
    border-right-color: var(--color-tooltip-2, #D0EBCC);
}

.tippy-box[data-theme~='custom-neutral'] {
    color: var(--color-neutral-1, #1F1F1F);
    background-color: var(--color-tooltip-4, #FFF9DC);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    border-radius: 15px;
}

.tippy-box[data-theme~='custom-neutral'] > .tippy-content {
    padding: 1rem;
}

.tippy-box[data-theme~='custom-neutral'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: var(--color-tooltip-4, #FFF9DC);
}
.tippy-box[data-theme~='custom-neutral'][data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: var(--color-tooltip-4, #FFF9DC);
}
.tippy-box[data-theme~='custom-neutral'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color: var(--color-tooltip-4, #FFF9DC);
}
.tippy-box[data-theme~='custom-neutral'][data-placement^='right'] > .tippy-arrow::before {
    border-right-color: var(--color-tooltip-4, #FFF9DC);
}

.tippy-box[data-theme~='custom-warning'] {
    color: var(--color-neutral-1, #1F1F1F);
    background-color: var(--color-tooltip-5, #FFCFCF);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    border-radius: 15px;
}

.tippy-box[data-theme~='custom-warning'] > .tippy-content {
    padding: 1rem;
}

.tippy-box[data-theme~='custom-warning'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: var(--color-tooltip-5, #FFCFCF);
}
.tippy-box[data-theme~='custom-warning'][data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: var(--color-tooltip-5, #FFCFCF);
}
.tippy-box[data-theme~='custom-warning'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color: var(--color-tooltip-5, #FFCFCF);
}
.tippy-box[data-theme~='custom-warning'][data-placement^='right'] > .tippy-arrow::before {
    border-right-color: var(--color-tooltip-5, #FFCFCF);
}

/* MAP */
#map_canvas {
    width: 540px;
    height: 320px;
}

#maps_canvas_mobile {
    margin-top: 24px;
    width: 100%;
    min-height: 320px;
    flex-grow: 1;
}

#mobile-maps {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 640px){
    #map_canvas {
        width: calc(100svw - 5rem);
    }
}

.maps {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 2rem;
}

.maps h3 {
    margin-top: 0;
    margin-bottom: 24px;
}

.maps__menu {
    max-width: 300px;
}

@media screen and (max-width: 942px){
    .maps {
        grid-template-columns: 1fr;
    }

    .maps__menu {
        max-width: 100%;
    }
}

@media screen and (max-width: 610px){
    .maps {
        grid-template-columns: 1fr;
    }
}

.serviceCenterList {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.serviceCenterList li {
    margin: 0;
    padding: 0;
}

.mapsTooltip__header {
    margin-top: 0;
}

.mapsTooltip__subheader {
    color: var(--color-neutral-2, #545454);
    margin: 0.5rem 0;
}

.mobileCentresPage {
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
}

.mobileCentresPage__header {
    margin: 0;
    text-align: center;
    font-size: var(--font-default);
    font-weight: 700;
}

/* CHOISE CUSTOMIZATION */

.choices {
    margin-bottom: 0;
}

.choices__list--dropdown,.choices__list[aria-expanded] {
    z-index: 1100;
    border-color: var(--color-additional-2, #4FD88B);
    border-radius: 0 0 15px 15px;
}

.choices__inner {
    border-color: var(--color-additional-2, #4FD88B);
    background-color: var(--color-neutral-8, #FFFFFF);
    border-radius: 15px;
    font-size: 1rem;
    min-height: 40px;
}

.choices[data-type*=select-one] .choices__inner {
    padding: 3px 0 3px 12px !important;
}

.is-focused .choices__inner,.is-open .choices__inner {
    border-color: var(--color-additional-2, #4FD88B);
}

.is-open .choices__inner {
    border-radius: 15px 15px 0 0;
}

.is-flipped.is-open .choices__inner {
    border-radius: 0 0 15px 15px;
}

.is-open .choices__list--dropdown,.is-open .choices__list[aria-expanded] {
    border-color: var(--color-additional-2, #4FD88B);
}

.choices__list--dropdown .choices__item,.choices__list[aria-expanded] .choices__item {
    font-size: 1rem;
    padding: 1rem;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: var(--color-additional-3, #7EE69F);
}

/* INDICATOR */

.htmx-indicator {
    position: absolute;
    z-index: 1000;
    inset: -1px;
    border-radius: 0 0 15px 15px;
    backdrop-filter: blur(4px);
    background: rgba(255, 255, 255, 0.7);
    display: grid;
    place-items: center;
    min-height: 265px;
    transition: opacity 150ms ease-out;

    opacity: 1;
    @starting-style {
        opacity: 0;
    }

}

.htmx-indicator img {
    display: inline-block;
    height: 100px;
    width: 100px;
    animation: pulse 1s ease-in-out infinite alternate;
}

@keyframes pulse {
    0% {
        scale: 1;
    }
    100% {
        scale: 1.2;
    }
}

.tssFrame {
    width: 100%;
    min-height: 100%;
    border: none;
}

@media screen and (max-width: 850px) {
    .tssFrame {
        min-height: 560px;
    }
}

.labeledDescription {
    display: block;
    text-align: center;
    margin-block-end: 1rem;
}

/* PAYMENT POPUP */

.paymentPopup__inetContainer {
    display: grid;
    gap: 1rem;
    grid-template-columns: 150px minmax(150px, 1fr) min-content;
    align-items: center;
    justify-items: center;
}

.paymentPopup__inetContainerItem--slider {
    display: flex;
    gap: 4px;
    justify-content: space-between;
    align-items: center;
}

.paymentSlider__nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    position: relative;
}

.paymentSlider__nav::before {
    content: '';
    position: absolute;
    display: block;
    width: 2px;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    height: 95%;
    background-color: var(--color-primary-2, #14A855);
    z-index: -1;
}

.paymentSlider__pagination {
    transform: none !important;
    width: initial !important;
    height: auto !important;
    font-size: 1rem !important;
    display: flex;
    flex-direction: column;
    column-gap: 0.5rem;
}

.paymentSlider_bullet {
    justify-content: space-between;
    cursor: pointer;
    align-items: center;
    column-gap: 8px;
    display: none;
}

.paymentSlider_bullet--active,
.paymentSlider_bullet--active + .paymentSlider_bullet,
.paymentSlider_bullet:has(+ .paymentSlider_bullet--active) {
    display: flex; /* show active, previous and next */
}

.paymentSlider__bulletCircle {
    display: inline-block;
    position: relative;
    background-color: #fff;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--color-primary-2, #14A855)
}

.paymentSlider_bullet--active .paymentSlider__bulletCircle::after {
    content: '';
    display: block;
    position: absolute;
    border-radius: 50%;
    inset: 2px;
    background-color: var(--color-primary-2, #14A855)
}

.paymentSlider__prev, .paymentSlider__next {
    width: 14px;
}

.paymentSlider__prev img, .paymentSlider__next img {
    width: 100%;
    filter: brightness(0) saturate(100%)invert(68%) sepia(68%) saturate(6085%) hue-rotate(116deg) brightness(92%) contrast(84%);
    height: auto;
}

.paymentSlider__slide img {
    scale: 0.7;
    filter: grayscale(1);
    border: 1px solid var(--color-neutral-6, #F3F3F3);
    border-radius: 50px;
    background-color: var(--color-neutral-6, #F3F3F3);
    transition: all 300ms;

    display: block;
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center;
}

.paymentSlider__slide.swiper-slide-active img {
    scale: 1;
    filter: none;
    border: 1px solid #14A855;
    background-color: var(--color-neutral-8, #FFFFFF);
}

@media screen and (max-width: 680px) {
    .paymentPopup__inetContainer {
        gap: 1.5rem;
        grid-template-columns: 1fr;
    }

    .paymentPopup__inetContainerItem.paymentField {
        justify-self: stretch;
    }
}

.portmoneSuccessPopUp {
    width: clamp(260px, 36ch, 70vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.portmoneSuccessPopUp__header {
    margin: 0.5rem;
    font: var(--font-biggest);
}

.portmoneCardsWrapper {
    opacity: 1;
    transition-behavior: allow-discrete;
    transition-property: display, opacity;
    transition-delay: 200ms;
    transition-duration: 600ms;
    transition-timing-function: ease-out;
    @starting-style {
        opacity: 0;
    }
}

.portmoneCards {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.portmoneCards__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.portmoneCards__cardList {
    display: flex;
    flex-direction: column;
    gap: 0.725rem;
}

.portmoneCards__cardItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    border-radius: 100px;
    border: 2px solid var(--color-neutral-3, #8E8F90);
    transition: border-color 200ms;
}

.portmoneCards__cardItem:has([name="CardGroup"]:checked), .portmoneCards__cardItem:has([name="tokenId"]:checked) {
    border-color: var(--color-primary-2, #14A855);
}

.portmoneCards__cardLabel {
    flex-grow: 1;
    padding: 0.5rem 1.5rem;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.portmoneCards__cardLabel:has( + [disabled]) {
    cursor: not-allowed;
}

.portmoneCards__cardDelete {
    margin-inline: 1rem;
}

.portmoneLink {
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

@media screen and (max-width: 680px) {
    .portmoneLink {
        font: var(--font-smallest);
    }
}

/* PAYMENT INPUT */
.paymentField, .accountMainBlock__inputWrapper {
    flex: 0 0 150px;
    position: relative;
}

.paymentField::after, .accountMainBlock__inputWrapper::after {
    content: 'грн';
    font-weight: 700;
    position: absolute;
    display: flex;
    right: 0;
    top: 0;
    height: calc(100% - 1px);
    background-color: var(--color-neutral-8, #FFFFFF);
    align-items: center;
    justify-content: flex-end;
}

.paymentField__input, .accountMainBlock__inputWrapper input {
    padding-right: 3ch !important;
    width: 100%;
    color: var(--color-primary-2, #14A855) !important;
    font: var(--font-big) !important;
}

@container content-cell (max-width: 385px) {
    .paymentField {
        flex: 1 0 100%;
    }
}


/* SPECIAL OFFERS */
.specialOffers__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.specialOffers__cell, .specialOffersSlider__cell {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    transition: opacity 600ms ease-in-out;
}

@starting-style {
    .specialOffers__cell {
        opacity: 0;
    }
}


.specialOffers__link, .specialOffersSlider__link {
    display: block;
}

.specialOffers__image, .specialOffersSlider__image {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 15px;
    box-shadow: var(--box-shadow-card);
}

.specialOffers__image--bestPrice::after, .specialOffersSlider__image--bestPrice::after {
    content: 'Найкраща ціна';
    display: block;
    position: absolute;
    left: 0;
    top: 1rem;
    padding: 4px 8px;
    background-color: var(--color-primary-1, #FF6D00);
    font: var(--font-small);
    font-weight: 800;
    color: var(--color-neutral-8, #FFFFFF);
    text-align: center;

}

.specialOffers__header, .specialOffersSlider__header {
    margin: 0;
    margin-top: 0.5rem;
    font: var(--font-default);
    font-weight: 700;
}

.specialOffers__prices, .specialOffersSlider__prices {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
    padding-inline-end: 2rem;
}

.specialOffers__prices > :first-child, .specialOffersSlider__prices > :first-child {
    color: var(--color-primary-1, #FF6D00);
    font: var(--font-big);
}

.specialOffers__prices > :nth-child(2), .specialOffersSlider > :nth-child(2) {
    color: var(--color-neutral-3, #8E8F90);
    text-decoration: line-through;
    font-weight: 700;

}

.specialOffersSlider {
    display: none;
}

@container content-cell (max-width: 516px) {
    .specialOffers:not(.specialOffers--offersPage) {
        display: none;
    }

    .specialOffersSlider {
        display: block;
    }
}

/* RESTORE POPUP */
.restoreInfoContainer {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.restoreInfoContainer__header {
    font: var(--font-biggest);
    margin-block: 0 0.5rem;
}

.restoreInfoContainer__services {
    border-radius: 15px;
    box-shadow: var(--box-shadow-card);
}

.restoreInfoContainer__servicesTitle {
    font-weight: 700;
    border-bottom: 1px solid var(--color-neutral-4, #C7C7C7);
    padding: 1rem 1.5rem 0.5rem;
}

.restoreInfoContainer__servicesItem {
    padding: 0.5rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.restoreInfoContainer__servicesPrice {
    white-space: nowrap;
}

.qrSelect {
    flex-wrap: wrap;
}

.qrSelect__qr {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    width: 150px;
}

.qrSelect__caption {
    text-align: center;
    font-weight: 700;
    max-width: 15rem;
}

.qrSelect__caption--normal {
    font-weight: 600;
}