:root {
    --bs-primary-bg: #07306e;
    --bs-secondary-bg: #3e8cff;
    --bs-primary-text: #0a58ca;
    --bs-secondary-text: #6c757d;
    --bs-success-text: #146c43;
    --bs-info-text: #087990;
    --bs-warning-text: #997404;
    --bs-danger-text: #b02a37;
    --bs-light-text: #6c757d;
    --bs-dark-text: #495057;
    --bs-primary-bg-subtle: #cfe2ff;
    --bs-secondary-bg-subtle: #f8f9fa;
    --bs-success-bg-subtle: #d1e7dd;
    --bs-info-bg-subtle: #cff4fc;
    --bs-warning-bg-subtle: #fff3cd;
    --bs-danger-bg-subtle: #f8d7da;
    --bs-light-bg-subtle: #fcfcfd;
    --bs-dark-bg-subtle: #ced4da;
    --bs-primary-border-subtle: #9ec5fe;
    --bs-secondary-border-subtle: #e9ecef;
    --bs-success-border-subtle: #a3cfbb;
    --bs-info-border-subtle: #9eeaf9;
    --bs-warning-border-subtle: #ffe69c;
    --bs-danger-border-subtle: #f1aeb5;
    --bs-light-border-subtle: #e9ecef;
    --bs-dark-border-subtle: #adb5bd;
    --bs-footer-bg: #1853B1;

    --primary-color: #007bff;
    /* Ярко-синий для акцентов, "Зарегистрироваться" */
    --secondary-color: #6c757d;
    /* Серый для второстепенных элементов, "Отписаться" */
    --success-color: #28a745;
    /* Зеленый для успешных действий, если нужно */
    --text-color: #343a40;
    --light-text-color: #6c757d;
    --background-color: #f8f9fa;
    --card-background: #ffffff;
    --border-color: #e9ecef;
    --shadow-light: rgba(0, 0, 0, 0.08);
    --shadow-strong: rgba(0, 123, 255, 0.4);
    /* Более выраженная тень для привлекающей кнопки */
    --font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --border-radius: 8px;
    --padding-sm: 15px;
    --padding-md: 20px;
    --padding-lg: 30px;
}

html {
    box-sizing: border-box;

    height: 100%;
    line-height: 1.5;
    /* 1 */
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    /*-webkit-text-size-adjust: 100%; /* 2 */
}

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

body {
    font-size: 1.2rem;
    font-family: "Open Sans", "Roboto", Arial, Helvetica, Verdana, sans-serif;
    color: #555;
    min-width: 320px;
    min-height: 100%;
    overflow-anchor: none;
    position: relative;
    display: flex;
    flex-direction: column;
}

body.lock {
    overflow: hidden;
}

main {
    flex: 1;
}

figure {
    margin: 0;
}

img {
    max-width: 100% !important;
    height: auto !important;
    border: none;
}

a {
    outline: 0;
}


/* Text */


@media only screen and (min-width: 0) {
    html {
        font-size: 14px;
    }
}

@media only screen and (min-width: 992px) {
    html {
        font-size: 14.5px;
    }
}

@media only screen and (min-width: 1200px) {
    html {
        font-size: 15px;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
    line-height: 1.3;
    overflow-wrap: break-word;
    hyphens: auto;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    font-weight: inherit;
}

h1 {
    font-size: 4rem;
    line-height: 110%;
    margin: 2.8rem 0 1.68rem 0;
}

h2 {
    font-size: 3rem;
    line-height: 110%;
    margin: 2.3733333333rem 0 1.424rem 0;
}

h3 {
    font-size: 2.5rem;
    line-height: 110%;
    margin: 1.9466666667rem 0 1.168rem 0;
}

h4 {
    font-size: 2.28rem;
    line-height: 110%;
    margin: 1.52rem 0 0.912rem 0;
}

h5 {
    font-size: 1.64rem;
    line-height: 110%;
    margin: 1.0933333333rem 0 0.656rem 0;
}

h6 {
    font-size: 1.15rem;
    line-height: 110%;
    margin: 0.7666666667rem 0 0.46rem 0;
}

@media screen and (max-width: 719px) {
    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2.5rem;
    }

    h3 {
        font-size: 2rem;
    }
}

@media screen and (max-width: 450px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.5rem;
    }
}

em {
    font-style: italic;
}

strong {
    font-weight: 500;
}

small {
    font-size: 75%;
}

.light {
    font-weight: 300;
}

.thin {
    font-weight: 200;
}

@media only screen and (min-width: 360px) {

    .flow-text,
    .page p,
    .page ul {
        font-size: 1.2rem;
    }
}

@media only screen and (min-width: 390px) {

    .flow-text,
    .page p,
    .page ul {
        font-size: 1.224rem;
    }
}

@media only screen and (min-width: 420px) {

    .flow-text,
    .page p,
    .page ul {
        font-size: 1.248rem;
    }
}

@media only screen and (min-width: 450px) {

    .flow-text,
    .page p,
    .page ul {
        font-size: 1.272rem;
    }
}

@media only screen and (min-width: 480px) {

    .flow-text,
    .page p,
    .page ul {
        font-size: 1.296rem;
    }
}

@media only screen and (min-width: 510px) {

    .flow-text,
    .page p,
    .page ul {
        font-size: 1.32rem;
    }
}

@media only screen and (min-width: 540px) {

    .flow-text,
    .page p,
    .page ul {
        font-size: 1.344rem;
    }
}

@media only screen and (min-width: 570px) {

    .flow-text,
    .page p,
    .page ul {
        font-size: 1.368rem;
    }
}

@media only screen and (min-width: 600px) {

    .flow-text,
    .page p,
    .page ul {
        font-size: 1.392rem;
    }
}

@media only screen and (min-width: 630px) {

    .flow-text,
    .page p,
    .page ul {
        font-size: 1.416rem;
    }
}

@media only screen and (min-width: 660px) {

    .flow-text,
    .page p,
    .page ul {
        font-size: 1.44rem;
    }
}

@media only screen and (min-width: 690px) {

    .flow-text,
    .page p,
    .page ul {
        font-size: 1.464rem;
    }
}

@media only screen and (min-width: 720px) {

    .flow-text,
    .page p,
    .page ul {
        font-size: 1.488rem;
    }
}

@media only screen and (min-width: 750px) {

    .flow-text,
    .page p,
    .page ul {
        font-size: 1.512rem;
    }
}

@media only screen and (min-width: 780px) {

    .flow-text,
    .page p,
    .page ul {
        font-size: 1.536rem;
    }
}

@media only screen and (min-width: 810px) {

    .flow-text,
    .page p,
    .page ul {
        font-size: 1.56rem;
    }
}

@media only screen and (min-width: 840px) {

    .flow-text,
    .page p,
    .page ul {
        font-size: 1.584rem;
    }
}

@media only screen and (min-width: 870px) {

    .flow-text,
    .page p,
    .page ul {
        font-size: 1.608rem;
    }
}

@media only screen and (min-width: 900px) {

    .flow-text,
    .page p,
    .page ul {
        font-size: 1.632rem;
    }
}

@media only screen and (min-width: 930px) {

    .flow-text,
    .page p,
    .page ul {
        font-size: 1.656rem;
    }
}

@media only screen and (min-width: 960px) {

    .flow-text,
    .page p,
    .page ul {
        font-size: 1.68rem;
    }
}

@media only screen and (max-width: 360px) {

    .flow-text,
    .page p,
    .page ul {
        font-size: 1.2rem;
    }
}

/* end Text */

/* Предупреждения*/

.alert {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 200px;
    max-width: 100%;
    min-height: 100px;
    padding: 10px;
    border: 4px solid #666;
    border-radius: 30px;
    text-align: center;
    background-color: #fff;
    box-shadow: 2px 2px 4px #888;
    z-index: 9999;
}


.notice {
    --bs-alert-bg: transparent;
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: 1rem;
    --bs-alert-margin-bottom: 1rem;
    --bs-alert-color: inherit;
    --bs-alert-border-color: transparent;
    --bs-alert-border: var(--bs-border-width) solid var(--bs-alert-border-color);
    --bs-alert-border-radius: 0.375rem;
    --bs-alert-link-color: inherit;
    position: relative;
    padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
    margin-bottom: var(--bs-alert-margin-bottom);
    color: var(--bs-alert-color);
    background-color: var(--bs-alert-bg);
    border: var(--bs-alert-border);
    border-radius: var(--bs-alert-border-radius);
}

.notice-heading {
    color: inherit;
}

.notice-link {
    font-weight: 700;
    color: var(--bs-alert-link-color);
}

.notice-dismissible {
    padding-right: 3rem;
}

.notice-dismissible .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 1.25rem 1rem;
}

.notice-primary {
    --bs-alert-color: var(--bs-primary-text);
    --bs-alert-bg: var(--bs-primary-bg-subtle);
    --bs-alert-border-color: var(--bs-primary-border-subtle);
    --bs-alert-link-color: var(--bs-primary-text);
}

.notice-secondary {
    --bs-alert-color: var(--bs-secondary-text);
    --bs-alert-bg: var(--bs-secondary-bg-subtle);
    --bs-alert-border-color: var(--bs-secondary-border-subtle);
    --bs-alert-link-color: var(--bs-secondary-text);
}

.notice-success {
    --bs-alert-color: var(--bs-success-text);
    --bs-alert-bg: var(--bs-success-bg-subtle);
    --bs-alert-border-color: var(--bs-success-border-subtle);
    --bs-alert-link-color: var(--bs-success-text);
}

.notice-info {
    --bs-alert-color: var(--bs-info-text);
    --bs-alert-bg: var(--bs-info-bg-subtle);
    --bs-alert-border-color: var(--bs-info-border-subtle);
    --bs-alert-link-color: var(--bs-info-text);
}

.notice-warning {
    --bs-alert-color: var(--bs-warning-text);
    --bs-alert-bg: var(--bs-warning-bg-subtle);
    --bs-alert-border-color: var(--bs-warning-border-subtle);
    --bs-alert-link-color: var(--bs-warning-text);
}

.notice-danger,
.notice-error {
    --bs-alert-color: var(--bs-danger-text);
    --bs-alert-bg: var(--bs-danger-bg-subtle);
    --bs-alert-border-color: var(--bs-danger-border-subtle);
    --bs-alert-link-color: var(--bs-danger-text);
}

.notice-light {
    --bs-alert-color: var(--bs-light-text);
    --bs-alert-bg: var(--bs-light-bg-subtle);
    --bs-alert-border-color: var(--bs-light-border-subtle);
    --bs-alert-link-color: var(--bs-light-text);
}

.notice-dark {
    --bs-alert-color: var(--bs-dark-text);
    --bs-alert-bg: var(--bs-dark-bg-subtle);
    --bs-alert-border-color: var(--bs-dark-border-subtle);
    --bs-alert-link-color: var(--bs-dark-text);
}


/* box Блок с собственным заголовком и телом */
.notice.error {
    background: var(--bs-danger-bg-subtle);
    padding: 0.2rem 0.5rem;
    border-radius: 0.5rem;
    color: var(--bs-danger-text);
    border: 1px solid var(--bs-danger-border-subtle)
}

.notice p {
    margin: 5px 0;
}

/*end Предупреждения*/

main a {
    color: #2196f3;
    text-decoration: none;
    transition: color 0.3s ease;
}

main a:hover {
    color: #014c8c;

}

/* Сетка */
/* Контейнер */
.container {
    width: 100%;
    max-width: 1280px;
    /* Или 1280px, если нужно больше */
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
}

/* Строки */
.container>.row {
    margin-left: -15px;
    margin-right: -15px;
}

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

/* Колонки */
[class*="col-"] {
    padding: 0 15px;
    box-sizing: border-box;
}

/* 🔹 Всегда — базовая колонка (mobile first) */
[class*="col-"] {
    flex: 0 0 auto;
    width: 100%;
}

/* 🔸 Base (xs) — Мобильные по умолчанию */
.col-1 {
    flex: 0 0 8.33%;
    max-width: 8.33%;
}

.col-2 {
    flex: 0 0 16.66%;
    max-width: 16.66%;
}

.col-3 {
    flex: 0 0 25%;
    max-width: 25%;
}

.col-4 {
    flex: 0 0 33.33%;
    max-width: 33.33%;
}

.col-5 {
    flex: 0 0 41.66%;
    max-width: 41.66%;
}

.col-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.col-7 {
    flex: 0 0 58.33%;
    max-width: 58.33%;
}

.col-8 {
    flex: 0 0 66.66%;
    max-width: 66.66%;
}

.col-9 {
    flex: 0 0 75%;
    max-width: 75%;
}

.col-10 {
    flex: 0 0 83.33%;
    max-width: 83.33%;
}

.col-11 {
    flex: 0 0 91.66%;
    max-width: 91.66%;
}

.col-12 {
    flex: 0 0 100%;
    max-width: 100%;
}



/* 🔹 Small (sm) — от 576px и выше */
@media (min-width: 576px) {
    .col-sm-1 {
        flex: 0 0 8.33%;
        max-width: 8.33%;
    }

    .col-sm-2 {
        flex: 0 0 16.66%;
        max-width: 16.66%;
    }

    .col-sm-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-sm-4 {
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }

    .col-sm-5 {
        flex: 0 0 41.66%;
        max-width: 41.66%;
    }

    .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-sm-7 {
        flex: 0 0 58.33%;
        max-width: 58.33%;
    }

    .col-sm-8 {
        flex: 0 0 66.66%;
        max-width: 66.66%;
    }

    .col-sm-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-sm-10 {
        flex: 0 0 83.33%;
        max-width: 83.33%;
    }

    .col-sm-11 {
        flex: 0 0 91.66%;
        max-width: 91.66%;
    }

    .col-sm-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* 🔹 Medium (md) — от 768px и выше */
@media (min-width: 768px) {
    .col-md-1 {
        flex: 0 0 8.33%;
        max-width: 8.33%;
    }

    .col-md-2 {
        flex: 0 0 16.66%;
        max-width: 16.66%;
    }

    .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-md-4 {
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }

    .col-md-5 {
        flex: 0 0 41.66%;
        max-width: 41.66%;
    }

    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-md-7 {
        flex: 0 0 58.33%;
        max-width: 58.33%;
    }

    .col-md-8 {
        flex: 0 0 66.66%;
        max-width: 66.66%;
    }

    .col-md-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-md-10 {
        flex: 0 0 83.33%;
        max-width: 83.33%;
    }

    .col-md-11 {
        flex: 0 0 91.66%;
        max-width: 91.66%;
    }

    .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}



/* 🔹 Large (lg) — от 992px и выше */
@media (min-width: 992px) {
    .col-lg-1 {
        flex: 0 0 8.33%;
        max-width: 8.33%;
    }

    .col-lg-2 {
        flex: 0 0 16.66%;
        max-width: 16.66%;
    }

    .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-lg-4 {
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }

    .col-lg-5 {
        flex: 0 0 41.66%;
        max-width: 41.66%;
    }

    .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-lg-7 {
        flex: 0 0 58.33%;
        max-width: 58.33%;
    }

    .col-lg-8 {
        flex: 0 0 66.66%;
        max-width: 66.66%;
    }

    .col-lg-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-lg-10 {
        flex: 0 0 83.33%;
        max-width: 83.33%;
    }

    .col-lg-11 {
        flex: 0 0 91.66%;
        max-width: 91.66%;
    }

    .col-lg-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* 🔹 Extra Large (xl) — от 1200px и выше */
@media (min-width: 1200px) {
    .col-xl-1 {
        flex: 0 0 8.33%;
        max-width: 8.33%;
    }

    .col-xl-2 {
        flex: 0 0 16.66%;
        max-width: 16.66%;
    }

    .col-xl-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-xl-4 {
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }

    .col-xl-5 {
        flex: 0 0 41.66%;
        max-width: 41.66%;
    }

    .col-xl-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-xl-7 {
        flex: 0 0 58.33%;
        max-width: 58.33%;
    }

    .col-xl-8 {
        flex: 0 0 66.66%;
        max-width: 66.66%;
    }

    .col-xl-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-xl-10 {
        flex: 0 0 83.33%;
        max-width: 83.33%;
    }

    .col-xl-11 {
        flex: 0 0 91.66%;
        max-width: 91.66%;
    }

    .col-xl-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* 🔹 Extra Extra Large (xxl) — от 1400px и выше */
@media (min-width: 1400px) {
    .col-xxl-1 {
        flex: 0 0 8.33%;
        max-width: 8.33%;
    }

    .col-xxl-2 {
        flex: 0 0 16.66%;
        max-width: 16.66%;
    }

    .col-xxl-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-xxl-4 {
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }

    .col-xxl-5 {
        flex: 0 0 41.66%;
        max-width: 41.66%;
    }

    .col-xxl-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-xxl-7 {
        flex: 0 0 58.33%;
        max-width: 58.33%;
    }

    .col-xxl-8 {
        flex: 0 0 66.66%;
        max-width: 66.66%;
    }

    .col-xxl-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-xxl-10 {
        flex: 0 0 83.33%;
        max-width: 83.33%;
    }

    .col-xxl-11 {
        flex: 0 0 91.66%;
        max-width: 91.66%;
    }

    .col-xxl-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* end: Сетка */

/* Пагинация*/
.pagination {
    display: flex;
    padding: 0;
    list-style: none;
    gap: 2px;
    line-height: 1;
    margin: 20px 0 30px;
}

.pagination li a,
.pagination li span {
    display: block;
    padding: .5em 1em;
    border: 1px solid #dee2e6;
    border-radius: .2em;
    color: #007bff;
    text-decoration: none;
}

.pagination li.prev span,
.pagination li.next span {
    color: #999;
}

.pagination a:hover {
    color: #0056b3;
    text-decoration: none;
    background-color: #e9ecef;
    border-color: #dee2e6;
}

.pagination li.current a,
.pagination li.current span {
    background-color: #3898EC;
    border-color: #3898EC;
    color: #fff;
}

.pagination .separator span {
    color: #999;
    border-color: transparent;
}

/*Хлебные крошки*/
.breadcrumbs {
    margin-bottom: 20px;
}

.breadcrumbs h1 {
    margin: 0 0 10px;
}

.breadcrumbs ol {
    display: flex;
    box-sizing: content-box;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    list-style: none;
    background-color: #e5e6e6;
    border-radius: .25rem;
}

.breadcrumbs li+li {
    padding-left: .5rem;
    color: #6c757d;
}

.breadcrumbs li+li::before {
    display: inline-block;
    padding-right: .5rem;
    color: #6c757d;
    content: "/";
}

.breadcrumbs a {
    color: #007bff;
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: #0056b3;
    transition: all .2s ease-in-out;
}

/*end  Хлебнные крошки*/



/* button*/

.button {
    display: inline-flex;
    gap: 1em;
    padding: 20px 35px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 7px;
    font-size: 1.2rem;
    font-weight: 500;
    text-decoration: none;

    background-color: rgb(255, 255, 255);
    color: rgb(41, 41, 48);

    transition: background-color 200ms ease, color 200ms ease;

    border-style: solid;
    border-width: 2px;
}


.button-sm {
    padding: 10px 25px;
}

.button:hover {
    background-color: rgb(225, 220, 96);
}

.button-white {
    background-color: rgb(255, 255, 255);
    color: rgb(41, 41, 48);
}

.button-white:hover {
    background-color: rgb(225, 220, 96);
}


.button-yellow {
    border-color: #ffdc60;
    background-color: #ffdc60;
    color: #292930;
}

.button-yellow:hover {
    background-color: transparent;
    color: #ffdc60;
}

.button-blue {
    border-color: #3898EC;
    background-color: #3898EC;
    color: #fff;
    border: none;
}

.button-grey {
    background-color: #292930;
    color: #f6f6f6;
    border: none;
}

.button-grey:hover {
    background-color: #ffdc60;
    color: #292930;
}

.primary-button {
    border: none;
}

.button-small {
    background-color: #7066e0;
    cursor: pointer;
    display: inline-block;
    border: 0;
    border-radius: .25em;
    color: #fff;
    font-size: 1em;
    margin: .3125em;
    padding: .625em 1.1em;
    transition: box-shadow .1s;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0);
    font-weight: 500;
    text-decoration: none;
}

.button-small:hover {
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
}

.button-cancel {
    background-color: #6e7881;
    margin: 0;
}

.button:before {
    width: 1.6em;
    text-align: center;
    font-size: 1.5em;
    margin-left: -1em;

    box-shadow: 1px 0 0 rgba(0, 0, 0, .5), 2px 0 0 rgba(255, 255, 255, .5);
    border-radius: .15em 0 0 .15em;
    pointer-events: none;
    line-height: 1.2rem;
}

/* end: button */


/* Таблица */
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

caption {
    margin: 10px 0;
    text-align: left;
    font-weight: bold;
}

table tr {
    border-top: solid 1px #dddddd;
}

tr:nth-child(even) {
    background-color: #F5F7FA;
}

table tr:first-child {
    border-top: 0;
}

td,
th {
    padding: 0.5em .8em;
    text-align: left;
}

th {
    text-align: left;
    font-weight: 700;
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #E4E9F2;
}


thead {
    background-color: #E4E9F2;
    color: #555;
    font-weight: bold;
    border-bottom: solid 2px #dddddd;
}

/* end Таблица */
/*Элементы управления*/

/* Переключатель */
.toggle__label {
    position: relative;
}

.toggle__label input {
    position: absolute;
    z-index: -1;
    opacity: 0;
    margin: 4px 0 0 15px;
}

.toggle__label span {
    position: relative;
    padding: 0 0 0 45px;
    cursor: pointer;
}

.toggle__label span:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 42px;
    height: 18px;
    border-radius: 13px;
    background: #CDD1DA;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, .2);
    transition: .2s;
}

.toggle__label span:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
    transition: .2s;
}

.toggle__label input:checked+span:before {
    background: #9FD468;
}

.toggle__label input:checked+span:after {
    left: 26px;
}

.toggle__label input:focus+span:before {
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, .2), 0 0 0 3px rgba(255, 255, 0, .7);
}

.toggle__label input:disabled+span:before {
    background: #ccc;
}


/* Радио */
.radio__label input {
    position: absolute;
    z-index: -1;
    opacity: 0;
    margin: 10px 0 0 7px;
}

.radio__label span {
    position: relative;
    padding: 0 0 0 30px;
    cursor: pointer;
    display: inline-block;
    user-select: none;
}

.content .radio__label span {
    display: inline-block;
}

.radio__label span:before {
    content: '';
    position: absolute;
    top: -3px;
    left: 0;
    width: 22px;
    height: 22px;
    border: 1px solid #CDD1DA;
    border-radius: 50%;
    background: #FFF;
}

.radio__label span:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #9FD468;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5);
    opacity: 0;
    transition: .2s;
}

.radio__label input:checked+span:after {
    opacity: 1;
}

.radio__label input:focus+span:before {
    box-shadow: 0 0 0 3px rgba(255, 255, 0, .5);
}


/* Чекбокс */
.checkbox__label input {
    position: absolute;
    z-index: -1;
    opacity: 0;
    margin: 10px 0 0 7px;
}

.checkbox__label span {
    position: relative;
    padding: 0 0 0 30px;
    cursor: pointer;
    user-select: none;
}

.checkbox__label span:before {
    content: '';
    position: absolute;
    top: -3px;
    left: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #CDD1DA;
    background: #FFF;
}

.checkbox__label span:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 3px;
    width: 14px;
    height: 14px;
    background: #9FD468;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5);
    opacity: 0;
    transition: .2s;
}

.checkbox__label input:checked+span:after {
    opacity: 1;
}

.checkbox__label input:checked:focus+span:before {
    box-shadow: 0 0 0 3px rgba(255, 255, 0, .5);
}

/*end */


button,
input,
optgroup,
select,
textarea,
fieldset {
    padding: 0;
    margin: 0;
    border: 1px solid;
    border-radius: 0;
    box-shadow: none;
    background-color: #fff;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}

button {
    cursor: pointer;
}

.responsive {
    overflow-x: auto;
    scrollbar-width: thin;
}

.tab__content {
    display: none;
}

.tab__content.active {
    display: block;
}

.form-page {
    display: flex;
    padding-top: 45px;
    justify-content: center;
    align-items: center;
}

.form-default {
    display: flex;
    column-gap: 1.4rem;
    flex-wrap: wrap;
    flex: 1;
}

.form-default>.input-group {
    flex-basis: 100%;
}

.form {
    max-width: 556px;
    width: 100%;
    border: 1px solid #e1e1e1;
    border-radius: 24px;
    background-color: #fff;
    padding: 23px;
}

.form h1 {
    font-size: 23px;
    font-weight: 500;
    line-height: 1.3;
}

.form-header p {
    margin: 0;
}

.input-group {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 1.4rem;
    row-gap: 5px;
}

#formRegister .input-group {
    margin-top: 15px;
}

.input-group input,
.input-group select,
.input-group textarea {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #e1e1e1;
    transition: border-color .2s cubic-bezier(.4, 0, .2, 1);
    padding: 0.66rem 1rem;
}

.input-group input,
.input-group select {
    height: 3.2rem;
}

.input-group textarea {
    resize: vertical;
}


.required::after {
    content: "*";
    color: #ff6920;
}

.form-footer {
    display: flex;
    align-items: center;
    margin-top: 30px;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 15px;
}

.form-footer button {
    background-color: #f2f6fa;
    padding: 14px 18px;
    border-radius: 100px;
    transition: background-color .2s cubic-bezier(.4, 0, .2, 1), opacity .2s cubic-bezier(.4, 0, .2, 1);
    font-weight: 500;
    font-size: 14px;
    color: #0050a4;
    line-height: 1em;
    border: none;
}

.form-footer button:hover {
    background-color: #d6e5f3;
}

.content__caption {
    display: block;
}

.fake_link {
    cursor: pointer;
    color: #0a58ca;
    border-bottom: 1px #0a58ca dashed;
}

#formRegister,
#formRecover,
#profileEdit {
    display: flex;
    column-gap: 8px;
    flex-wrap: wrap;
}

#formRegister>*,
#formRecover>*,
#profileEdit>* {
    width: 100%;
}

.group-half {
    flex: 1 1 200px !important;
    min-width: 200px;
    align-content: end;
}


.group-third {
    flex: 1 1 150px !important;
    min-width: 150px;
    align-content: end;
}

/* radio*/

.radio__container label input[type="radio"]+span {
    background: transparent;

    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 35px;
    line-height: 35px;
    margin-bottom: 5px;
    padding: 0 6px;
    text-align: center;
    transition: 0.2s all ease-in-out;

    cursor: pointer;
    border: 1px solid #999;
    user-select: none;
    position: relative;
}

.radio__container input[type=radio] {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.radio__container input[type=radio]:checked+span {

    cursor: default;
    border-color: #8860D0;
}

.radio__container input[type=radio]+span:before {
    content: '';
    width: 20px;
    height: 20px;
    border: 1px solid #36275d;
    border-radius: 10px;
    background: #fff;
}

.radio__container input[type=radio]:checked+span:before {
    background: #8860D0;
    animation: 1.0s cubic-bezier(.15, 1, .30, 1) square-in-center both;
}

.radio__container input:focus+span:before {
    box-shadow: 0 0 0 3px rgba(255, 255, 0, .5);
}

@keyframes square-in-center {
    from {
        clip-path: circle(0%);
    }

    to {
        clip-path: circle(100%);
    }

}

.group__head {
    display: block;
    margin-bottom: 5px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* start: Menu */

.header-menu {
    background-color: #6D9BE6;
    color: #fff;
    transition: width 0.5s cubic-bezier(0.15, 0.99, 0.18, 1.01);
    z-index: 1000;
}

.header-menu nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1280px;
    padding: 0 15px;
}

menu button:focus-visible,
menu a:focus-visible {
    outline: 2px solid;
    outline-offset: -3px;
}



.menu {
    display: flex;
    min-width: max-content;
    color: #000000;
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 99;
}

.menu-submenu {
    background: #6D9BE6;

}

.menu__btn,
.menu__link {
    display: flex;
    width: 100%;
    gap: .5em;
    align-items: center;
    padding: 0.8rem 1rem;
    font-weight: 300;
    font-family: inherit;
    color: #fff;
    cursor: pointer;
    border: none;
    background: transparent;
    justify-content: start;
    transition: background-color 0.2s linear;
    border-radius: 0;
}

.menu__link:hover,
.menu__btn:hover,
.menu__btn[aria-expanded="true"] {
    background-color: #576da6;
    color: #fff;
}

.menu-submenu .menu__link:hover,
.menu-submenu .menu__btn:hover,
.menu-submenu .menu__btn[aria-expanded="true"] {
    background-color: #576da6;
}

.menu-submenu .menu__link:focus-visible,
.menu-submenu .menu__btn:focus-visible {
    outline-width: 2px;
    outline-offset: -3px;
    outline-style: solid;
    outline-color: #000000;
}

.menu__btn-icon {
    color: inherit;
    transition: transform .1s linear;
}

.menu-submenu .menu__btn-icon {
    transform: rotate(-90deg);
}

.menu__btn[aria-expanded="true"] .menu__btn-icon {
    transform: rotate(180deg);
}

.menu-submenu .menu__btn[aria-expanded="true"] .menu__btn-icon {
    transform: rotate(90deg);
}

.menu__item {
    position: relative;
}

.menu__link {
    text-decoration: none;
}

a[aria-current="page"] {
    font-weight: 500;
    color: #fff;
}

/* Вложенное меню */
.menu .menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-inline-start: 1.334rem;
}

/* Первый уровень вложенности */
.enhanced .menu .menu {
    position: absolute;
    top: 110%;
    left: 0;
    padding-inline-start: 0;
}

/* Второй уровень вложенности */
.enhanced .menu .menu .menu {
    top: 0;
    left: 104%;
}

.menu[hidden] {
    display: none;
}

.main {
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
    padding: 50px calc(50px + 1rem);
}


.main a {
    border-radius: 3px;
    color: inherit;
    -webkit-text-decoration-color: #C56FFF;
    text-decoration-color: #C56FFF;
    text-decoration-thickness: 2px;
    transition: background-color 0.2s linear;
}

.main a:hover,
.main a:focus {
    color: #000000;
    background-color: #C56FFF;
    transition: background-color 0.2s linear;
    outline-width: 0;
}



.header-menu.animate {
    position: fixed;
    left: 0;
    right: 0;
    width: auto;
    top: 54px;
    bottom: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.animate nav {
    width: auto;
}



.membership-link {
    text-decoration: none;
    color: #0050a4;
    background-color: #d6e5f3;
    border-radius: 100px;
    border: none;
    padding: 6px 15px;
}


.header-menu .button:hover {
    background-color: #fff;
}


.header-menu .menu:first-child>li>.menu__btn,
.header-menu .menu:first-child>li>.menu__link {
    padding: 1rem;
    height: 100%;
}


.menu-link {
    background: #fff;
    color: #ccc;
    display: none;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 50px;
    height: 44px;
    font-size: 0;
    text-indent: -9999px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
    border: none;
    border-radius: none;
    cursor: pointer;
    transition: background 0.3s;
}

.menu-link:focus,
.menu-link:hover {
    outline: none;
    background: #fff;
}

.menu-link span {
    display: block;
    position: absolute;
    top: 20px;
    left: 10px;
    right: 10px;
    height: 4px;
    background: #28aadc;
    transition: background 0s 0.3s;
}

.menu-link span::before,
.menu-link span::after {
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #28aadc;
    content: "";
    transition-duration: 0.3s, 0.3s;
    transition-delay: 0.3s, 0s;
}

.menu-link span::before {
    top: -8px;
    transition-property: top, \transform;
}

.menu-link span::after {
    bottom: -8px;
    transition-property: bottom, \transform;
}

.menu-link.is-active span {
    background: none;
}

.menu-link.is-active span::before,
.menu-link.is-active span::after {
    background-color: #135772;
    transition-delay: 0s, 0.3s;
}

.menu-link.is-active span::before {
    top: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.menu-link.is-active span::after {
    bottom: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.profile-link {
    background-color: #292930;
    color: #f6f6f6;
    border: none;
    padding: 10px 25px;
    transition: background-color 200ms ease, color 200ms ease;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 7px;
    font-size: 1.2rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    gap: 1em;
}

.profile-link::before {
    width: 1.6em;
    text-align: center;
    font-size: 1.5em;
    margin-left: -1em;
    box-shadow: 1px 0 0 rgba(0, 0, 0, .5), 2px 0 0 rgba(255, 255, 255, .5);
    border-radius: .15em 0 0 .15em;
    pointer-events: none;
    line-height: 1.2rem;
}

.logout-button {
    background-color: #c3c3c3;
    color: #292930;
    border: none;
    padding: 10px;
    transition: background-color 200ms ease, color 200ms ease;
    justify-content: center;
    align-items: center;
    border-radius: 7px;
    font-size: 1rem;
    font-weight: 500;
}

@media all and (max-width: 768px) {
    .profile-link {
        font-size: 0;
        /* Скрывает текст, но не ломает псевдоэлемент */
        padding: 10px;
        /* Чтобы кнопка осталась компактной */
        gap: 0;
    }

    .profile-link::before {
        font-size: 1.5em;
        /* Возвращаем размер иконки */
        margin-left: 0;
        font-size: 1.2rem;
        box-shadow: none;
        /* Убираем разделитель, если нужно */
    }

    .logout-button {
        font-size: 0;
    }

    .logout-button::before {
        font-size: 1.2rem;
        margin-right: 0 !important;
    }

    .header-menu {
        position: fixed;
        top: 54px;
        left: 0;
        width: 100%;
        height: 100%;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
    }

    .menu-link {
        display: block;
    }

    .header-menu.animate {
        transform: translateX(0);
    }

    .header {
        padding: 0;
    }

    .header-menu nav {
        width: 100%;
        padding: 0;
    }

    .menu {
        display: flex;
        flex-direction: column;
        width: 100%;
        column-gap: 16px;
        border-bottom: 1px solid #ccc;
    }

    .menu__btn {
        width: 100%;
        justify-content: space-between;
    }

    .menu-submenu .menu__btn-icon {
        transform: initial;
    }

    .menu-submenu .menu__btn[aria-expanded="true"] .menu__btn-icon {
        transform: rotate(180deg);
    }

    /* Первый уровень вложенности */
    .enhanced .menu .menu,
    .enhanced .menu .menu .menu {
        position: relative;
        top: 0;
        left: 0;

    }

    .enhanced .menu .menu .menu__link,
    .enhanced .menu .menu .menu__btn {
        padding-left: 1.5em;
    }

    .enhanced .menu .menu .menu .menu__link,
    .enhanced .menu .menu .menu .menu__btn {
        padding-left: 2em;
    }


    .main {
        padding: 50px 1rem;
    }

    .membership-link {
        margin: 1rem;
    }
}

/* end: Menu*/



/* Галерея */
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 30px;
}

.gallery-item {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.gallery-item:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.gallery-item a {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Ковер альбома */
.gallery-cover img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-cover img {
    transform: scale(1.1);
}

/* Информация об альбоме */

/* Информация об альбоме */
.gallery-info {
    padding: 15px;
}


/* Стили для количества фото и даты */
.gallery-info p {
    margin: 5px 0;
    color: #666;
    display: flex;
    align-items: center;
    gap: 8px;
}


.gallery-info .date {
    font-size: 0.9rem;
    color: #999;
    font-style: italic;
}


.gallery-info h3 {
    margin: 0 0 10px;
    font-size: 1.5rem;
    color: #333;
}

/* Кнопка */
.gallery-action {
    text-align: center;
    margin-bottom: 15px;
}

.gallery-action button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.gallery-action button:hover {
    background-color: #0056b3;
}

/* Адаптивность */
@media (max-width: 1200px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 800px) {
    .gallery {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* ALBUM */

.album-details {
    display: grid;
    grid-template-columns: minmax(400px, 705px) minmax(300px, 500px);
    gap: 3rem;
    align-items: start;
}

.album-info {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    order: 1;

}

@media all and (max-width: 768px) {
    .album-details {
        grid-template-columns: 1fr;
    }

    .album-info {
        order: 0;
    }
}


.album-info h1 {
    font-size: 2rem;
    margin: 0 0 1rem;
}

.album-info p {
    margin: 10px 0;
    font-size: 16px;
    color: #555;
}

.album-images {
    column-count: 3;
    column-gap: 1rem;
    padding: 0;
}

.album-images a {
    break-inside: avoid;
}

.album-images img {
    width: 100%;
    margin-bottom: 1em;
    object-fit: cover;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.album-images img:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}


@media(max-width: 600px) {
    .album-images {
        column-count: 2;
    }
}

@media(max-width: 400px) {
    .album-images {
        column-count: 1;
    }
}


/* comments */
/* Основные стили контейнера */

.comments {
    margin: 40px 0 -70px;
    padding: 10px 0 30px;
    background-color: #e5e6e6;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.comment {
    margin: 10px 0 0;
    padding: 15px 0 0 15px;
    position: relative;
    /* делаем родительский элемент относительным */
    background-color: #fff;
    border-radius: 5px;
    border-bottom: 1px solid transparent;
}

.comment__children .comment {
    padding-bottom: 0;
}

.comment::before,
.comment::after {
    content: "";
    /* добавляем пустое содержимое */
    position: absolute;
    border: 1px solid #ccc;
    /* устанавливаем цвет и толщину границы */
}

.comment::before {
    top: -1px;
    /* сдвигаем вверх на 1 пиксель для создания обрезанного эффекта */
    left: -1px;
    /* сдвигаем влево на 1 пиксель для создания обрезанного эффекта */
    width: 100%;
    /* устанавливаем ширину на 100% + 2px для обрезания рамки */
    height: 1px;
    /* устанавливаем высоту рамки */
    border-bottom: 0;
}

.comment::after {
    top: -1px;
    /* сдвигаем вверх на 1 пиксель для создания обрезанного эффекта */
    left: -1px;
    /* сдвигаем влево на 1 пиксель для создания обрезанного эффекта */
    width: 1px;
    /* устанавливаем ширину рамки */
    height: 50px;
    /* устанавливаем высоту на 100% + 2px для обрезания рамки */
}


.comment__header {
    display: flex;
    column-gap: 15px;
    margin-bottom: 10px;
    align-items: center;
}

.comment__author {
    font-weight: bold;
}

.comment__date {
    font-size: 0.8em;
    color: #888;
    font-style: italic;
}

.comment__text {
    margin-bottom: 10px;
    padding-right: 10px;
    line-height: 1.5;
    color: #333;
}

.comment__footer {
    display: flex;
    margin-bottom: 15px;
}


.comment__footer .reply {

    color: #007bff;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s;
    border-bottom: 1px dashed;
}

.comment__footer .reply:hover {
    color: #0056b3;
}

.comment form {
    background: #f7f7f7;
    padding: 10px;
    border-radius: 0 0 5px 5px;
    margin-bottom: 15px;
}

/* Форма добавления комментария */
.comment_add {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.comment_add .textarea__container label {
    display: block;
    font-weight: bold;
    color: #333;
}

.comments textarea {
    width: 100%;
    height: 100px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical;
    font-weight: normal;
    margin-bottom: 20px;
}

.comment_add-footer {
    margin-bottom: 0;
}

.comment_add button {
    background: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

.comment_add button:hover {
    background: #0056b3;
}

/* Responsive для мобильных */
@media (max-width: 768px) {
    .comments .container {
        padding: 10px;
    }

    .comment {
        padding: 10px;
    }

    .comment_add textarea {
        height: 80px;
    }
}



/* Стили для кнопки "Пожаловаться" */
.comment__footer .report-comment {
    margin-left: 15px;
    /* Отступ от кнопки "Ответить" */
    color: #cc0000;
    /* Красный цвет, чтобы выделить */
    text-decoration: none;
    font-size: 0.9em;
    transition: color 0.2s ease-in-out;
}

.comment__footer .report-comment:hover {
    color: #ff3333;
    /* Более яркий красный при наведении */
    text-decoration: underline;
}

/* Общие стили для модального окна */
.modal {
    display: none;
    /* Скрыто по умолчанию */
    position: fixed;
    /* Оставаться на месте, когда прокручивается страница */
    z-index: 1000;
    /* Поверх всего */
    left: 0;
    top: 0;
    width: 100%;
    /* Полная ширина */
    height: 100%;
    /* Полная высота */
    overflow: auto;
    /* Включить прокрутку, если содержимое слишком большое */
    background-color: rgba(0, 0, 0, 0.4);
    /* Полупрозрачный черный фон */
    display: flex;
    /* Использовать flexbox для центрирования */
    align-items: center;
    /* Выравнивание по центру по вертикали */
    justify-content: center;
    /* Выравнивание по центру по горизонтали */
}

/* Содержимое модального окна */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    /* Автоматические отступы для центрирования (если не flexbox) */
    padding: 25px;
    border: 1px solid #888;
    width: 90%;
    /* Ширина модального окна */
    max-width: 500px;
    /* Максимальная ширина */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    animation: fadeIn 0.3s ease-out;
    /* Анимация появления */
}

/* Анимация появления модального окна */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Кнопка закрытия */
.close-button {
    color: #aaa;
    float: right;
    /* Разместить справа */
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    /* Абсолютное позиционирование внутри modal-content */
    top: 10px;
    right: 15px;
}

.close-button:hover,
.close-button:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* Заголовок модального окна */
.modal-content h4 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
    font-size: 1.5em;
    text-align: center;
}

/* Стили для формы внутри модального окна */
.modal-content .form-group {
    margin-bottom: 15px;
}

.modal-content label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.modal-content select,
.modal-content textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    /* Учитывает padding и border в общей ширине/высоте */
    font-size: 1em;
    color: #333;
}

.modal-content textarea {
    resize: vertical;
    /* Разрешить изменение размера только по вертикали */
    min-height: 80px;
}

.modal-content button.button-red {
    background-color: #dc3545;
    /* Красный цвет кнопки */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s ease-in-out;
    width: 100%;
    /* Ширина кнопки 100% */
}

.modal-content button.button-red:hover {
    background-color: #c82333;
    /* Темнее красный при наведении */
}

.modal-content button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

/* Добавляем скрытие для вспомогательного текста для скринридеров */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Стили для кнопки "Пожаловаться" (теперь это <button>) */
.comment__header .report-comment-btn {
    background: none;
    /* Убираем стандартный фон кнопки */
    border: none;
    /* Убираем рамку */
    color: #cc0000;
    /* Красный цвет */
    font-size: 1.2em;
    /* Размер иконки */
    cursor: pointer;
    padding: 0 5px;
    /* Небольшой внутренний отступ */
    /*margin-left: auto;  Сдвигает кнопку вправо, если она последняя в flex-контейнере */
    line-height: 1;
    /* Для лучшего выравнивания иконки */
    transition: color 0.2s ease-in-out;
}

.comment__header .report-comment-btn:hover {
    color: #ff3333;
    /* Более яркий красный при наведении */
}


/* comments */
/* ... ваши существующие стили comments ... */

/* === Стили для модерации комментариев === */

/* Общий стиль для всех модерированных комментариев (удаленных или скрытых) */
.comment--moderated {
    opacity: 0.6;
    /* Сделаем их немного прозрачными */
    background-color: #f8f8f8;
    /* Очень светлый серый фон */
    border-left: 3px solid #ccc;
    /* Серая левая граница для индикации */
    box-shadow: none;
    /* Убираем тень */
}

/* Изменения границ для модерированных комментариев */
.comment--moderated::before,
.comment--moderated::after {
    border-color: #e0e0e0;
    /* Более светлый цвет границ для модерированных */
}

/* Специальные стили для удаленных комментариев */
.comment--moderated.comment--deleted {
    border-left-color: #dc3545;
    /* Красная левая граница для удаленных */
    opacity: 0.5;
    /* Чуть сильнее прозрачность для "удаленных" */
}

/* Специальные стили для скрытых комментариев */
.comment--moderated.comment--hidden {
    border-left-color: #ffc107;
    /* Желтая левая граница для скрытых */
    opacity: 0.7;
    /* Менее прозрачные, чем удаленные, но все равно приглушенные */
}

/* Стили для текста сообщения внутри модерированного комментария */
.comment__message {
    font-style: italic;
    /* Курсив для системных сообщений */
    color: #666;
    /* Более тусклый цвет текста */
}

.comment__message--deleted {
    color: #dc3545;
    /* Красный текст для сообщения об удалении */
    font-weight: bold;
}

.comment__message--hidden {
    color: #ffc107;
    /* Оранжевый текст для сообщения о скрытии */
    font-weight: bold;
}

/* Стили для автора удаленного/скрытого комментария */
.comment__author--deleted {
    color: #dc3545;
    /* Красный для "Комментарий удален" */
    font-weight: bold;
}

.comment__author--hidden {
    color: #ffc107;
    /* Оранжевый для "Комментарий скрыт" */
    font-weight: bold;
}

/* Отключение курсора и ссылок для модерированного текста */
.comment--moderated .comment__text {
    cursor: default;
    pointer-events: none;
    /* Отключает события мыши для всего текста */
}

/* Кнопки и ссылки в удаленных/скрытых комментариях */
.comment--moderated .comment__footer .reply,
.comment--moderated .report-comment-btn {
    display: none;
    /* Скрываем кнопки "Ответить" и "Пожаловаться" для модерированных */
}

/* Опционально: если хотите, чтобы дети удаленных/скрытых комментариев были менее затронуты */
.comment--moderated>.comment__children {
    opacity: 1;
    /* Возвращаем непрозрачность для детей */
    border-left: none;
    /* Убираем левую границу, если она была унаследована */
    /* background-color: initial; */
    /* Возвращаем фон к исходному, если он был изменен */
}

/* end: comments */



#header .navbar {
    margin-left: auto;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.header__section {
    display: flex;
    align-items: center;
    min-height: 70px;
    gap: 20px;
}

#logo {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

#logo img {
    vertical-align: middle;
}

#logo .koar-logo {
    width: 173px;
}

#logo span {
    border-left: 2px solid #1853B1;
    border-right: 2px solid #1853B1;
    max-width: 358px;
    font-size: 16px;
    font-weight: 700;
    line-height: 28px;
    color: #1853B1;
    text-transform: uppercase;
    padding: 0 7px;
    align-items: center;
}

.tard-logo {
    width: 60px;
}

.wfsa-logo {
    width: 191px;
}

.twara-logo {
    width: 60px;
}

@media all and (max-width: 1160px) {
    #logo span {
        display: none;
    }
}

@media all and (max-width: 768px) {

    .header__section {
        min-height: 44px;
        padding-right: 5px;
    }

    #logo a {
        height: 27px;
    }

    #logo .koar-logo {
        width: 85px;
    }

    #logo span {
        display: none;
    }

    .tard-logo,
    .wfsa-logo,
    .twara-logo {
        display: none;
    }
}


.header__partners {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-grow: 1;
    padding: 0 20px;
}

.header__partners img {
    vertical-align: middle;
    min-width: 160px;
    max-width: 270px;
    height: auto;
}

.footer-partner {
    background: rgb(225, 225, 225);
    padding: 5px 10px 0;
    display: inline-block;
    border-radius: 10px;
}

@media all and (max-width: 840px) {
    .header__partners {
        display: none;
    }
}

/* Карточка профиля */
.profile-row {
    row-gap: 2rem;
}

.profile-box {
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Заголовок */
.profile-header {
    background: #62b6cb;
    /* Спокойный голубовато-бирюзовый */
    color: #fff;
    text-align: center;
    padding: 40px 20px;
}

/* Фото */
.profile-photo {
    margin: 0 auto;
    max-width: 508px;
}

.profile-photo img {
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Имя */
.profile-name {
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: 15px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.profile-name.profile-member::before {
    content: '';
    background-image: url('/favicon/favicon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 1.3em;
    height: 1.3em;
    flex-shrink: 0;
}

/* Контент */
.profile-body {
    padding: 20px 30px;
}

.user-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin-top: 0;
}

.user-info li {
    color: #333;
}

.user-info li::before {
    margin-right: 0.6rem;
}

.user-info span {
    font-weight: bold;
    margin-right: 0.5rem;
    font-size: 0.9em;
    color: #666;
}

.user-info a {
    color: #62b6cb;
    text-decoration: none;
}

.user-info a:hover {
    text-decoration: underline;
}

.profile-country {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #62b6cb, #1b4965);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: bold;
    margin-top: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    gap: 8px;
}

.profile-specialty {
    font-size: 1.07rem;
    color: #555;
    margin: 4px 0;
    font-weight: 500;
    text-align: center;
}

/* Контейнер для кнопок */
.profile-actions {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* Общий стиль кнопок */
.profile-actions .icon,
.profile-actions .open-profile-form {
    background: #0077b6;
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

.profile-actions .icon:hover,
.profile-actions .open-profile-form:hover {
    background: #005f86;
}

/**/
/* Фото профиля*/

.open-profile-form {
    color: #2196f3;
    cursor: pointer;
}

.open-profile-form:hover {
    color: #014c8c;
}

.upload-profile-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profile-photo h2 {
    font-size: 2rem;
    margin-top: 0;
}

.drag-container {
    overflow-wrap: break-word;
    width: 100%;
    max-width: 500px;
    border: 2px dashed #ccc;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    color: #999;
    margin-bottom: 20px;
    cursor: pointer;
    position: relative;
}

.drag-container.active {
    background-color: #dff0d8;
    border-color: #4caf50;
    color: #4caf50;
}

.image-container {
    max-width: 500px;
    min-width: 300px;
    max-height: 500px;
    min-height: 300px;
    border: 1px solid #ccc;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.image-container img {
    max-width: 100%;
    max-height: 100%;
    display: none;
}

.controls {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

#cropButton {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

#cropButton:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

#uploadImage {
    display: none;
}

/* Members*/
/* Сетка для участников */
.grid {
    display: grid;
    gap: 3rem 2rem;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 2rem;
    justify-content: center;
    /* Центрирует последние элементы */
}

/* Карточки участников */
.member {
    text-align: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.member img {
    width: 100%;
    max-width: 180px;
    height: auto;
    border-radius: 50%;
    margin-bottom: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.member figcaption {
    font-size: 0.9rem;
    color: #333;
    line-height: 1.4;
}



@media only screen and (max-width: 992px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* end: Members */

/* Contacts*/
.contacts {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
    margin: 0;
    justify-content: space-between;
    margin: 3rem 0 1.5rem;
    gap: 3rem;
    border-bottom: 1px solid;
    padding-bottom: 2rem;
}

.contacts li {
    text-align: center;
    flex-grow: 1;
}

.contacts li::before {
    font-size: 3rem;
}

.contacts h3 {
    margin: 1rem 0;
}

/* end: Contacts */

/* Partners */
.partners {
    position: relative;
    padding-top: 20px;
    margin-top: 20px;
}

.partners::before {
    background: linear-gradient(90deg, transparent, #4a76b7 50%, transparent);
    top: 0;
    height: 4px;
    left: 0;
    position: absolute;
    width: 100%;
    content: '';
    transform: translateY(20px);
}

.partners h3 {
    margin-bottom: 0;
}

.partners ul {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 20px 20px;
    align-items: center;
    justify-content: space-between;
    list-style-type: none;
    margin-top: 0;
    padding: 0 15px;
    text-align: center;
}

.partners .partner__tard {
    background-color: #0150a2;
}

@media only screen and (max-width : 800px) {
    .partners ul {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media only screen and (max-width : 600px) {
    .partners ul {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* end: Partners */

/* NEWS */

.latest_news {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 50px 30px;
}

.latest_news>h2 {
    flex-basis: 100%;
    margin-bottom: 0;
}

.latest_news-item {
    flex: 0 1 calc(33.333% - 20px);
    /* Блоки занимают 1/3 ширины */
}

.news__img img {
    width: 100%;
}

.news__date {
    font-size: 1rem;
}

.latest_news-item h3 {
    font-size: 1.334rem;
    line-height: 1.25;
    font-weight: 600;
    margin: 15px 0;
}

.latest_news-item h3 a {
    color: var(--bs-dark-text);
}

.news__text {
    margin: 10px 0;
}

.news__more::before {
    margin-right: 5px;
    transition: margin-right 0.2s;
}

.news__more:hover:before {
    margin-right: 10px;
}

.float-container::after {
    display: block;
    content: '';
    clear: both;
}

.float-container .image-style-align-left {
    float: left;
    margin-right: 2rem;
    max-width: 50%;
}


@media only screen and (max-width : 992px) {
    .latest_news-item {
        flex: 1 1 calc(50% - 15px);
    }
}

@media only screen and (max-width : 600px) {
    .latest_news-item {
        flex: 1 1 100%;
        /* Блок занимает всю ширину */
    }
}

/* end: news */

/* Стили списка новостей */
/* Стили для списка новостей */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Оформление карточки новости */
.news-item {
    display: flex;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s;
    gap: 15px;
}

.news-item:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Стили для изображения */
.news-thumb {
    flex-shrink: 0;
    width: 250px;
    height: auto;
    display: flex;
}

.news-thumb a {
    display: flex;
}

.news-thumb img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Основной контент новости */
.news-content {
    padding: 15px;
    flex-grow: 1;
}

.news-date {
    font-size: 0.85em;
    /* Немного меньше основного текста */
    color: #999;
    /* Серый оттенок для неяркого акцента */
    font-style: italic;
    /* Курсив для дополнительного выделения */
    margin-top: 5px;
}

.news-date::before {
    content: '📅 ';
    /* Можно заменить на подходящую иконку */
    /*margin-right: 5px;*/
    color: #666;
    /* Цвет иконки */
    font-style: normal;
}

.news-title {
    margin-top: 1.2rem;
}

.news-title a {
    color: #333;
    text-decoration: none;
}

.news-title a:hover {
    color: #0056b3;
}

/* Стиль для текста и дополнительных данных */
.news-text {
    color: #666;
    margin: 10px 0 20px;
}

.news-more {
    color: #fff;
    background-color: #0056b3;
    padding: 8px 12px;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
}

.news-more:hover {
    background-color: #003d80;
    color: #fff;
}

.news-info {
    margin-top: 10px;
    color: #888;
    font-size: 0.875em;
    display: flex;
    gap: 10px;
}

/* Стили блока информации о просмотрах и комментариях */
.news-info {
    display: flex;
    gap: 20px;
    font-size: 0.875em;
    color: #888;
    margin-top: 15px;
    list-style: none;
    padding: 0;
}

.news-info li {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.news-info a span {
    margin-left: 8px;
}

@media only screen and (max-width : 600px) {
    .latest_news-item {
        flex: 1 1 100%;
        /* Блок занимает всю ширину */
    }

    .news-item {
        flex-direction: column;
    }

    .news-title {
        margin-top: 0;
    }

    .news-thumb {
        width: 100%;
    }
}


/* tags */
.tags-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.news-tags {
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
    display: flex;
    column-gap: 15px;
    row-gap: 15px;
    flex-wrap: wrap;
}

.news-tags li {
    padding-left: 13px;
}

.news-tags a {
    background-color: #ffdc60;
    padding: 5px 10px;
    border-radius: 2px 5px 5px 2px;
    position: relative;
    line-height: 20px;
    display: inline-block;
    font-size: 1rem;
    color: #555;
}

.news-tags a:before {
    display: block;
    height: 20px;
    width: 20px;
    background-color: inherit;
    border: inherit;

    left: calc(50% - 10px);
    clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
    transform: rotate(45deg);
    border-radius: 0 0 0 0.25em;
    position: absolute;
    content: '';
    left: -10px;
    top: 5px;
}

.news-tags a:after {
    display: block;
    height: 10px;
    width: 10px;
    background-color: #fff;
    border-radius: 5px;
    position: absolute;
    content: '';
    left: -4px;
    top: 11px;
    box-shadow: inset 0 0 3px 0 rgb(0, 0, 0);
}

/* end: tags */

.news_albums {
    position: relative;
    margin-top: 2rem;
    border-top: 1px dashed #000;
}

.news_albums .container {
    padding: 0 30px;
}

.news_albums .swiper {
    padding-bottom: 2rem;
}

.news_albums-item {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.3s;
}

.news_albums-item a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #333;
}

.news_albums-item img {
    width: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 4/3;
}

.news_albums-item span {
    padding: 0.75rem 1rem;
    font-weight: 600;
}

.swiper-button-prev,
.swiper-button-next {
    color: #555;
    transition: opacity 0.3s;
}

.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}


.events {
    margin-top: 2rem;
    border-top: 2px solid #ddd;
}

.events__list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.event-card {
    flex: 1 1 300px;
    background: #f7f9fb;
    border: 1px solid #e0e6ed;
    border-radius: 12px;
    padding: 16px 20px;
    transition: box-shadow 0.2s ease;
    text-decoration: none;
    color: inherit;
}

.event-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.event-card__title {
    margin: 0;
    font-size: 18px;
    color: #003366;
}

.event-card__meta {
    margin-top: 8px;
    font-size: 14px;
    color: #555;
    display: flex;
    flex-direction: column;
    gap: 4px;
}



.event-card__date::before {
    content: "🕒 ";
}

/*Main Page */
.text-block {
    color: #525665;
    background-color: #E4E9F2;
    margin-top: 40px;
}

.about-us {
    padding-top: 20px;
    padding-bottom: 40px;
    font-size: 1.334rem;
    line-height: 1.5;
}

.about-us h2 {
    letter-spacing: .2em;
    margin: 1.334rem 0;
    text-transform: uppercase;
    text-align: center;
    position: relative;
}

.about-us h2:before,
.about-us h2::after {
    background-color: #cbcbcb;
    height: 1px;
    width: calc(50% - 130px);
    content: ' ';
    position: absolute;
    top: 50%;
}


.about-us h2:before {
    left: 0;
}

.about-us h2::after {
    right: 0;
}

.about-us p {
    margin-top: 0;
}

.about-us img {
    width: 100%;
}

.map-container {
    width: 100%;
    height: 400px;
    margin-bottom: -50px;
    margin-top: 3rem;
}

.map-container img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
}

/* end: Main Page */


#footer {
    min-height: 250px;
    color: var(--bs-secondary-bg);
    padding: 50px 0 0;
    margin-top: 50px;
    background-color: var(--bs-footer-bg);
    background-image: url('/img/ornament.svg');
    background-position: center 50px;
    background-repeat: no-repeat;
    color: #fff;
}

#footer .row {
    margin-bottom: 20px;
}

.footer-copyright {
    overflow: hidden;
    min-height: 50px;
    background-color: rgba(51, 51, 51, 0.08);
    padding: 10px 0px;
    color: rgba(255, 255, 255, 0.8);
}

.footer-copyright a {
    color: rgba(255, 255, 255, 0.8);
}

.footer-copyright .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-menu a {
    color: #fff;
    text-decoration: none;
}

.footer-menu a:hover {
    color: var(--bs-secondary-bg);
}

.footer-address [class^="_i-"]::before,
[class*=" _i-"]::before {
    margin-right: 10px;
}


/* Слайдер на главной*/

.slide-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    /* Полупрозрачный фон для текста */
    color: white;
    padding: 15px;
    text-align: center;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.slide-content h3 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1.8em;
}

.slide-content p {
    margin: 0;
    font-size: 1.1em;
}

.flickity-viewport {
    transition: height 0.2s;
}

@media all and (max-width: 768px) {
    .carousel {
        margin-top: 1rem;
    }

    .slide-content h3 {
        margin-top: 0;
        margin-bottom: 5px;
        font-size: 1.2em;
    }

    .slide-content p {
        margin: 0;
        font-size: 0.9em;
    }
}

/* end: Слайдер на главной*/


/* Мероприятия */
.event {
    background-color: var(--card-background);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px var(--shadow-light);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    padding: var(--padding-md);
}

.event__title {
    margin: 0 0 1rem;
}

.event__date {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--light-text-color);
    margin-bottom: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.event__date span {
    font-weight: bold;
}

.event__location {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--light-text-color);
    margin-bottom: 20px;
}

.event__registration {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

.text-muted {
    color: var(--light-text-color);
    font-size: 0.95em;
    font-weight: 500;
}

.event__registration button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 25px;
    border-radius: var(--border-radius);
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
    text-decoration: none;
    line-height: 1;
    border: none;
}

/* --- Стиль для кнопки "Зарегистрироваться" (data-success="registered") --- */
button[data-success="registered"] {
    background-color: var(--primary-color);
    /* Заливка основным цветом */
    color: var(--card-background);
    /* Белый текст */
    border: 1px solid var(--primary-color);
    /* Граница в цвет фона */
    box-shadow: 0 4px 12px var(--shadow-strong);
    /* Более выраженная тень */
}

button[data-success="registered"]:hover {
    background-color: #0056b3;
    /* Чуть темнее при наведении */
    border-color: #0056b3;
    box-shadow: 0 6px 18px var(--shadow-strong);
    /* Тень усиливается */
}

/* --- Стиль для кнопки "Отписаться" (data-success="not-registered") --- */
button[data-success="not-registered"] {
    background-color: transparent;
    /* Прозрачный фон */
    color: var(--secondary-color);
    /* Серый текст */
    border: 1px solid var(--secondary-color);
    /* Серая обводка */
    box-shadow: none;
    /* Без тени */
}

button[data-success="not-registered"]:hover {
    background-color: var(--secondary-color);
    /* Заливка серым при наведении */
    color: var(--card-background);
    /* Белый текст */
    border-color: var(--secondary-color);
}

.registered-block {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--text-color);
    padding: 5px 0;
}

.registered-block span {
    font-weight: 500;
    color: var(--primary-color);
    flex-grow: 1;
}

@media (max-width: 768px) {

    .events-grid {
        gap: 20px;
        padding: 10px 0;
    }

    .event {
        padding: var(--padding-sm);
    }

    .event__title {
        font-size: 1.4em;
    }

    button {
        padding: 10px 20px;
        font-size: 0.9em;
    }

    .registered-block {
        flex-direction: column;
        align-items: flex-start;
    }
}



/* --- Контейнер для списка мероприятий --- */
.events-list {
    display: grid;
    gap: 30px;
    /* Отступы между карточками */
    /* Адаптивная сетка: 1 колонка на мобильных, до 3 колонок на больших экранах */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* --- Стили для каждой карточки мероприятия (.event-item) --- */
.event-item {
    background-color: #ffffff;
    /* Белый фон карточки */
    border-radius: 8px;
    /* Скругление углов */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    /* Легкая и мягкая тень */
    overflow: hidden;
    /* Обрезка содержимого по скругленным углам */
    display: flex;
    flex-direction: column;
    /* Элементы внутри карточки располагаются сверху вниз */
    transition: box-shadow 0.2s ease-in-out;
    /* Только тень при наведении, без прыгания */
    padding: 20px;
    /* Внутренние отступы внутри карточки */
}

.event-item .event-date {
    display: block;
}

.event-item.overdue {
    opacity: 0.7;
    filter: grayscale(80%);
}

/* Эффект при наведении на карточку (только тень) */
.event-item:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    /* Усиление тени при наведении */
}

/* --- Контентная область внутри карточки (.event-content) --- */
.event-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* Чтобы контент занимал все доступное пространство */
}

/* Заголовок и дата в шапке (.event-header) */
.event-header {
    margin-bottom: 15px;
    /* Отступ между шапкой и текстом */
}

/* --- Заголовок мероприятия (.event-title) --- */
/* Стиль применяется напрямую к классу .event-title, без затрагивания h2 */
.event-title {
    font-size: 1.5em;
    /* Размер шрифта */
    font-weight: 600;
    /* Полужирный */
    margin: 0 0 5px;
    /* Отступ от даты */
}

.event-title a {
    color: #343a40;
    /* Цвет ссылки заголовка, как основной текст */
    text-decoration: none;
    line-height: 1.3;
    transition: color 0.2s ease-in-out;
}

.event-title a:hover {
    color: #007bff;
    /* Основной синий цвет при наведении */
    text-decoration: underline;
}

/* --- Дата мероприятия (.event-date) --- */
.event-date {
    font-size: 0.9em;
    color: #6c757d;
    /* Более светлый цвет для даты */
}

/* --- Основной текст описания мероприятия (.event-text) --- */
.event-text {
    font-size: 0.9em;
    color: #343a40;
    margin-bottom: 15px;
    /* Отступ от кнопки "Подробнее" */
    line-height: 1.5;
    flex-grow: 1;
    /* Чтобы текст занимал доступное пространство */
    overflow: hidden;
    /* Скрыть переполнение, если текст слишком длинный */
    text-overflow: ellipsis;
    /* Добавить многоточие */
    display: -webkit-box;
    /* Для многострочного многоточия */
    -webkit-line-clamp: 3;
    /* Ограничить 3 строками */
    -webkit-box-orient: vertical;
}

.event-text p:last-child {
    margin-bottom: 0;
}

/* --- Кнопка "Подробнее" (.event-more) --- */
.event-more {
    display: inline-block;
    font-size: 0.9em;
    position: relative;
    font-weight: bold;
    color: #007bff;
    /* Основной синий цвет */
    text-decoration: none;
    margin-top: 10px;
    /* Отступ от текста */
    padding-bottom: 2px;
    /* Небольшой отступ, если есть нижняя граница */
    border-bottom: 1px solid transparent;
    /* Для эффекта подчеркивания */
    transition: border-color 0.2s ease-in-out;
}

.event-more::after {
    content: ' ';
    height: 1px;
    background-color: #007bff;
    width: 7rem;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: width 0.2s;
}

.event-more:hover::after {
    width: 100%;
    /* Подчеркивание при наведении */
}

/* --- Блок дополнительной информации (.event-info) --- */
.event-info {
    list-style: none;
    /* Убираем маркеры списка */
    padding: 0;
    margin-top: 15px;
    /* Отступ от "Подробнее" */
    border-top: 1px solid #e9ecef;
    /* Лаконичный разделитель */
    padding-top: 15px;
    display: flex;
    /* Для выравнивания элементов в строке */
    align-items: center;
    gap: 15px;
    /* Отступ между элементами списка */
}

/* Цвет для счетчика внутри li, если нужно выделить */
.event-info li span {
    font-weight: bold;
}

/* --- Адаптивность для мобильных устройств --- */
@media (max-width: 768px) {

    .event-item {
        padding: 15px;
        /* Меньшие внутренние отступы на мобильных */
    }

    .event-title {
        font-size: 1.3em;
    }

    .event-text {
        -webkit-line-clamp: 4;
        /* Чуть больше строк на мобильных, если нужно */
    }
}



/* Основной контейнер */
.user-events {
    padding: 1.34rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #f9f9f9;
}

/* Заголовок */
.user-events-title {
    font-size: 1.5rem;
    color: #333;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
    margin-top: 0;
}

/* Список мероприятий */
.user-events-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.user-events-list li {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.user-events-list li:last-child {
    margin-bottom: 0;
}

/* Ссылка на мероприятие */
.user-event-link {
    color: #007bff;
    text-decoration: none;
    margin-top: 5px;
}

.user-event-link:hover {
    text-decoration: underline;
}

/* Детали (дата, место) */
.event-details {
    font-size: 1rem;
    color: #666;
    margin-bottom: 5px;
}

.user-events .event-date {
    font-weight: bold;
}

.event-location {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--light-text-color);
}

/* end: Мероприятия */


/* Сертификаты*/

.user-certificates {
    background-color: #f8f9fa;
    /* Светлый фон блока */
    border: 1px solid #e9ecef;
    /* Тонкая рамка */
    border-radius: 8px;
    /* Скругление углов */
    padding: 20px;
    /* Отступы внутри блока */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    /* Легкая тень для объема */
}

.user-certificates h3 {
    font-size: 1.5rem;
    color: #343a40;
    margin-bottom: 20px;
    border-bottom: 2px solid #007bff;
    /* Подчеркивание заголовка */
    padding-bottom: 10px;
}

.user-certificates ul {
    list-style: none;
    /* Убираем стандартные маркеры списка */
    padding: 0;
    margin: 0;
}

.user-certificates>ul>li {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 15px;
}

.user-certificates ul li:last-child {
    margin-bottom: 0;
}

.user-event-info {
    font-size: 1rem;
    color: #6c757d;
    margin-bottom: 10px;
}

.user-event-title {
    font-weight: bold;
    color: #495057;
    text-decoration: none;
    margin-bottom: 10px;
}

.user-event-title:hover {
    color: #007bff;
    text-decoration: underline;
}

.user-certificates ul ul {
    list-style: none;
    padding-left: 20px;
    margin-top: 10px;
    border-left: 2px solid #007bff;
    /* Вертикальная линия для выделения сертификатов */
}

.user-certificates ul ul li {
    margin-bottom: 8px;
}

.user-event-certificate {
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
}

.user-event-certificate:hover {
    text-decoration: underline;
}

/* Check*/
.certificate-check-page {
    margin-top: 2rem;
    align-items: start;
    row-gap: 1rem;
}

.certificate-check-container {
    display: flex;
    justify-content: center;
}

.certificate-check-form {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    max-width: 450px;
    width: 100%;
    text-align: center;
}

.form-group {
    margin-bottom: 20px;
}

.certificate-check-form label {
    display: block;
    font-size: 1.1rem;
    color: #4a4a4a;
    margin-bottom: 10px;
    font-weight: 500;
}

.certificate-check-form input[type="text"] {
    width: 100%;
    padding: 12px 15px;
    font-size: 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    transition: border-color 0.3s, box-shadow 0.3s;
    outline: none;
    text-transform: uppercase;
}

.certificate-check-form input[type="text"]:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

.check-btn {
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    text-transform: uppercase;
}

.check-btn:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

.check-btn:active {
    background-color: #004494;
    transform: translateY(0);
}


.certificate-verification {
    font-family: Arial, sans-serif;
    padding: 25px;
    background-color: #f7f9fc;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.verification-header {
    text-align: center;
    margin-bottom: 30px;
}

.verification-header h1 {
    font-size: 2.2rem;
    color: #2c3e50;
    border-bottom: 3px solid #007bff;
    padding-bottom: 10px;
    display: inline-block;
    margin: 0;
}

.verification-status {
    text-align: center;
    padding: 1rem 1.3rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    font-weight: bold;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.verification-status p {
    margin: 0;
}

.status-valid {
    background-color: #d4edda;
    color: #155724;
}

.status-invalid {
    background-color: #f8d7da;
    color: #721c24;
}

.status-icon {
    font-size: 1.5rem;
}

.certificate-info-section {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}

.info-block {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    flex: 1 1 calc(50% - 25px);
    /* Две колонки на больших экранах */
}

.info-block h2 {
    font-size: 1.2rem;
    font-weight: bold;
    color: #34495e;
    border-bottom: 2px solid #ecf0f1;
    padding-bottom: 8px;
    margin: 0 0 1rem;
}

.info-block p {
    margin: 5px 0;
    color: #555;
}

.info-block strong {
    color: #2c3e50;
}

.verification-footer {
    text-align: center;
    margin-top: 30px;
    color: #7f8c8d;
    font-size: 0.9rem;
}

.verification-footer p {
    margin: 0;
}

@media (max-width: 768px) {
    .info-block {
        flex: 1 1 100%;
    }
}

/* end: Сертификаты*/

/* Сессии */
.sessions-container {
    max-width: 600px;
    margin: 40px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-family: Arial, sans-serif;
}

.sessions-list {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.session-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
    border-radius: 6px;
    border: 1px solid #eee;
}

.current-session {
    border: 2px solid #007bff;
    background-color: #eaf5ff;
}

.button-logout {
    padding: 8px 12px;
    background-color: #dc3545;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.button-logout:hover {
    background-color: #c82333;
}

.logout-all {
    margin-bottom: 20px;
}

.button-logout-all {
    display: block;
    width: 100%;
    padding: 10px;
    text-align: center;
    background-color: #dc3545;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.button-logout-all:hover {
    background-color: #c82333;
}

/* end: Сессии */

.lang-tr {
    border-radius: 5px;
    border: 1px solid var(--bs-dark-border-subtle);
    padding: 0 5px;
    background-color: var(--bs-dark-bg-subtle);
}

ul.files {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    padding-left: 1rem;
    margin-top: 0;
}

.lang-tr::before {
    content: '🇹🇷';
    margin-right: 10px;
}

a.file__item:before {
    content: '\e926';
    margin-right: 5px;
}

a.file__item[href$='.doc']:before,
a.file__item[href$='.docx']:before {
    content: '\eae1';
}

a.file__item[href$='.xls']:before,
a.file__item[href$='.xlsx']:before {
    content: '\eae2';
}

a.file__item[href$='.ppt']:before,
a.file__item[href$='.pptx']:before {
    content: '\f1c4';
}

a.file__item[href$='.pdf']:before {
    content: '\eadf';
}

a.file__item[href$='.txt']:before {
    content: '\e927';
}

a.file__item[href$='.jpg']:before,
a.file__item[href$='.png']:before,
a.file__item[href$='.gif']:before {
    content: '\e928'
}

a.file__item[href$='.zip']:before,
a.file__item[href$='.rar']:before,
a.file__item[href$='.gzip']:before {
    content: '\e92b';
}

a.file__item[href$='.mp3']:before,
a.file__item[href$='.wav']:before,
a.file__item[href$='.aac']:before {
    content: '\e929';
}

a.file__item[href$='.avi']:before,
a.file__item[href$='.mkv']:before,
a.file__item[href$='.mp4']:before {
    content: '\e92a';
}

/* Search*/

/* Медиа-запрос для больших экранов (sm:p-8) */
@media (min-width: 640px) {

    .card-header {
        flex-direction: row;
        align-items: center;
        /* Выравнивание по центру по вертикали */
    }

}

/* Заголовок страницы */
.search-title {
    font-size: 1.875rem;
    font-weight: bold;
    margin-bottom: 2rem;
    color: #3b82f6;
    /* primary-blue */
}

/* Список результатов (space-y-6) */
.results-list>*+* {
    margin-top: 1.5rem;
}

/* Карточка результата (основной элемент DIV) */
.search-result-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    /* gray-200 */
    padding: 1.25rem;
    border-radius: 0.75rem;
    transition: all 200ms ease-in-out;
    /* Указываем, что область интерактивна */
}

/* Эффект при наведении на карточку */
.search-result-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
    border-color: #3b82f6;
    /* primary-blue */
}

/* Контейнер заголовка и бейджа (flex flex-col) */
.card-header {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    align-items: flex-start;
}

/* Бейдж категории */
.search-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
    white-space: nowrap;
}

/* Стили для конкретных категорий (Hardcoded colors) */
.badge-news {
    background-color: #e0e7ff;
    color: #4f46e5;
}

.badge-events {
    background-color: #d1fae5;
    color: #059669;
}

.badge-pages {
    background-color: #fef3c7;
    color: #b45309;
}

/* Заголовок H3 */
.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 0;
    flex: 1 1 0%;
}

/* Ссылка внутри H3 */
.card-title a {
    color: #1f2937;
    /* gray-800 */
    text-decoration: none;
    /* Убираем подчеркивание по умолчанию */
    transition: color 150ms ease-in-out;
}

/* Эффект наведения на ссылку */
.card-title a:hover {
    color: #3b82f6;
    /* primary-blue */
    text-decoration: underline;
}



/* end: Search */