html {
  font-size: 14px;
}

:root {
    --accent-1: #1f4ea3;
    --accent-2: #2f6de0;
    --page-bg: #f4f7fc;
    --panel-bg: #ffffff;
    --panel-border: #e3ebf7;
    --panel-shadow: 0 0.45rem 1.1rem rgba(19, 39, 69, 0.08);
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  margin-bottom: 60px;
  background: linear-gradient(180deg, var(--page-bg) 0%, #ffffff 45%);
}

.site-navbar {
    background: linear-gradient(90deg, #173a7a 0%, var(--accent-1) 50%, var(--accent-2) 100%);
    border-radius: 0 0 0.9rem 0.9rem;
    box-shadow: 0 0.45rem 1rem rgba(14, 44, 92, 0.2);
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.site-navbar .navbar-brand {
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.brand-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #9fd0ff;
    box-shadow: 0 0 0 5px rgba(159, 208, 255, 0.25);
}

.site-navbar .nav-link {
    color: rgba(255, 255, 255, 0.88);
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
}

.site-navbar .nav-link-cta {
    border: 1px solid rgba(255, 255, 255, 0.38);
}

.site-navbar .nav-link.active {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.kaspi-qr {
    max-width: 250px;
    display: block;
    border: 0;
}

.kaspi-qr-container {
    text-align: center;
}

.kaspi-qr-link {
    display: inline-block;
    line-height: 0;
    text-decoration: none;
    border: 0;
}

.kaspi-qr-link:hover,
.kaspi-qr-link:focus,
.kaspi-qr-link:active {
    text-decoration: none;
    outline: none;
}

.home-hero {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    color: #fff;
    background-image: url('/images/bg.jpg');
    background-size: cover;
    background-position: center;
    box-shadow: var(--panel-shadow);
}

.home-hero::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    right: -80px;
    top: -120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 70%);
}

.home-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(24, 57, 116, 0.78), rgba(47, 109, 224, 0.54));
}

.surface-card {
    border: 1px solid var(--panel-border);
    border-radius: 0.9rem;
    box-shadow: var(--panel-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: fadeUp 0.55s ease both;
    background: var(--panel-bg);
}

.row.g-3.mb-4 .col-md-4:nth-child(1) .surface-card { animation-delay: 0.04s; }
.row.g-3.mb-4 .col-md-4:nth-child(2) .surface-card { animation-delay: 0.1s; }
.row.g-3.mb-4 .col-md-4:nth-child(3) .surface-card { animation-delay: 0.16s; }

.surface-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.65rem 1.3rem rgba(19, 39, 69, 0.12);
}

.section-title {
    font-weight: 600;
    margin-bottom: 0.8rem;
}

.legal-note {
    border: 1px solid #dbe8ff;
    border-left: 4px solid #8fb4ef;
    border-radius: 0.75rem;
    background: linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
    padding: 0.9rem 1rem;
}

.legal-note h4 {
    color: #294a79;
    font-weight: 600;
}

.legal-note p {
    color: #41536b;
    line-height: 1.6;
}

.feature-card h4 {
    color: #0d3b86;
    font-weight: 600;
}

.feature-link {
    color: inherit;
}

.feature-link .card-body::after {
    content: "Перейти →";
    display: inline-block;
    margin-top: 0.75rem;
    color: #0d6efd;
    font-weight: 600;
    font-size: 0.92rem;
    transition: transform 0.2s ease;
}

.feature-link:hover .card-body::after {
    transform: translateX(3px);
}

.hero-title {
    letter-spacing: 0.3px;
}

.hero-subtitle {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
}

.hero-action {
    min-width: 180px;
}

.manifesto-card {
    border: 1px solid #dfe9fa;
    border-left: 5px solid var(--accent-2);
    background: linear-gradient(180deg, #f6f9ff 0%, #ffffff 100%);
    box-shadow: var(--panel-shadow);
}

.manifesto-card p {
    line-height: 1.65;
    margin-bottom: 0.9rem;
}

.stats-card {
    border-color: #d6e5ff;
}

.stats-total {
    border: 1px solid #dbe8ff;
    border-radius: 0.85rem;
    background: linear-gradient(140deg, #f5f9ff 0%, #ffffff 100%);
    padding: 0.9rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.stats-total-label {
    color: #3d4d63;
    font-size: 0.95rem;
}

.stats-total-value {
    color: #1b3e7a;
    font-size: 1.8rem;
    line-height: 1;
}

.stats-table thead th {
    border-bottom: 2px solid #d6e5ff;
    color: #324a64;
}

.home-page .text-muted,
.home-page .text-secondary {
    color: #5a6b83 !important;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .surface-card,
    .feature-link .card-body::after {
        animation: none;
        transition: none;
    }
}

@media (max-width: 767.98px) {
    .site-navbar {
        border-radius: 0;
    }

    .home-hero {
        border-radius: 0.8rem;
    }

    .hero-title {
        font-size: 1.95rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-action {
        width: 100%;
    }

    .stats-total {
        flex-direction: column;
        align-items: flex-start;
    }
}

.news-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.5rem;
}

.news-main-content {
    min-width: 0;
}

.news-breadcrumb .breadcrumb {
    padding: 0.6rem 0;
}

.news-breadcrumb .breadcrumb-item,
.news-breadcrumb .breadcrumb-item a {
    color: #5b6f8d;
    text-decoration: none;
}

.news-breadcrumb .breadcrumb-item.active {
    color: #7789a3;
}

.news-article-card {
    background: #fff;
    border: 1px solid #e2eaf7;
    border-radius: 0.95rem;
    box-shadow: 0 0.35rem 1rem rgba(26, 48, 84, 0.08);
    padding: 1.3rem;
}

.news-article-head {
    margin-bottom: 1rem;
}

.news-article-title {
    color: #122f5e;
    line-height: 1.25;
    margin-bottom: 0.65rem;
}

.news-article-meta {
    color: #6b7d96;
    font-size: 0.95rem;
}

.news-article-cover-wrap {
    margin: 0 0 1rem;
}

.news-article-cover {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    border-radius: 0.75rem;
    border: 1px solid #e2eaf7;
}

.news-article-lead {
    color: #304867;
    font-size: 1.12rem;
    line-height: 1.6;
    border-left: 3px solid #9ab9ee;
    padding-left: 0.9rem;
    margin-bottom: 1rem;
}

.news-article-body {
    white-space: pre-line;
    color: #213955;
    line-height: 1.8;
    font-size: 1.03rem;
}

.news-sidebar-card {
    background: #fff;
    border: 1px solid #e2eaf7;
    border-radius: 0.95rem;
    box-shadow: 0 0.35rem 1rem rgba(26, 48, 84, 0.08);
    padding: 1rem;
    position: sticky;
    top: 1rem;
}

.news-sidebar-title {
    color: #16386f;
    font-size: 1.1rem;
    margin-bottom: 0.9rem;
}

.news-sidebar-list {
    display: grid;
    gap: 0.75rem;
}

.news-sidebar-item {
    display: block;
    text-decoration: none;
    border-bottom: 1px solid #ebf1fb;
    padding-bottom: 0.65rem;
}

.news-sidebar-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.news-sidebar-item-title {
    color: #1c3d70;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 0.25rem;
}

.news-sidebar-item-date {
    color: #7a8ca6;
    font-size: 0.86rem;
}

.news-sidebar-item:hover .news-sidebar-item-title,
.news-sidebar-item:focus .news-sidebar-item-title {
    color: #0d6efd;
}

@media (max-width: 991.98px) {
    .news-page {
        grid-template-columns: 1fr;
    }

    .news-sidebar-card {
        position: static;
    }
}

.news-list-card {
    border: 1px solid #e2eaf7;
}

.news-list-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.news-list-content {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.news-list-image-wrap {
    width: 100%;
}

.news-list-image,
.news-list-image-placeholder {
    width: 100%;
    height: 140px;
    border-radius: 0.65rem;
    border: 1px solid #e4ebf8;
}

.news-list-image {
    object-fit: cover;
}

.news-list-image-placeholder {
    background: linear-gradient(180deg, #f3f7ff 0%, #e8f0ff 100%);
}

.news-list-link:hover .card-title,
.news-list-link:focus .card-title {
    color: #0d6efd;
}

.news-social-bar {
    display: flex;
    align-items: center;
}

.news-social-bar form {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.news-like-button {
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid #c7d9f8;
    background: #fff;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6f86aa;
    transition: all 0.2s ease;
}

.news-like-button:hover,
.news-like-button:focus {
    border-color: #a3c0ef;
    color: #4d6fa2;
}

.news-like-button.is-liked {
    border-color: #df6b87;
    background: #fff3f6;
    color: #cf335f;
}

.news-like-heart {
    font-size: 1.1rem;
    line-height: 1;
}

.news-like-count {
    color: #456084;
    font-weight: 600;
}

.news-comments-section {
    margin-top: 1.2rem;
    background: #fff;
    border: 1px solid #e2eaf7;
    border-radius: 0.95rem;
    box-shadow: 0 0.35rem 1rem rgba(26, 48, 84, 0.08);
    padding: 1.1rem;
}

.news-comments-title {
    font-size: 1.15rem;
    margin-bottom: 1rem;
    color: #183b73;
}

.news-comments-list {
    display: grid;
    gap: 0.9rem;
}

.news-comment-item {
    border: 1px solid #e6edf9;
    border-radius: 0.75rem;
    padding: 0.8rem;
    background: #fbfdff;
}

.news-comment-reply {
    margin-left: 1.1rem;
    border-left: 3px solid #c6dafb;
}

.news-comment-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 0.35rem;
}

.news-comment-date {
    color: #7a8ca6;
    font-size: 0.85rem;
}

.news-comment-parent-note {
    color: #5d7495;
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
}

.news-comment-text {
    color: #1f3858;
    white-space: pre-line;
}

.news-comment-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.news-comment-delete-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.news-comment-action-btn {
    padding: 0.2rem 0.45rem;
    font-size: 0.74rem;
    line-height: 1.2;
}

.news-comment-inline-error {
    color: #b42318;
    font-size: 0.85rem;
}

@media (max-width: 767.98px) {
    .news-list-content {
        grid-template-columns: 1fr;
    }

    .news-list-image,
    .news-list-image-placeholder {
        height: 180px;
    }

    .news-comment-reply {
        margin-left: 0.5rem;
    }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}