@charset "UTF-8";
/* po-info-item styling for pre_choose_case.php */
.po-info-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: #fff;
    border-radius: 6px;
    margin-bottom: 4px;
}

/* Case cards styling */
.cr-case-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(2,6,23,0.10), 0 2px 8px rgba(2,6,23,0.05);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    margin-bottom: 20px;
}

.cr-case-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 48px rgba(2,6,23,0.16), 0 6px 16px rgba(2,6,23,0.08);
    border-color: #94a3b8;
}

.cr-case-link {
    color: inherit;
    text-decoration: none;
    display: block;
}

.cr-case-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #eef2f7;
    background: linear-gradient(180deg, #fbfdff 0%, #ffffff 60%);
}

.cr-case-title {
    margin: 0;
    font-size: 20px;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cr-case-number {
    color: #7796C6;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: max-content;
}

.cr-case-body {
    padding: 0;
}

.cr-case-info {
    display: grid;
    gap: 12px;
    padding: 16px 20px;
}

.cr-info-label {
    font-weight: 500;
    color: #374151;
    flex: 0 0 auto;
    margin-right: 16px;
    min-width: 140px;
}

.cr-info-value {
    color: #0f172a;
    text-align: right;
    flex: 1;
}

.cr-info-value strong {
    font-weight: 700;
}

.cr-case-footer {
    padding: 16px 24px;
    background: #f8fafc;
    text-align: center;
    border-top: 1px solid #f1f5f9;
}

.po-case-footer {
    padding: 16px 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    text-align: center;
    border-top: 1px solid #e5e7eb;
    font-weight: 500;
}

.cr-select-hint {
    color: #6b7280;
    font-size: 0.9rem;
    font-style: italic;
}

/* Status badges */
.cr-status {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-left: 12px;
}

.cr-status-published {
    background: #d1fae5;
    color: #10b981;
}

.cr-status-moderation {
    background: #fef3c7;
    color: #f59e0b;
}

.cr-status-archived {
    background: #f3f4f6;
    color: #6b7280;
}

.cr-case-card.cr-case-archived {
    opacity: 0.6;
    filter: grayscale(0.3);
}

.cr-case-card.cr-case-archived:hover {
    opacity: 0.8;
    filter: grayscale(0.1);
}

/* Page wrapper and content */
.cr-page-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}
    .cr-badge-role-acc {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 8px;
        border-radius: 999px;
        font-size: 14px;
        line-height: 1;
        border: 1px solid #e5e7eb;
        background: #f8fafc;
        color: #0f172a;
    }
    .cr-badge-role-acc--admin {
        background: #FFF7ED;
        color: #C2410C;
        border-color: #FED7AA;
    }
    .cr-badge-role-acc--executor {
        background: #ECFDF5;
        color: #065F46;
        border-color: #A7F3D0;
    }

.cr-content {
    max-width: 800px !important;
    margin: 0 auto;
    padding: 0 16px;
}

/* Breadcrumbs */
.cr-breadcrumb {
    margin: 30px 0 24px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(2,6,23,0.05);
}

.cr-breadcrumb-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 8px;
    align-items: center;
    font-size: 14px;
}

.cr-breadcrumb-item {
    display: flex;
    align-items: center;
}

.cr-breadcrumb-item:not(:last-child)::after {
    content: '/';
    margin-left: 8px;
    color: #9ca3af;
    font-weight: 300;
}

.cr-breadcrumb-link {
    color: #7796C6;
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 500;
}

.cr-breadcrumb-link:hover {
    color: #6687b5;
    background: rgba(119, 150, 198, 0.1);
    text-decoration: none;
}

.cr-breadcrumb-current {
    font-weight: 600;
    color: #0f172a;
    padding: 4px 8px;
    background: rgba(15, 23, 42, 0.05);
    border-radius: 6px;
}

/* Notification styles */
.cr-notification-block {
    display: flex;
    justify-content: center;
    margin: 40px 0;
}

.cr-notification {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 500px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(2,6,23,0.08);
}

.cr-notification-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-radius: 50%;
}

.cr-icon-warning {
    width: 48px;
    height: 48px;
    fill: #E75656;
}

.cr-notification-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px 0;
}

.cr-notification-text {
    color: #6b7280;
    line-height: 1.6;
    margin: 0 0 20px 0;
}

.cr-notification-action {
    margin-top: 8px;
}

/* Moderation summary card */
.cr-moderation-summary {
    position: relative;
    background: linear-gradient(145deg, #f8fbff 0%, #ffffff 70%);
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10);
    padding: 24px 26px;
    margin: 32px auto 20px;
    max-width: 980px;
    overflow: hidden;
}

.cr-moderation-summary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 18% 24%, rgba(119, 150, 198, 0.14), transparent 35%),
                radial-gradient(circle at 82% 12%, rgba(231, 86, 86, 0.14), transparent 32%);
    pointer-events: none;
}

.cr-moderation-summary__header,
.cr-moderation-summary__grid,
.cr-moderation-summary__cta {
    position: relative;
    z-index: 1;
}

.cr-moderation-summary__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.cr-moderation-summary__eyebrow {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7796C6;
    font-weight: 700;
    margin-bottom: 6px;
}

.cr-moderation-summary__title {
    font-size: 22px;
    line-height: 1.3;
    color: #0f172a;
    font-weight: 700;
}

.cr-moderation-summary__meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cr-moderation-summary__badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: #7796C6;
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 20px rgba(119, 150, 198, 0.35);
}

.cr-moderation-summary__date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
    font-weight: 600;
}

.cr-moderation-summary__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.cr-moderation-summary__item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.cr-moderation-summary__label {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 6px;
    font-weight: 700;
}

.cr-moderation-summary__value {
    color: #0f172a;
    font-weight: 600;
    line-height: 1.5;
    word-break: break-word;
}

.cr-moderation-summary__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    padding: 14px 0 0;
    border-top: 1px solid #e2e8f0;
}

.cr-moderation-summary__cta-text {
    font-weight: 700;
    color: #0f172a;
}

/* Button styles */
.cr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}

.cr-btn-primary {
    background: #7796C6;
    color: #fff;
    border: 1px solid #7796C6;
}

.cr-btn-primary:hover {
    background: #6687b5;
    border-color: #6687b5;
    box-shadow: 0 4px 12px rgba(119,150,198,0.25);
    transform: translateY(-1px);
}

/* Mobile styles for po-info-item */
@media (max-width: 768px) {
    .po-info-item {
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
        padding: 10px;
    }
    
    .cr-content {
        padding: 0 12px;
    }
    
    .cr-case-card {
        margin-bottom: 16px;
        border-radius: 12px;
    }
    
    .cr-case-header {
        padding: 16px 20px 12px;
    }
    
    .cr-case-title {
        font-size: 1.1rem;
    }
    
    .cr-case-body {
        padding: 0;
    }
    
    .cr-case-info {
        padding: 0 20px 16px;
    }
    
    .cr-case-footer {
        padding: 12px 20px;
    }
    
    .po-case-footer {
        padding: 12px 20px;
        font-size: 0.9rem;
    }
    
    .cr-notification {
        padding: 24px 20px;
        margin: 0 12px;
    }
    
    .cr-notification-icon {
        width: 60px;
        height: 60px;
    }
    
    .cr-icon-warning {
        width: 36px;
        height: 36px;
    }
    
    .cr-notification-title {
        font-size: 1.3rem;
    }

    .cr-moderation-summary {
        padding: 20px 18px;
        margin: 24px 12px 18px;
    }

    .cr-moderation-summary__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .cr-moderation-summary__grid {
        grid-template-columns: 1fr;
    }

    .cr-moderation-summary__cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .po-info-item {
        padding: 8px;
    }
    
    .cr-case-header {
        padding: 12px 16px 10px;
    }
    
    .cr-case-title {
        font-size: 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .cr-case-info {
        padding: 0 16px 12px;
        gap: 8px;
    }

    .cr-moderation-summary {
        margin: 20px 10px 16px;
        padding: 18px 14px;
    }

    .cr-moderation-summary__title {
        font-size: 1.1rem;
    }

    .cr-moderation-summary__badge,
    .cr-moderation-summary__date {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .cr-moderation-summary__cta {
        gap: 12px;
    }
    
    .cr-case-footer {
        padding: 10px 16px;
    }
    
    .po-case-footer {
        padding: 10px 16px;
        font-size: 0.85rem;
    }
    
    .cr-select-hint {
        font-size: 0.8rem;
    }
    
    /* Breadcrumbs mobile */
    .cr-breadcrumb {
        margin: 20px 0 16px;
        padding: 8px 12px;
        font-size: 13px;
        overflow-x: auto;
    }
    
    .cr-breadcrumb-list {
        flex-wrap: nowrap;
        gap: 6px;
        min-width: max-content;
        font-size: 13px;
    }
    
    .cr-breadcrumb-link, .cr-breadcrumb-current {
        padding: 2px 6px;
        font-size: 13px;
    }
}

.add_btn{
    cursor: pointer;
    width: 150px;
    height: 26px;
    border: 1px solid #757575;
    border-radius: 9px;
    font-size: 0.75em;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.padding_625_top{
    padding-top:0.625em !important;
}
.align_right{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

/* Checkbox группы */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.checkbox-item input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #d1d5db;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.checkbox-item input[type="checkbox"]:checked {
    background-color: #4f46e5;
    border-color: #4f46e5;
}

.checkbox-item input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.875rem;
    font-weight: bold;
}

.checkbox-label {
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.5;
    cursor: pointer;
    user-select: none;
}

/* Expandable секции */
.expandable-section {
    margin-top: 0.5rem;
}

.toggle-button {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    width: auto;
    margin-bottom: 0.75rem;
}

.toggle-button:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
}

.toggle-button.active {
    background: #4f46e5;
    color: white;
    border-color: #4f46e5;
}

.toggle-icon {
    font-weight: bold;
    font-size: 1rem;
}

.expandable-content {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-top: 0.5rem;
}

/* Загрузка файлов */
.file-upload-section {
    margin-top: 0.5rem;
}

.file-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.file-input {
    padding: 0.75rem;
    border: 2px dashed #d1d5db;
    border-radius: 0.5rem;
    background: #f9fafb;
    transition: all 0.2s ease;
}

.file-input:hover {
    border-color: #4f46e5;
    background: #eef2ff;
}

.btn-add-file {
    background: #C75656 !important;
    color: white !important;
    border: none !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: all 0.2s ease !important;
    width: auto !important;
    min-width: 160px !important;
    justify-content: center !important;
}

.btn-add-file:hover {
    background: #a84444 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(199, 86, 86, 0.3) !important;
}

.btn-icon {
    font-size: 1rem;
    font-weight: bold;
}

/* Кнопка Отправить */
.btn-submit-custom {
    background: #7797C6 !important;
    border-color: #7797C6 !important;
}

.btn-submit-custom:hover {
    background: #6687b5 !important;
    border-color: #6687b5 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(119, 151, 198, 0.3) !important;
}

/* Соглашения */
.agreements {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-top: 1rem;
}

.agreement-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.agreement-item:last-child {
    margin-bottom: 0;
}

.agreement-item input[type="checkbox"] {
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.policy-link {
    color: #4f46e5 !important;
    text-decoration: underline !important;
    font-weight: 500;
}

.policy-link:hover {
    color: #3730a3 !important;
}

/* Кнопки действий */
.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
}

.btn {
    padding: 0.875rem 2rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    text-decoration: none;
    border: 2px solid transparent;
    min-width: 160px;
    justify-content: center;
}

.btn-primary {
    background: #4f46e5;
    color: white;
    border-color: #4f46e5;
}

.btn-primary:hover {
    background: #3730a3;
    border-color: #3730a3;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.3);
}

.btn-secondary {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}

.btn-secondary:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
    transform: translateY(-1px);
}

/* Кнопка Отправить */
.btn-submit-custom {
    background: #7797C6 !important;
    border-color: #7797C6 !important;
}

.btn-submit-custom:hover {
    background: #6687b5 !important;
    border-color: #6687b5 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(119, 151, 198, 0.3) !important;
}
/*ЛИЧНЫЙ КАБИНЕТ*/
.hellow_acount{
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    align-items: center;
}
.hellow_acount_begin{
    padding: 50px 0 40px 55px; /*200-50 изменено на executor_account.php*/
}
.hellow_acount_2columns{
    display: flex;
    flex-direction: row;
} 
.hellow_acount_2column_bar{
    width: 49%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
}
.box_bar_item{
    width: 400px;
    }
.hellow_acount_2column_bar_item{
    height: 70px;
    width: 400px;
    border-radius: 1.25em;
    border: 2px solid #E8E8E8;
    padding-left: 0.625em;
    margin-bottom: 20px;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}
.hellow_acount_2column_bar_item:hover{
    border: 2px solid black;
}
.item_with_notice{
    height: 70px;
    width: 400px;
    border-radius: 1.25em;
    border: 2px solid #E8E8E8 !important;
    display: flex;
    margin-bottom: 20px;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    align-items: center;
    position: relative;
}
.item_with_notice:hover{
    border: 2px solid black !important;
}
#sign_choose{
    height: 84px;
    width: 84px;
    transition: all 0.35s;
}
#sign_choose:hover{
    height: 94px;
    width: 94px;
    transform: translateY(-0.25em);
}
.my_orders {
    position: absolute;
}
.push{
    border-radius: 1.563em;
    background-color: #E75656;
    width: 40px;
    height: 40px;
    padding-top: 0.375em;
    margin-left: 1.875em;
    margin-top: 0.5em;
}
.container_video_notif{
    width: 350px;
    margin: 30px auto;
}
.demo-video-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #374151;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: background .2s ease, color .2s ease, transform .1s ease;
}
.demo-video-close:hover { background: #f3f4f6; color: #111827; transform: translateY(-1px); }
.demo-video-close:focus-visible { outline: 3px solid rgba(119,151,198,0.45); outline-offset: 2px; }
.corr_mess{
    border-radius: 12px;
    color: #7797C6; 
    padding: 10px; 
    background-color: #F4F4F4; 
    text-align: right; 
    display: inline-block;
    box-shadow: 0 -4px 4px 0 #8A8A8A40;
}
/* START--ФОРМА АВТОРИЗАЦИИ */
.authorization {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    margin: 40px auto 60px auto; /*формы авторизации*/
}
.form_reg_all{
    width: 450px;
    margin: 50px auto 100px auto;
}
.authorization_form{
   height: 70px;
    width: 500px;
    border-radius: 1.25em;
    border: 2px solid #E8E8E8 !important;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.authorization_form:hover{
    border: 2px solid black !important;
}
.fns_check_inn{
    background-color: #F0F0F0;
    border-radius: 4px;
    box-shadow: 0px -1px 4px 3px #D9D9D966;
    cursor: pointer;
    width: 350px;
}
.fns_check_inn :hover{
    text-decoration: underline !important;
    color:#7797C6 !important;
    padding-left: 5px;
    background-color: #F0F0F0;
}
.fns_check_inn a{
    color:#7797C6 !important;
}
/* END--ФОРМА АВТОРИЗАЦИИ */
/* СТИЛИ ПОЛЕЙ */
.form_reg{
    height: 70px;
    width: 400px;
    border-radius: 1.25em;
    border: 2px solid #E8E8E8;
    padding-left: 0.625em;
}
.form_reg:focus{
    outline:none;
    border: 2px solid #19191A;
}
.form_reg:hover{
    outline:none;
    border: 2px solid black !important;
    background: none !important;
}
.form_reg_2column{
    width: 70%;
}
.add_to_archive{
    opacity: 0.5;
}
.bread_steps{
    font-size: 10px;
    width: 130px;
    height: 50px;
    display: flex;
    text-align: center;
    background-color: #eaeaea;
    border: 1px solid #A9A9A9;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 0 15px 15px 0;
}
.bread_steps:hover{
    background-color: #c9c9c9;
}
.no-hover {
    pointer-events: none;
  }
/*Автоподсказка по отделам ОСП*/
.autocomplete-list {
    border: 1px solid #ccc;
    background: #fff; /* Белый фон */
    max-height: 250px;
    overflow-y: auto;
    position: absolute;
    z-index: 1000;
    width: 400px;
    margin-top: 5px;
    padding: 5px 0;
    display: none; /* Скрываем поле по умолчанию */
}

.autocomplete-list.active {
    display: block; /* Показываем поле, если есть подсказки */
    background-color: #fff !important; 
    border: none !important;
}
/*Автоподсказка по отделам ОСП для фильра дел*/
.nameTextarea_filtr{
    width: 296px;
    height: 120px;
    border-radius: 10px;
    border: 1px solid #E8E8E8 !important;
    padding: 10px;
    margin-bottom: 40px;
    font-size: 16px;
    resize: none; /* Отключаем возможность изменения размера */
}
.autocomplete_list_filter {
    position: absolute;
    width: 296px;
    margin-top: 5px;
    max-height: 250px;
    overflow-y: auto;
    display: none; /* Скрываем поле по умолчанию */
    z-index: 1000;
    border: 1px solid #ccc;
    background: #fff; /* Белый фон */
    padding: 5px 0;
}
.autocomplete_list_filter.active {
    display: block; /* Показываем поле, если есть подсказки */
    background-color: #fff !important; 
    border: none !important;
}
.suggestion-item {
    padding: 5px 10px;
    cursor: pointer;
    color: #808080; /* Черный текст */
    background: #fff; /* Белый фон */
}
.suggestion-item:hover {
    background-color: #f0f0f0; /* Светло-серый фон при наведении */
    color: #000; /* Черный текст при наведении */
}
/*START-СПИСОК ДЕЛ*/
#bread_crumbs_list_cases{
    margin: 50px 0 20px 65px;
    z-index: 1;
}
.block_cases_filter{
    display: flex;
    width: 100%;
    height: auto;
}
.block_list_cases{
    width: 70%;
    height: auto;
}
.wrap_list_cases {
    overflow: auto;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    width: 100%;
    height: auto;
    display: flex;
    padding: 1.625em 8.75em 1.875em 4.688em;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
}
.btn_list_cases{
    width: 40%;
    height: auto;
    background: #FFFFFF;
    border-radius: 1em;
    border: 1px solid #9999991A;
    box-shadow: 0 -4px 4px 0 #8A8A8A40;
    padding: 20px;
}
.btn_list_cases:focus{
    outline: none;
    background: #e8e8e8;
}
.button_edit {
    width: 200px;
    height: 45px;
    box-sizing: border-box;
    border-radius: 1.25em;
    border: 1px solid #D4D4D4;
    color: #A9A9A9;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    transition: all 0.35s;
    margin: 30px auto 0 auto;
}
.button_edit:hover {
    border: 2px solid #D4D4D4;
    box-shadow: 0 0 0.5em 0em #5e5e5e;
    border-color: #5e5e5e;
    color: #5e5e5e;
    transform: translateY(-0.25em);
}
.button_edit:focus {
    border: 2px solid #363738;
}
.advance{
    border: 1px solid black;
    padding: 10px;
    font-size: 16px !important;
    margin: 0 10px;
}
/*ФИЛЬТР ДЕЛ*/
.block_filter{
    width: 29%;
    height: auto;
    position: sticky;
    top: 150px;
    bottom: 346px;
}
._filter{
    width: 90%;
    height: auto;
    border: 2px solid #E8E8E8;
    border-radius: 16px;
    color: #A9A9A9;
    margin: 25px auto 0 auto;
    padding: 15px;
}
.btns_filter{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.field_sum{
    width: 150px;
    height: 40px;
    border: 1px solid #E8E8E8 !important;
    border-radius: 10px;
    color: #A9A9A9;
    padding-left: 10px;
}
/*Карточка дела для ознакомления*/
.view_case_card{
    padding-top: 50px;
    padding-bottom: 8.75em;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
}
/* КАРТОЧКА ЮЗЕРА */
.user_card{
    padding-top: 50px;
    padding-bottom: 8.75em;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-evenly;
}
.wrap_ratings{
    width: 25%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 -4px 4px 0 #8A8A8A40;
    padding: 20px;
    margin: 0 15px 0 30px;
}
.wrap_ratings_card{
    width: 25%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 -4px 4px 0 #8A8A8A40;
    padding: 20px;
    margin: 0 15px 0 30px;
}
.user_card_reviews{
    width:35%;
    padding: 20px;
}
.user_card_style{
    width: 40%;
    height: auto;
    border-radius: 1em;
    border: 1px solid #9999991A;
    box-shadow: 0 -4px 4px 0 #8A8A8A40;
    padding: 20px;
    /* margin: 10px; */
}
.block_reviews{
    width: 30%;
    height: auto;
    padding: 20px;
    /* margin: 10px 0 0 0; */
}
.wrap_reviews{
    width: 100%;
    height: auto;
    border-radius: 1em;
    border: 1px solid #9999991A;
    box-shadow: 0 -4px 4px 0 #8A8A8A40;
    padding: 20px;
    margin-bottom: 10px;
}
.img_sertificat {
    height: 70px;
    width: 230px;
    padding-left: 20px;
    display: flex;
    justify-content: space-around;
}
.img_sertificat_ex_card {
    height: 70px;
    width: 250px;
    margin-left: 20px;
    display: flex;
    justify-content: space-around;
}
.style_img_sertificat{
    height:60px;
}
.style_img_confirm{
    height:70px;
}
.logo_sub_telega2{
    height:60px;
    width: 95px;
    border-radius: 8px;
}

/*START---СПИСОК ОТЗЫВОВ, С ДЕЙСТВИЯМИ*/
/* .wrap_list_offers{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
} */
.wrap_card_offer{
    display: flex;
    padding-bottom: 1.875em;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: center;
    width: 700px;
}
.card_offer{
    border-radius: 1em;
    width: 100%;
    height: auto;
    background: #FFFFFF;
    border: 1px solid #9999991A;
    box-shadow: 0 4px 4px 0 #8A8A8A40;
    padding: 10px;
    margin-top: 20px;
}
.group_btn_choose_offer{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    margin-top: 20px;
}

.btn_offer{
    border-radius: 1em;
    width: 50%;
    height: auto;
    background: #FFFFFF;
    border: 1px solid #9999991A;
    box-shadow: 0 4px 4px 0 #8A8A8A40;
}
.btn_choose_offers{
    display: flex;
    width: 300px;
    height: 40px;
    border: 1px solid #979695;
    border-radius: 1.25em;
    text-align: center;
    color: #979695;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    margin: 0.5rem;
    transition: all 0.35s;
    box-sizing: border-box;
}
.btn_choose_offers:hover {
    transform: translateY(-0.25em);
    box-shadow: 0 0 0.5em 0em #5e5e5e;
    border-color: #5e5e5e;
    color: #5e5e5e;
}
.btn_choose_offers_off{
    display: flex;
    width: auto;
    height: 40px;
    border-radius: 1.25em;
    justify-content: space-between;
    transition: all 0.35s;
    flex-direction: row;
}
.btn_set_notaccepting{
    margin-left:0 !important;
    background: white !important;
    border: 1px solid #D4D4D4 !important;
    color:#A9A9A9 !important;
}
.btn_set_notaccepting:hover{
    border: 2px solid #D4D4D4 !important;
    box-shadow: 0 0 0.5em 0em #5e5e5e !important;
    border-color: #5e5e5e !important;
    color: #5e5e5e !important;
    transform: translateY(-0.25em) !important;
}
/*END---СПИСОК ОТЗЫВОВ С ДЕЙСТВИЯМИ*/
.block_doc_profile{
    width: 30%;
    height: auto;
    padding: 20px;
    margin: 10px 0 0 0;
}
.img_sertificate {
    display: inline-block;
    position: relative; /* Чтобы псевдоэлемент был относительно ссылки */
    padding-left: 60px; /* Добавляем отступ для псевдоэлемента, если нужно */
}

.img_sertificate::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    background: url("../images/icon_jpg64x64.png") no-repeat center center;
    background-size: cover; /* Масштабирование изображения */
}

/* СТИЛИ ЧАТА ЮЗЕРОВ */
.bread_crumbs_chat {
    height: 2.5em;
    width: 100%;
    padding-left: 55px;
    margin: 60px 0 20px 0;
}
.block_send_list{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.wrap_send_chat{
    width: 100%;
    height: auto;
    padding-left: 4.688em;
}
.list_chat{
    width: 100%;
    height: auto;
}
.item_list_chat_my_mesg{
    width: 90%;
    height: auto;
    border-radius: 16px 0 0 0;
    background: #FAFAFA;
    border: 1px solid #F1F1F1;
    box-shadow: 0 4px 4px 0 #00000014;
    padding: 8px 33px 0 16px;
    margin: 0 auto;
}
.item_list_chat_my_mesg:hover{
    box-shadow: 0 4px 4px 0 #00000057;
}
.item_list_chat_his_mesg{
    width: 520px;
    height: auto;
    border-radius: 16px 0 0 0;
    background: #FFA2160A;
    border: 1px solid #F1F1F1;
    box-shadow: 0 4px 4px 0 #00000014;
    margin-left:30px;
    padding: 8px 9px 0 16px;
}
.item_list_chat_his_mesg:hover{
    box-shadow: 0 4px 4px 0 #00000057;
}
.about_elem{
    width: 80%;
    margin-top: 0.625em;
    padding-left: 10px;
    text-align: left;
}
.block_offer_notif{
    display: flex;
    width: 20%;
    flex-direction: column;
    justify-content: space-evenly;
}
/*START КОНВЕРТ*/
.two_envelope{
    width: 20%;
    margin: 0 auto;
}
.envelope{
    padding-top:100px;
    height: 70px;
}
.notification_exec {
    position: absolute;
    right: 25px;
    top: 10px;
}
.num_envelope {
    width: 25px;
    height: 25px;
    font-size: 15px;
    border-radius: 50%;
    background-color: #E75656;
    color: #FFFFFF;
    text-align: center;
    padding-top: 1px;
    position: absolute;
    bottom: 30px;
    left: 35px;
}
/*Списки дел Взыскателя*/
.wrap_list_offers{
    width: 45%;
    height: auto;
    display: flex;
    flex-direction: column;
    margin: 30px 0 0 40px;
}
.item_list_offers{
    width: 90%;
    margin: 0 auto;
    padding: 10px;
    height: auto;
    box-shadow: 0 4px 4px 0 #00000029;
    border-radius: 1em;
    border: 2px solid #EEEEEE;
    display: flex;
    justify-content: space-between;
}
.container_envelop_manage{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
.block_list_btns{
    width: 100%;
    display: flex;
}
.icon_search{
    padding-top: 2px;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}
.project_contract_all{
    margin: 0 0 50px 30px;
    display: flex;
    text-align: left;
    flex-direction: row;
    align-items: center;
}

.project_contract_all a:hover{
    text-decoration: underline !important;
    text-decoration-color: #7797C6 !important;
    text-decoration-thickness: 2px !important;
}
.item_instruction_sbis{
    text-align: left;
}
.item_instruction_sbis a:hover{
    text-decoration: underline !important;
    text-decoration-color: #7797C6 !important;
    text-decoration-thickness: 2px !important;
}
.style_sertificat{
    height:91px;
    margin-left:250px;
}
/*КОЛОКОЛЬЧИК УВЕДОМЛЕНИЙ*/
.ring{
    padding-top:20px;
}
  .notification {
    position: relative;
    width: 5em; 
    height: 5em;
    fill: #808080;
  }
    /* svg {
      width: 100px; height: 100px;
      } */
     
    /* .bell {
      animation: bell 2.2s linear infinite;
      transform-origin: 50% 0%; 
    } */
    
    .bellClapper {
      animation: bellClapper 2.2s .1s linear infinite;
    }
    
    .num {
    width: 30px;
    height: 30px;
    font-size: 15px;
    border-radius: 50%;
    background-color: #E75656;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 45px;
}

@keyframes bell {
  0%, 25%, 75%, 100% {
    transform: rotate( 0deg );
  }
  40% {
    transform: rotate( 10deg );
  }
  45% {
    transform: rotate( -10deg );
  }
  55% {
    transform: rotate( 8deg );
  }
  60% {
    transform: rotate( -8deg );
  }
}

@keyframes bellClapper {
  0%, 25%, 75%, 100% {
    transform: translateX( 0 );
  }
  40% {
    transform: translateX( -.15em );
  }
  45% {
    transform: translateX( .15em );
  }
  55% {
    transform: translateX( -.1em );
  }
  60% {
    transform: translateX( .1em );
  }
}

@keyframes notification {
  0%, 25%, 75%, 100% {
    opacity: 1;
  }
  30%, 70% {
    opacity: 0;
  }
}
/*END-КОЛОКОЛЬЧИК УВЕДОМЛЕНИЙ*/
.btn_received{
    background:#e8e8e8;
}
/*Стили списка сообщений из чата*/
.block_list_tg{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.wrap_list_chat{
    width: 600px;
    height: auto;
    display: flex;
    flex-direction: column;
    margin: 50px 0 0 40px;
}
.two_tg_comm{
    display:flex;
}
.style_item_chat{
    width: 100%;
    height: auto;
    box-shadow: 0 4px 4px 0 #00000029;
    border-radius: 1em;
    border: 2px solid #EEEEEE;
    display: flex;
}
.subscribe_notice{
       margin-top:150px;
    }
.testarea_chat{
        width:430px;
        height:100px;
    }
/*Стиль блока предазаказов*/
.list_pre_order{
    width: 50%;
    height: auto;
    box-shadow: 0 4px 4px 0 #00000029;
    border-radius: 1em;
    border: 2px solid #EEEEEE;
    margin: 40px;
    padding: 20px;
}
.list_pre_order:hover{
    border: 2px solid black;
}
.block_preorder_list{
    margin-top: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.notif_pers {
    width: 450px;
    height: auto;
    border: 1px solid #E75656;
    border-radius: 16px;
    background: white;
    color: #808080;
    line-height: 180%;
    padding: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 50px auto 0 auto;
}
.under_notif_pers {
    margin-left: auto;
    margin-right: auto;
    width: 450px;
}
.notice_send{
    padding: 20px;
    margin-top: 30px;
    box-shadow: 0px 1px 10px 0px #7797C6;
    border-radius: 1em;
    text-align: left;
    letter-spacing: 0.5px; 
}
/*Блок отчетов*/
.block_report_filter{
    width: 100%;
    height: auto;
    background-color: #f8f9fa;
    display: flex;
    padding: 20px;
}
.block_report{
    width: 50%;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin: 0 auto 50px auto;
}
table.tab_report{
    width: 100%;
    border-collapse: collapse;
    
}
td.column_left{
    width:70%;
    text-align: right;
    border: 1px solid black;
    padding: 8px;
}
td.column_right{
    width:30%;
    text-align: left;
    border: 1px solid black;
    padding: 8px;
}
.btn_num_case{
    width: 45px;
    height: 45px;
    box-sizing: border-box;
    border: 1px solid #D4D4D4;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    transition: all 0.35s;
    margin-left: 10px;
}
.btn_num_case:hover {
    border: 2px solid #D4D4D4;
    box-shadow: 0 0 0.5em 0em #5e5e5e;
    border-color: #5e5e5e;
    color: #5e5e5e;
    transform: translateY(-0.25em);
}
.btn_num_case:focus {
    border: 2px solid #363738;
}
.block_list_and_tg{
    display: flex;
}
/*Формы для эквайринга*/
.tinkoffPayRow {
    display: block;
    margin: 4px;
    width: 260px;
    height: 40px;
    border-radius: 8px;
    padding-left: 10px;
 }

.payform-tbank {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 2px auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: 250px;
}
.payform-tbank-row {
    margin: 2px;
    border-radius: 4px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    border: 1px solid #DFE3F3;
    padding: 15px;
    outline: none;
    background-color: #DFE3F3;
    font-size: 15px;
}
.payform-tbank-row:focus {
    background-color: #FFFFFF;
    border: 1px solid #616871;
    border-radius: 4px;
}
.payform-tbank-btn {
    background-color: #FBC520;
    border: 1px solid #FBC520;
    color: #3C2C0B;
}
.payform-tbank-btn:hover {
    background-color: #FAB619;
    border: 1px solid #FAB619;
}
/*блок тарифов*/
.tarif_title{
    margin: 40px 0 0 55px;
    font-size: 24px !important;
}
.tarif_block{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin: 100px 0 100px 0;
}
.tarif_card{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 270px;
    height: 350px;
    box-shadow: 0px 0px 7px 4px rgba(0, 0, 0, 0.25);
    border-radius: 16px;
    box-sizing: border-box;
    padding: 20px;
}
/* .tarif_card :hover{
    
} */
.block_tarif_card_name_cost{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.item_tarif_card_name_cost{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tarif_card_name{
    margin-bottom: 40px;
    font-size: 24px !important;
}
.btn_buy{
    width: 180px;
    height: 45px;
    border: 2px solid #E75656;
    border-radius: 1.25em;
    background: #E75656;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.35s;
    margin-top: 70px;
}
.btn_buy:hover {
    border: 2px solid #C1C0C0;
    transform: translateY(-0.25em);
    box-shadow: 0 0 0.5em 0em #5e5e5e;
}
  .icon_sertif{
        height:91px;
        margin-left:132px;
    }
/* Блок стилей для адаптивности */
@media screen and (min-width: 320px) and (max-width: 700px){  

    /*Форма регистрации*/
    .form_reg {
        width: 100%;
    }
    .authorization {
        width: 90%;
    }
    .authorization_form{
         width: 100%;
         padding: 20px;
         font-size: small;
    }
    .hellow_acount {
        margin-top: 0;
    }
    .hellow_acount_begin {
        line-height: 180%;
    }
    .hellow_acount_2columns {
        flex-direction: column;
        align-items: center;
    }
    .hellow_acount_2column_bar {
        width: 90%;
    }
    .hellow_acount_2column_bar_item {
        width: 100%;
    }
    .box_bar_item{
        width: 100%;
    }
    .item_with_notice {
        width: 100%;
    }
    #bread_crumbs_list_cases {
        margin: 0 0 40px 10px;
    }
    .notif {
        width: 90%;
        margin: auto;
    }
    .container_video_notif{
        width: 90%;
        margin: auto;
    }
    /*Список чата*/
    .bread_crumbs_chat {
        margin: 10px 0 20px 0;
        padding-left: 20px;
    }
    .wrap_list_chat {
        width: 100%;
        margin: 80px 0 0 0px;
    }
    .item_list_chat_his_mesg {
        width: 90%;
    }
    .item_list_chat_my_mesg {
        width: 90%;
    }
    .block_list_tg {
        flex-direction: column-reverse;
    }
    .subscribe_notice{
        width: 60%;
        margin: 150px auto 0 auto;
    }
    .block_list_and_tg{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    /*Чат комната*/
    .block_send_list {
        flex-direction: column;
    }
    .list_chat {
        width: 90%;
        margin: 0 auto;
    }
    .wrap_send_chat {
        width: 90%;
        padding: 30px 0 0 0;
        margin: 0 auto;
    }
    .testarea_chat{
        width: 100%;
    }
    /*Карточка юзера*/
    .user_card_style {
        width: 100%;
    }
    .user_card_reviews{
        width:100%;
    }
    .block_reviews {
        width: 100%;
    }
    .wrap_ratings{
        width: 100%;
        margin: 0 15px 0 0;
    }
    .wrap_ratings_card{
        width: 100%;
        margin: 0 15px 0 0;
    }
    .review_word{
        display:none;
    }
    .img_sertificat {
        width: 20%;
        margin-left: 5px;
    }
    .img_sertificat_ex_card {
        width: 20%;
        margin-left: 5px;
    }
    .style_img_sertificat{
        height:50px;
    }
    .style_img_confirm{
        height:60px;
    }
    .logo_sub_telega2{
        height: 50px;
        width: 80px;
        border-radius: 8px;
    }
    /*Форма регистрации*/
    .form_reg_all{
        width: 90%;
    }
    /*Форма выбора*/
   .wrap_list_offers {
        width: 100%;
        margin: 30px 0 0 0px;
    }
    .two_envelope{
        width: 20%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .wrap_card_offer{
        width: 100%;
    }
    .btn_choose_offers_off {
        margin-left: 40px;
        border:none;
        width: 100%;
    }
    .two_tg_comm{
       flex-direction: column-reverse;
        align-items: center;
    }
    /*карточка дела*/
    .view_case_card {
        flex-direction: column;
        }
    .btn_list_cases {
        width: 100%;
    }
    .block_doc_profile {
        width: 100%;
    }
    .list_pre_order {
        width: 100%;
        margin: 0;
    }
    .under_notif_pers {
        width: 100%;
    }
    .block_report_filter {
        padding: 0;
    }
    .block_report {
        width: 100%;
    }
    /*блок тарифов*/
    .tarif_block{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .tarif_card{
        width: 90%;
        margin-bottom: 20px;
    }
    .icon_sertif{
        height: 80px;
        width: 110px;
        margin-left:0;
    }
    .demo-video-close {
        width: 32px !important;
        height: 32px !important;
    }
}

/* ============================================================================
   СОВРЕМЕННЫЙ ДИЗАЙН ДЛЯ СТРАНИЦЫ ЗАЯВКИ НА ОТСЛЕЖИВАНИЕ
   Цвета: #7796C6 (основной синий), #FFA216 (оранжевый), #E75656 (красный)
   ============================================================================ */

/* Основной контейнер страницы */
.preorder-page {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Хлебные крошки для страницы предзаказа */
.preorder-breadcrumbs {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 16px 24px;
    margin: 30px 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.preorder-breadcrumbs a {
    color: #7796C6;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.preorder-breadcrumbs a:hover {
    color: #6687b5;
    text-decoration: underline;
}

.preorder-breadcrumbs .guest-mode {
    color: #E75656;
    font-weight: 600;
}

/* Основной контейнер с двумя колонками */
.preorder-container {
    display: flex;
    gap: 32px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Левая колонка - Параметры заявки и форма */
.preorder-left-column {
    flex: 1;
    max-width: 750px;
}

/* Правая колонка - Список исполнителей */
.preorder-right-column {
    flex: 1;
    max-width: 650px;
}

/* Карточка информации о заявке */
.preorder-request-info {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 32px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.preorder-request-info:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.15), 0 12px 20px -8px rgba(0, 0, 0, 0.1);
    border-color: #7796C6;
}

.preorder-request-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #7796C6 0%, #FFA216 50%, #E75656 100%);
}

.preorder-request-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.preorder-request-title::before {
    content: '📋';
    font-size: 1.8rem;
}

.preorder-status {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border: 1px solid #86efac;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    position: relative;
}

.preorder-status::before {
    content: '✅';
    font-size: 1.2rem;
    margin-right: 8px;
}

.preorder-params {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
}

.preorder-param-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #e5e7eb;
    transition: background-color 0.2s ease;
    border-radius: 4px;
    cursor: default;
}

.preorder-param-item:hover {
    background-color: rgba(119, 150, 198, 0.05);
}

.preorder-param-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.preorder-param-label {
    font-weight: 600;
    color: #374151;
    min-width: 200px;
    flex-shrink: 0;
}

.preorder-param-value {
    color: #1f2937;
    font-weight: 500;
}

/* Форма изменения параметров */
.preorder-form {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.preorder-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #7796C6 0%, #FFA216 100%);
}

.preorder-form-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.preorder-form-title::before {
    content: '⚙️';
    font-size: 1.6rem;
}

.preorder-form-section {
    margin-bottom: 32px;
}

.preorder-form-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.preorder-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.preorder-checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f8fafc;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.preorder-checkbox-item:hover {
    background: #f1f5f9;
    border-color: #7796C6;
    transform: translateY(-1px);
}

.preorder-checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    accent-color: #7796C6;
}

.preorder-checkbox-item label {
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    flex: 1;
}

/* Раскрывающиеся секции */
.preorder-expandable {
    margin: 16px 0;
}

.preorder-toggle-button {
    background: linear-gradient(135deg, #7796C6 0%, #6687b5 100%);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 14px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 6px -1px rgba(119, 150, 198, 0.4);
}

.preorder-toggle-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px -3px rgba(119, 150, 198, 0.5);
}

.preorder-toggle-button.collapsed::after {
    content: '▼';
}

.preorder-toggle-button.expanded::after {
    content: '▲';
}

.preorder-expandable-content {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin-top: 12px;
    display: none;
    height: 200px;
    overflow: auto;
}

.preorder-expandable-content.show {
    display: block;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Кнопки формы */
.preorder-form-actions {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    margin-top: 32px;
}

.preorder-agreement {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 12px;
}

.preorder-agreement input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #FFA216;
}

.preorder-agreement label {
    font-weight: 500;
    color: #9a3412;
    line-height: 1.4;
}

.preorder-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
}

.preorder-btn {
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    min-width: 180px;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.preorder-btn-primary {
    background: linear-gradient(135deg, #7796C6 0%, #6687b5 100%);
    color: white !important;
    box-shadow: 0 4px 6px -1px rgba(119, 150, 198, 0.4);
}

.preorder-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px -3px rgba(119, 150, 198, 0.5);
}

.preorder-btn-secondary {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #374151;
    border: 2px solid #d1d5db;
}

.preorder-btn-secondary:hover {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    transform: translateY(-1px);
}

.preorder-btn-special {
    background: linear-gradient(135deg, #FFA216 0%, #f59e0b 100%);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(255, 162, 22, 0.4);
}

.preorder-btn-special:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px -3px rgba(255, 162, 22, 0.5);
}

/* Уведомление о функции "Направить всем" */
.preorder-notice {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #93c5fd;
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 16px;
    position: relative;
}

.preorder-notice::before {
    content: '👆';
    font-size: 1.2rem;
    margin-right: 8px;
}

.preorder-notice-text {
    color: #1e40af;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Список исполнителей */
.preorder-executors {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.preorder-executors::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #FFA216 0%, #E75656 100%);
}

.preorder-executors-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.preorder-executors-title::before {
    content: '👥';
    font-size: 1.6rem;
}

.preorder-telegram-notice {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #86efac;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    color: #14532d;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Карточка исполнителя */
.preorder-executor-card {
    background: linear-gradient(135deg, #ffffff 0%, #fafbff 100%);
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.preorder-executor-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.25);
    border-color: #7796C6;
}

.preorder-executor-card.certified {
    border-color: #FFA216;
    box-shadow: 0 0 0 1px rgba(255, 162, 22, 0.2);
}

.preorder-executor-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.preorder-executor-badges {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: flex-end;
}

.preorder-executor-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.preorder-executor-rating svg {
    color: #FFA216;
    width: 18px;
    height: 18px;
}

.preorder-executor-rating-value {
    font-weight: 600;
    color: #1f2937;
}

.preorder-executor-reviews {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.preorder-executor-reviews svg {
    color: #7796C6;
    width: 16px;
    height: 16px;
}

.preorder-executor-content {
    color: #374151;
    line-height: 1.6;
}

.preorder-executor-content a {
    color: inherit;
    text-decoration: none;
    display: block;
}

.preorder-executor-content a:hover {
    color: #7796C6;
}

.preorder-executor-type {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 12px;
}

.preorder-executor-id {
    font-weight: 600;
    color: #7796C6;
}

.preorder-executor-field {
    margin-bottom: 8px;
}

.preorder-executor-field strong {
    color: #1f2937;
}

/* Сертификаты и подтверждения */
.preorder-executor-certificates {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.preorder-certificate-badge {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.preorder-certificate-badge img {
    max-width: 100%;
    max-height: 100%;
}

/* Кнопки "Показать все" */
.preorder-show-more {
    text-align: center;
    margin-top: 24px;
}

.preorder-show-more .preorder-btn {
    background: linear-gradient(135deg, #E75656 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(231, 86, 86, 0.4);
}

.preorder-show-more .preorder-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px -3px rgba(231, 86, 86, 0.5);
}

/* Уведомление об отсутствии исполнителей */
.preorder-no-executors {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 2px solid #fca5a5;
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    margin: 24px 0;
}

.preorder-no-executors-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preorder-no-executors-icon svg {
    width: 48px;
    height: 48px;
    color: #E75656;
}

.preorder-no-executors-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #991b1b;
    margin-bottom: 12px;
}

.preorder-no-executors-text {
    color: #7f1d1d;
    line-height: 1.6;
    margin-bottom: 24px;
}

/* Адаптивность */
@media (max-width: 1200px) {
    .preorder-container {
        flex-direction: column;
        gap: 24px;
    }
    
    .preorder-left-column,
    .preorder-right-column {
        max-width: none;
    }
}

@media (max-width: 768px) {
    .preorder-container {
        padding: 0 16px;
        gap: 20px;
    }
    
    .preorder-request-info,
    .preorder-form,
    .preorder-executors {
        padding: 20px;
    }
    
    .preorder-request-title,
    .preorder-form-title,
    .preorder-executors-title {
        font-size: 1.2rem;
    }
    
    .preorder-executor-card {
        padding: 16px;
    }
    
    .preorder-executor-header {
        flex-direction: column;
        gap: 12px;
    }
    
    .preorder-executor-badges {
        flex-direction: row;
        align-items: center;
        align-self: stretch;
        justify-content: space-between;
    }
    
    .preorder-checkbox-group {
        flex-direction: column;
    }
    
    .preorder-buttons {
        gap: 10px;
        flex-direction: column;
    }
    
    .preorder-btn {
        min-width: auto;
        width: 100%;
        padding: 8px 16px;
        font-size: 0.85rem;
    }
}

/* Классы для вынесения inline стилей */
.preorder-demo-status {
    color: #E75656;
}

.preorder-guest-mode {
    color: #E75656;
}

.preorder-telegram-banner {
    text-align: center;
}

.preorder-telegram-banner img {
    max-width: 100%;
    height: auto;
    cursor: pointer;
}

/* ============================================================================= */
/*                        СТИЛИ ДЛЯ СТРАНИЦЫ ЗАЯВКИ ИСПОЛНИТЕЛЯ               */
/*                        (pre_order_exec.php)                                */
/*                                          */
/* ============================================================================= */

/* Основной контейнер страницы */
.exec-page {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}



.exec-guest-mode {
    color: #E75656;
    font-weight: 600;
}

.exec-demo-status {
    color: #E75656;
}

/* Основной контейнер с двумя колонками */
.exec-container {
    display: flex;
    gap: 32px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Левая колонка - Параметры заявки и форма */
.exec-left-column {
    flex: 1;
    max-width: 750px;
}

/* Правая колонка - Список дел */
.exec-right-column {
    flex: 1;
    max-width: 650px;
}

/* Карточка информации о заявке */
.exec-request-info {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 32px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.exec-request-info:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.15), 0 12px 20px -8px rgba(0, 0, 0, 0.1);
    border-color: #7796C6;
}

.exec-request-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #7796C6 0%, #FFA216 50%, #E75656 100%);
}

.exec-request-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.exec-request-title::before {
    content: '📋';
    font-size: 1.8rem;
}

.exec-status {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border: 1px solid #86efac;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    position: relative;
}

.exec-status::before {
    content: '✅';
    font-size: 1.2rem;
    margin-right: 8px;
}

.exec-params {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
}

.exec-param-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #e5e7eb;
    transition: background-color 0.2s ease;
    border-radius: 4px;
}

.exec-param-item:hover {
    background-color: rgba(119, 150, 198, 0.05);
}

.exec-param-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.exec-param-label {
    font-weight: 600;
    color: #374151;
    min-width: 200px;
    flex-shrink: 0;
}

.exec-param-value {
    color: #1f2937;
    font-weight: 500;
}

/* Форма изменения параметров */
.exec-form {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.exec-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #7796C6 0%, #FFA216 100%);
}

.exec-form-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.exec-form-title::before {
    content: '⚙️';
    font-size: 1.6rem;
}

.exec-form-section {
    margin-bottom: 32px;
}

.exec-form-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Поля ввода суммы */
.exec-sum-inputs {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.exec-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 150px;
}

.exec-input-group label {
    font-weight: 500;
    color: #374151;
}

.exec-field-sum {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.2s ease;
    background: #ffffff;
}

.exec-field-sum:focus {
    outline: none;
    border-color: #7796C6;
    box-shadow: 0 0 0 3px rgba(119, 150, 198, 0.1);
}

.exec-field-sum:hover {
    border-color: #d1d5db;
}

/* Группы чекбоксов */
.exec-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.exec-checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f8fafc;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.exec-checkbox-item:hover {
    background: #f1f5f9;
    border-color: #7796C6;
    transform: translateY(-1px);
}

.exec-checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    accent-color: #7796C6;
}

.exec-checkbox-item label {
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    flex: 1;
}

/* Раскрывающиеся секции */
.exec-expandable {
    margin: 16px 0;
}

.exec-toggle-button {
    background: linear-gradient(135deg, #7796C6 0%, #6687b5 100%);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 14px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 6px -1px rgba(119, 150, 198, 0.4);
    margin: 8px 0;
}

.exec-toggle-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px -3px rgba(119, 150, 198, 0.5);
}

.exec-toggle-button.collapsed::after {
    content: '▼';
}

.exec-toggle-button.expanded::after {
    content: '▲';
}

.exec-expandable-content {
    height: 200px;
    overflow: auto;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin-top: 12px;
    display: none;
}

.exec-expandable-content.show {
    display: block;
    animation: slideDown 0.3s ease-out;
}

/* Кнопки формы */
.exec-form-actions {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    margin-top: 32px;
}

.exec-agreement {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 12px;
}

.exec-agreement input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #FFA216;
}

.exec-agreement label {
    font-weight: 500;
    color: #9a3412;
    line-height: 1.4;
}

.exec-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
}

.exec-btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    min-width: 180px;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.exec-btn-primary {
    background: linear-gradient(135deg, #7796C6 0%, #6687b5 100%);
    color: white !important;
    box-shadow: 0 4px 6px -1px rgba(119, 150, 198, 0.4);
}

.exec-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px -3px rgba(119, 150, 198, 0.5);
}

.exec-btn-secondary {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #374151;
    border: 2px solid #d1d5db;
}

.exec-btn-secondary:hover {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    transform: translateY(-1px);
}

/* Список дел */
.exec-cases {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.exec-cases::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #FFA216 0%, #E75656 100%);
}

.exec-cases-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.exec-cases-title::before {
    content: '📊';
    font-size: 1.6rem;
}

.exec-telegram-notice {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #86efac;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    color: #14532d;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Карточка дела */
.exec-case-card {
    background: linear-gradient(135deg, #ffffff 0%, #fafbff 100%);
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.exec-case-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.25);
    border-color: #7796C6;
}

.exec-case-content a {
    color: inherit;
    text-decoration: none;
    display: block;
}

.exec-case-content a:hover {
    color: #7796C6;
}

.exec-case-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.exec-case-number {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
}

.exec-case-amount {
    font-size: 1.2rem;
    font-weight: 700;
    color: #059669;
    padding: 8px 16px;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-radius: 8px;
    border: 1px solid #86efac;
}

.exec-case-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.exec-case-field {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.exec-case-label {
    font-weight: 500;
    color: #6b7280;
    min-width: 150px;
    flex-shrink: 0;
}

.exec-case-value {
    color: #1f2937;
    text-align: right;
    flex: 1;
}

/* Уведомление об отсутствии дел */
.exec-no-cases {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 2px solid #fca5a5;
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    margin: 24px 0;
}

.exec-no-cases-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exec-no-cases-icon svg {
    width: 48px;
    height: 48px;
    color: #E75656;
}

.exec-no-cases-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #991b1b;
    margin-bottom: 12px;
}

.exec-no-cases-text {
    color: #7f1d1d;
    line-height: 1.6;
    margin-bottom: 24px;
}

/* Кнопки "Показать все" */
.exec-show-more {
    text-align: center;
    margin-top: 24px;
}

.exec-show-more .exec-btn {
    background: linear-gradient(135deg, #E75656 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(231, 86, 86, 0.4);
}

.exec-show-more .exec-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px -3px rgba(231, 86, 86, 0.5);
}

/* Telegram баннер */
.exec-telegram-banner {
    text-align: center;
    padding: 20px 0;
}

.exec-telegram-banner img {
    max-width: 100%;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.exec-telegram-banner img:hover {
    transform: scale(1.05);
}

/* Адаптивность */
@media (max-width: 1200px) {
    .exec-container {
        flex-direction: column;
        gap: 24px;
    }
    
    .exec-left-column,
    .exec-right-column {
        max-width: none;
    }
}

@media (max-width: 768px) {
    .exec-page {
        padding: 0;
    }
    
    .exec-container {
        padding: 0 16px;
        gap: 20px;
        margin: 0;
    }
    
    .exec-request-info,
    .exec-form,
    .exec-cases {
        padding: 20px;
        margin-bottom: 20px;
        border-radius: 16px;
    }
    
    .exec-request-title,
    .exec-form-title,
    .exec-cases-title {
        font-size: 1.2rem;
        text-align: center;
    }
    
    .exec-case-card {
        padding: 16px;
        margin-bottom: 16px;
    }
    
    .exec-case-header {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        padding: 12px 16px;
    }
    
    .exec-case-field {
        flex-direction: column;
        text-align: left;
        gap: 4px;
        padding: 6px 8px;
    }
    
    .exec-case-label {
        min-width: auto;
        font-size: 0.9rem;
    }
    
    .exec-case-value {
        text-align: left;
        font-size: 0.9rem;
    }
    
    .exec-checkbox-group {
        flex-direction: column;
        gap: 12px;
    }
    
    .exec-checkbox-item {
        padding: 12px;
        font-size: 0.9rem;
    }
    
    .exec-buttons {
        gap: 12px;
        flex-direction: column;
    }
    
    .exec-btn {
        min-width: auto;
        width: 100%;
        padding: 12px 16px;
        font-size: 0.95rem;
    }
    
    .exec-sum-inputs {
        flex-direction: column;
        gap: 12px;
    }
    
    .exec-field-sum {
        padding: 12px 14px;
        font-size: 16px; /* Предотвращает зум на iOS */
    }
    
    .exec-toggle-button {
        padding: 12px 16px;
        font-size: 0.9rem;
        width: 100%;
        justify-content: center;
    }
    
    .exec-expandable-content {
        padding: 16px;
    }
    
    .exec-form-section {
        margin-bottom: 24px;
    }
    
    .exec-agreement {
        padding: 12px;
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
    
    .exec-agreement label {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .exec-page {
        padding: 0;
        background: #f8fafc;
    }
    
    .exec-container {
        padding: 0 12px;
        gap: 16px;
    }
    
    .exec-request-info,
    .exec-form,
    .exec-cases {
        padding: 16px;
        margin-bottom: 16px;
        border-radius: 12px;
    }
    
    .exec-request-title,
    .exec-form-title,
    .exec-cases-title {
        font-size: 1.1rem;
        flex-direction: column;
        text-align: center;
        gap: 8px;
        margin-bottom: 16px;
    }
    
    .exec-case-amount {
        font-size: 1rem;
        padding: 6px 12px;
    }
    
    .exec-form-section-title {
        font-size: 1rem;
        margin-bottom: 12px;
    }
    
    .exec-field-sum {
        padding: 14px 16px;
        font-size: 16px;
        border-radius: 8px;
    }
    
    .exec-checkbox-item {
        padding: 14px;
        margin-bottom: 8px;
    }
    
    .exec-btn {
        padding: 14px 20px;
        font-size: 1rem;
        border-radius: 10px;
    }
    
    .exec-toggle-button {
        padding: 14px 18px;
        font-size: 0.95rem;
    }
    
    .exec-form-actions {
        padding: 16px;
    }
    
    .exec-agreement {
        padding: 16px;
        border-radius: 10px;
    }
    
    .exec-case-card {
        padding: 14px;
        border-radius: 12px;
    }
    
    .exec-case-header {
        padding: 12px;
        border-radius: 8px;
    }
    
    .exec-case-field {
        padding: 8px 10px;
        border-radius: 6px;
        margin-bottom: 8px;
    }
    
    .exec-no-cases {
        padding: 24px 16px;
        margin: 16px 0;
    }
    
    .exec-no-cases-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 16px;
    }
    
    .exec-no-cases-icon svg {
        width: 36px;
        height: 36px;
    }
    
    .exec-telegram-banner {
        padding: 16px 0;
    }
    
    /* Улучшенный touch-friendly дизайн */
    .exec-checkbox-item input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }
    
    .exec-agreement input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }
}
/* Дополнительные стили для улучшения мобильного опыта */
@media (max-width: 768px) {
    /* Улучшение горизонтального скроллинга на мобильных */
    .exec-page {
        overflow-x: hidden;
    }
    
    /* Стили для expandable секций на мобильных */
    .exec-expandable-content {
        max-height: 300px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Улучшение чекбоксов для touch устройств */
    .exec-checkbox-item {
        min-height: 44px; /* Минимальный размер для touch */
        align-items: center;
    }
    
    .exec-checkbox-item input[type="checkbox"] {
        min-width: 18px;
        min-height: 18px;
    }
    
    /* Стили для кнопок на мобильных */
    .exec-btn {
        min-height: 48px; /* Минимальный размер для touch */
        touch-action: manipulation; /* Убирает задержку клика */
    }
    
    /* Улучшение полей ввода */
    .exec-field-sum {
        min-height: 48px;
        box-sizing: border-box;
    }
    
    /* Стили для telegram баннера */
    .exec-telegram-banner img {
        max-width: 120px;
        height: auto;
    }
}

/* Ландшафтная ориентация на мобильных */
@media (max-width: 768px) and (orientation: landscape) {
    .exec-container {
        padding: 0 20px;
    }
    
    .exec-request-info,
    .exec-form,
    .exec-cases {
        padding: 16px;
    }
    
    .exec-case-card {
        padding: 12px;
    }
}

/* Высокая плотность пикселей (retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .exec-request-info::before,
    .exec-form::before,
    .exec-cases::before {
        height: 3px; /* Более четкая граница на retina */
    }
}
/* Блок стилей для АДАПТИВНОСТИ */
@media screen and (min-width: 701px) and (max-width: 1200px) {
    /*Форма регистрации*/
    .form_reg {
        width: 100%;
    }
    .hellow_acount_begin {
        padding: 50px 0 40px 10px;
        line-height: 180%;
    }
    .hellow_acount_2columns {
        flex-direction: column;
        align-items: center;
    }
    .hellow_acount_2column_bar {
        width: 50%;
    }
    .hellow_acount_2column_bar_item {
        width: 100%;
    }
    #bread_crumbs_list_cases {
        margin: 50px 0 40px 30px;
    }
    .bread_crumbs_chat {
        padding-left: 20px;
        margin: 20px 0 20px 0;
    }
    .block_list_and_tg{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    /*Список чата*/
    
    .wrap_list_chat {
        width: 50%;
        margin: 80px auto 0 auto;
    }
    .item_list_chat_his_mesg {
        width: 90%;
    }
    .item_list_chat_my_mesg {
        width: 100%;
    }
    .block_list_tg {
        flex-direction: column-reverse;
        margin-top: 50px;
    }
    .subscribe_notice{
        margin: 150px auto 0 auto;
    }
    /*Чат комната*/
    .block_send_list {
        flex-direction: column;
    }
    .list_chat {
        width: 50%;
        padding: 70px 0 0 0;
        margin: 0 auto;
    }
    .wrap_send_chat {
        width: 50%;
        padding: 30px 0 0 0;
        margin: 0 auto;
    }
    .testarea_chat{
        width: 100%;
    }
    /*Карточка юзера*/
    .user_card_style {
        width: 100%;
    }
    .user_card_reviews{
        width:100%;
    }
    .block_reviews {
        width: 100%;
    }
    .wrap_ratings{
        width: 100%;
        margin: 0 15px 0 0;
    }
    .wrap_ratings_card{
        width: 50%;
        margin: 0 15px 0 0;
    }
    .img_sertificat{
        margin-left:0;
    }
    /*Форма регистрации*/
    .form_reg_all{
        width: 50%;
    }
    /*Форма выбора*/
   .wrap_list_offers {
        width: 60%;
        margin: 30px 0 0 0px;
    }
    .two_envelope{
        width: 20%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .wrap_card_offer{
        width: 100%;
    }
    .btn_choose_offers_off {
        border:none;
        width: 100%;
    }
    .two_tg_comm{
       flex-direction: column-reverse;
        align-items: center;
    }
    /*карточка дела*/
    .view_case_card {
        flex-direction: column;
        align-items: center;
        }
    .btn_list_cases {
        width: 50%;
    }
    .block_doc_profile {
        width: 100%;
    }
    .list_pre_order {
        width: 100%;
        margin: 0;
    }
    /*блок тарифов*/
    .tarif_block{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .tarif_card{
        width: 50%;
        margin-bottom: 20px;
    }
     .icon_sertif{
        height: 80px;
        width: 110px;
        margin-left:0;
    }
}

/* ============================================================================= */
/*                        СТИЛИ ДЛЯ ПРОФИЛЯ ВЗЫСКАТЕЛЯ                        */
/*                        (cred_profile_fixed.php)                            */
/* ============================================================================= */

/* ========== Основной контейнер профиля ========== */
.profile-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background: #f8fafc;
    min-height: 100vh;
}

/* ============================================================================= */
/*                               AUTH: СТРАНИЦА ВХОДА                          */
/*                      Изолированные селекторы с префиксом authx-              */
/*        Цвета: базовый #7796C6; акценты #FFA216; предупреждения #E75656       */
/* ============================================================================= */
.authx-page { 
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    padding: 40px 16px 80px;
}
.authx-container { max-width: 720px !important; margin: 0 auto; }
.authx-title { font-size: 28px !important; font-weight: 700 !important; color: #1f2937 !important; margin: 12px 0 4px; text-align: center; }
.authx-subtitle { color: #6b7280; margin-bottom: 20px; text-align: center; }

.authx-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    /* Добавлен цветной бокс-шадоу с базовым цветом #7796C6 */
    box-shadow: 0 8px 30px rgba(0,0,0,0.06), 0 0 0 3px rgba(119,150,198,0.25);
    padding: 28px;
    width: 40%;
    margin: 0 auto;
}
.authx-form { display: flex; flex-direction: column; gap: 16px; }
.authx-field { display: flex; flex-direction: column; gap: 6px; }
.authx-label { font-weight: 600; color: #374151; }
.authx-input {
    height: 44px;
    border-radius: 10px;
    border: 2px solid #E8E8E8;
    padding: 8px 12px;
    font-size: 16px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.authx-input:focus {
    outline: none;
    border-color: #7796C6; /* базовый */
    box-shadow: 0 0 0 3px rgba(119,150,198,0.25);
}

.authx-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.authx-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 150px; height: 44px; padding: 0 18px; border-radius: 10px;
    font-weight: 600; cursor: pointer; text-decoration: none;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
    border: 2px solid transparent;
}
.authx-btn--primary { background: #FFA216; border-color: #FFA216; color: #111827; }
.authx-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(255,162,22,0.35); }
.authx-btn--ghost { background: #ffffff; color: #374151; border-color: #d1d5db; }
.authx-btn--ghost:hover { background: #f9fafb; transform: translateY(-1px); }

.authx-alert {
    background: #FDECEC; /* светлый фон предупреждения */
    border: 1px solid #E75656; /* акцент ошибки */
    color: #991B1B;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

.authx-success {
    background: #E8F5E9; /* светлый зелёный фон */
    border: 1px solid #4CAF50; /* зелёный акцент */
    color: #1B5E20;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

.authx-links { display: flex; gap: 16px; flex-direction: column; align-items: center; margin-top: 18px; }
.authx-links-item { display: flex; gap: 8px; color: #6b7280; }
.authx-links-item a { color: #7796C6; font-weight: 600; text-decoration: none; }
.authx-links-item a:hover { text-decoration: underline; }

@media (min-width: 768px) {
    .authx-page { padding-top: 80px; }
}

@media (max-width: 480px) {
    .authx-card { padding: 18px; border-radius: 12px; width: 100%; }
    .authx-title { font-size: 22px; }
    .authx-btn { width: 100%; min-width: 0; }
    .authx-actions { flex-direction: column; align-items: stretch; }
}

.profile-header {
    text-align: center;
    margin-bottom: 2rem;
    padding: 2rem;
    background: linear-gradient(135deg, #7797C6 0%, #a8c0e8 100%);
    color: white;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
}

.profile-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255,255,255,0.1) 10px,
        rgba(255,255,255,0.1) 20px
    );
    animation: shimmer 20s linear infinite;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.profile-header:hover::before {
    opacity: 1;
}

.profile-title {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
    position: relative;
    z-index: 2;
    color: #ffffff !important;
}

.profile-id {
    font-size: 1.2rem;
    opacity: 0.9;
    position: relative;
    z-index: 2;
}

/* ========== Сетка профиля ========== */
.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.profile-section {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.profile-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.section-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-icon {
    font-size: 1.2rem;
}

/* ========== Рейтинг ========== */
.overall-rating {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 12px;
}

.rating-score {
    font-size: 3rem;
    font-weight: 700;
    color: #f59e0b;
    margin-bottom: 0.5rem;
}

.rating-stars {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
}

.star-icon {
    width: 24px;
    height: 24px;
}

.rating-breakdown {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rating-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
}

.rating-label {
    font-weight: 500;
    color: #374151;
}

.rating-value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rating-number {
    font-weight: 600;
    color: #1f2937;
    min-width: 20px;
}

/* ========== Отзывы ========== */
.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.review-item {
    padding: 1.5rem;
    background: #f8fafc;
    border-radius: 10px;
    border-left: 4px solid #7797C6;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #6b7280;
}

.review-text {
    color: #374151;
    line-height: 1.6;
}

.no-reviews {
    text-align: center;
    color: #6b7280;
    font-style: italic;
    padding: 2rem;
}

/* ========== Информация о пользователе ========== */
.status-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border-radius: 8px;
}

.status-item.verified {
    background: #dcfce7;
    border: 1px solid #22c55e;
}

.status-item.certified {
    background: #dbeafe;
    border: 1px solid #3b82f6;
}

.status-icon {
    width: 32px;
    height: 32px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-item.full-width {
    grid-column: 1 / -1;
}

.info-item label {
    font-weight: 500;
    color: #6b7280;
    font-size: 0.9rem;
}

.info-item span {
    color: #1f2937;
    font-weight: 500;
}

/* ========== Документы ========== */
.documents-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.document-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
}

.document-item label {
    font-weight: 500;
    color: #374151;
}

.document-link {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
}

.document-link:hover {
    text-decoration: underline;
}

.document-missing {
    color: #ef4444;
    font-style: italic;
}

/* ========== Аватар ========== */
.avatar-section {
    text-align: center;
}

.current-avatar {
    margin-bottom: 1rem;
}

.avatar-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid #7797C6;
    object-fit: cover;
}

.avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.avatar-option {
    display: block;
    text-decoration: none;
}

.avatar-option-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #e5e7eb;
    transition: border-color 0.3s ease;
    object-fit: cover;
}

.avatar-option-image:hover {
    border-color: #7797C6;
}

/* ========== Действия профиля ========== */
/* .profile-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
} */

/* ========== Ошибка доступа ========== */
.access-denied {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 2rem;
    position: relative;
}

.access-denied-content {
    text-align: center;
    background: white;
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    max-width: 500px !important;
    border-top: 5px solid #ef4444;
    margin: 0 auto;
}

.access-denied-icon {
    margin-bottom: 1.5rem;
}

.access-denied-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1rem;
}

.access-denied-message {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.access-denied-actions {
    margin-top: 1.5rem;
}

/* ========== Кнопки ========== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.btn-primary {
    background: #7797C6;
    color: white !important;
}

.btn-primary:hover {
    background: #6687b6;
    transform: translateY(-2px);
    color: white !important;
}

.btn-secondary {
    background: #6b7280;
    color: white !important;
}

.btn-secondary:hover {
    background: #4b5563;
    transform: translateY(-2px);
}

.btn-warning {
    background: #f59e0b;
    color: white !important;
}

.btn-warning:hover {
    background: #d97706;
    transform: translateY(-2px);
    color: white !important;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 0.9rem;
}

.btn-icon {
    font-size: 1rem;
}

/* ========== Адаптивность ========== */
@media (max-width: 768px) {
    .profile-container {
        padding: 1rem;
    }
    
    .profile-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .profile-section {
        padding: 1.5rem;
    }
    
    .profile-title {
        font-size: 2rem;
    }
    
    .rating-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .profile-actions {
        flex-direction: column;
        align-items: center;
    }
}

/* ============================================================================= */
/*                     ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ДЛЯ ПРОФИЛЯ ИСПОЛНИТЕЛЯ           */
/*                     (executor_profile_fixed.php)                           */
/* ============================================================================= */

/* ========== Уведомления и статусы ========== */
.success-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #10b981;
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    z-index: 1000;
    transition: opacity 0.3s ease;
}

.status-warning {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    color: #92400e;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 600;
}

/* ========== Навигация (хлебные крошки) ========== */
.breadcrumb {
    margin-bottom: 20px;
    font-size: 14px;
}

.breadcrumb-link {
    color: #6b7280;
    text-decoration: none;
}

.breadcrumb-link:hover {
    color: #7797C6;
}

.breadcrumb-separator {
    margin: 0 8px;
    color: #9ca3af;
}

.breadcrumb-current {
    color: #1f2937;
    font-weight: 500;
}

/* ========== Звёзды рейтинга ========== */
.star {
    color: #fbbf24;
    font-size: 18px;
    margin-right: 2px;
}

.star.active {
    color: #f59e0b;
}

.rating-subtitle {
    margin-top: 10px;
    color: #6b7280;
    font-size: 14px;
}

/* ========== Управление статусами ========== */
.status-management {
    margin-top: 30px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 8px;
}

.status-management h3 {
    margin-bottom: 15px;
    color: #1f2937;
}

.status-current {
    font-weight: 600;
    margin-bottom: 15px;
}

.status-current.success {
    color: #10b981;
}

.status-current.error {
    color: #ef4444;
}

.status-form {
    margin-top: 10px;
}

/* ========== Отзывы ========== */
.review-error {
    color: #ef4444;
    text-align: center;
    padding: 20px;
    font-style: italic;
}

.reviews-actions {
    text-align: center;
    margin-top: 20px;
}

/* ========== Адаптивность для исполнителя ========== */
@media (max-width: 768px) {
    .success-notification {
        top: 10px;
        right: 10px;
        left: 10px;
        text-align: center;
    }
    
    .breadcrumb {
        font-size: 12px;
    }
    
    .profile-title {
        font-size: 1.8rem;
    }
    
    .rating-score {
        font-size: 2.5rem;
    }
}

/* ============================================================================= */
/*                        СТИЛИ ДЛЯ СПИСКА СООБЩЕНИЙ ЧАТА                     */
/*                        (list_chat_fixed.php)                               */
/* ============================================================================= */

/* ========== Основной контейнер чата ========== */
.chat-container {
    max-width: 800px !important;
    margin: 0 auto;
    padding: 2rem;
    background: #f8fafc;
    min-height: 100vh;
}

.chat-header {
    max-width: 800px !important;
    text-align: center;
    margin: 2rem auto;
    padding: 1rem;
    background: linear-gradient(135deg, #7797C6 0%, #a8c0e8 100%);
    color: white;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
}

.chat-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255,255,255,0.1) 10px,
        rgba(255,255,255,0.1) 20px
    );
    animation: shimmer 20s linear infinite;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.chat-header:hover::before {
    opacity: 1;
}

.chat-title {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #ffff !important;
    margin: 0;
    position: relative;
    z-index: 2;
}

.chat-icon {
    font-size: 2.5rem;
    margin-right: 1rem;
}

.chat-info {
    text-align: center;
    color: #6b7280;
    margin-bottom: 1rem;
    font-style: italic;
}

/* ========== Индикаторы гостевого режима ========== */
.guest-mode {
    color: #ef4444;
    font-weight: 700;
}

.guest-indicator {
    color: #ef4444;
    font-weight: 700;
}

/* ========== Личный кабинет взыскателя ========== */
.creditor-account-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem; /* Mobile-first: tighter padding on small screens */
}

.account-breadcrumb {
    margin-bottom: 2rem;
    padding: 1rem;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.breadcrumb-icon {
    margin-right: 0.5rem;
}

.demo-account {
    color: #e75656 !important;
    font-weight: 600;
}

.guest-mode {
    color: #ef4444;
    font-weight: 600;
}

/* ========== Карточка отказа в доступе ========== */
.access-denied-card {
    max-width: 800px !important;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 2px solid #ef4444;
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    margin: 2rem auto;
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.2);
}

.access-denied-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.access-denied-content h3 {
    color: #dc2626;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.access-denied-content p {
    color: #7f1d1d;
    margin-bottom: 2rem;
}

/* ========== Telegram подписка для аккаунта ========== */
.account-telegram {
    margin: 2rem 0;
    border-radius: 15px;
    padding: 1.5rem;
}

/* ========== Демо видео контейнер ========== */
.demo-video-container {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid #0ea5e9;
    border-radius: 15px;
    padding: 1rem 2rem 3rem;
    margin: 2rem auto;
    text-align: center;
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.2);
    width: 400px;
}

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

.demo-video-header h3 {
    color: #0c4a6e;
    margin: 0;
}

.video-duration {
    background: #0ea5e9;
    color: white !important;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.875rem;
    font-weight: 500;
}

.demo-video-player {
    width: 100%;
    max-width: 560px; /* Up to standard embed width on larger screens */
    aspect-ratio: 16 / 9; /* Mobile-first responsive video area */
    margin: 0 auto;
}

/* Fluid media inside creditor account */
.creditor-account-container img,
.creditor-account-container video,
.creditor-account-container iframe {
    max-width: 100%;
    height: auto;
}

/* ========== Дашборд кабинета ========== */
.account-dashboard {
    margin-top: 2rem;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile-first: single column */
    gap: 1rem; /* Compact spacing on mobile */
    align-items: start;
    grid-auto-rows: auto; /* Let rows size to content on mobile */
}

.dashboard-column {
    display: grid;
    grid-template-rows: auto; /* Mobile-first: natural heights */
    gap: 1rem;
    align-content: start;
}

/* Actions grid inside cards — mobile-first */
.card-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }

/* ========== Карточки дашборда ========== */
.dashboard-card {
    background: white;
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    display: flex !important;
    flex-direction: column !important;
    height: auto !important; /* Mobile-first: allow natural height */
    min-height: 0 !important;
    max-height: none;
    border: 2px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
}

.dashboard-card.card-animate {
    animation: slideInUp 0.6s ease forwards;
}

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

.dashboard-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(119, 151, 198, 0.2);
    border-color: #7797C6;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Дополнительные hover эффекты для элементов внутри карточки */
.dashboard-card:hover .card-icon {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

.dashboard-card:hover .notification-badge {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(231, 86, 86, 0.4);
    transition: all 0.3s ease;
}

.dashboard-card.disabled-card {
    opacity: 0.7;
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border-color: #d1d5db;
    min-height: 280px;
    display: flex;
    flex-direction: column;
}

.dashboard-card.demo-restricted {
    position: relative;
    min-height: 280px;
    display: flex;
    flex-direction: column;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    position: relative;
    flex-shrink: 0;
    min-height: auto;
    background: linear-gradient(135deg, #7797C6 0%, #a8c0e8 100%);
    color: white;
    padding: 1rem;
    border-radius: 10px;
    margin: -0.5rem -0.5rem 1rem -0.5rem;
    overflow: hidden;
}

.card-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 8px,
        rgba(255,255,255,0.1) 8px,
        rgba(255,255,255,0.1) 16px
    );
    animation: shimmer 15s linear infinite;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.card-header:hover::before {
    opacity: 1;
}

.card-header h3 {
    flex-grow: 1;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
    position: relative;
    z-index: 1;
}

.card-icon {
    font-size: 2rem;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.2));
    position: relative;
    z-index: 1;
}

.card-header h3 {
    color: #1f2937;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.notification-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: #E75656;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(231, 86, 86, 0.3);
    z-index: 2;
    border: 2px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.creditor-account-container .dashboard-card.dashboard-card-candidate-choice {
    overflow: visible !important;
}

.creditor-account-container .dashboard-card.dashboard-card-candidate-choice .card-grid {
    overflow: visible;
}

.creditor-account-container .cred-card-btn.cred-card-btn-candidate-alert {
    position: relative;
    overflow: visible !important;
    isolation: isolate;
}

.creditor-account-container .cred-card-btn.cred-card-btn-candidate-alert .action-icon,
.creditor-account-container .cred-card-btn.cred-card-btn-candidate-alert .action-text {
    position: relative;
    z-index: 1;
}

.candidate-alert-badge {
    position: absolute;
    top: -0.95rem;
    right: -0.55rem;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 999px;
    background: #FFA216;
    color: #ffffff;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 4px rgba(255, 162, 22, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    z-index: 8;
    animation: candidateAlertBlink 3.4s ease-in-out infinite;
}

.candidate-alert-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    transform: scaleX(-1);
}

@keyframes candidateAlertBlink {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 4px rgba(255, 162, 22, 0.18);
    }
    50% {
        opacity: 0.78;
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(255, 162, 22, 0.10);
    }
}

.cred-candidate-link.cred-candidate-link-alert {
    position: relative;
    overflow: visible !important;
    isolation: isolate;
}

.cred-candidate-link.cred-candidate-link-alert .cred-candidate-icon,
.cred-candidate-link.cred-candidate-link-alert .cred-candidate-text,
.cred-candidate-link.cred-candidate-link-alert .cred-candidate-count {
    position: relative;
    z-index: 1;
}

.candidate-alert-badge-inline {
    top: -0.8rem;
    right: -0.55rem;
}

.executor-account-container .dashboard-card.dashboard-card-offers-choice {
    overflow: visible !important;
}

.executor-account-container .dashboard-card.dashboard-card-offers-choice .card-grid {
    overflow: visible;
}

.executor-account-container .ex-card-btn.ex-card-btn-offer-alert {
    position: relative;
    overflow: visible !important;
    isolation: isolate;
}

.executor-account-container .ex-card-btn.ex-card-btn-offer-alert .action-icon,
.executor-account-container .ex-card-btn.ex-card-btn-offer-alert .action-text {
    position: relative;
    z-index: 1;
}

.card-content {
    margin-bottom: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 60px;
    max-height: 100px;
    overflow: hidden;
}

.card-content p {
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
    text-align: center;
    font-size: 0.95rem;
}

.restriction-text {
    color: #dc2626;
    font-weight: 500;
    font-style: italic;
}

/* ========== Сетка действий в карточке ========== */
.card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: auto;
}

.card-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    text-decoration: none;
    color: #334155;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.card-action:hover {
    background: linear-gradient(135deg, #7797C6 0%, #a8c0e8 100%);
    color: white;
    border-color: #7797C6;
    transform: scale(1.05);
}

.card-action.disabled {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    color: #9ca3af;
    border-color: #d1d5db;
    cursor: not-allowed;
    pointer-events: none;
}

.card-action-full {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #7797C6 0%, #a8c0e8 100%);
    color: white;
    border: none;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: auto;
}

.card-action-full:hover {
    background: linear-gradient(135deg, #5a7ba3 0%, #8db4e2 100%);
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(119, 151, 198, 0.3);
}

.action-icon {
    font-size: 1.25rem;
}

.action-text {
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
    color: white !important;
}

.card-grid .action-text {
    color: black !important;
}
.card-action-full .action-text {
    color: black !important;
}

/* ========== Принудительное выравнивание высоты ========== */
/* Mobile-first: no forced equal heights at base */

/* ========== Адаптивность (mobile-first) ========== */
/* Small screens: base rules above */

/* >= 480px (sm) */
@media (min-width: 480px) {
    .dashboard-card { padding: 1.25rem; }
}

/* >= 640px (md) */
@media (min-width: 640px) {
    .dashboard-grid { gap: 1.25rem; }
    .card-header { flex-direction: row; align-items: center; gap: 1rem; }
    .notification-badge { position: absolute; top: 12px; right: 12px; }
}

/* >= 768px (lg) */
@media (min-width: 768px) {
    .creditor-account-container { padding: 1.5rem; }
    .dashboard-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    .dashboard-column { gap: 1.25rem; }
    /* Reintroduce equal heights for cards on larger screens */
    .dashboard-column .dashboard-card { height: 320px !important; min-height: 320px !important; max-height: 320px !important; }
}

/* >= 1024px (xl) */
@media (min-width: 1024px) {
    .creditor-account-container { padding: 2rem; }
    .dashboard-grid { gap: 2rem; }
    .dashboard-card { padding: 1.5rem; }
}

/* Tiny screens adjustments */
@media (max-width: 480px) {
    .dashboard-card { padding: 1rem; }
    .card-header h3 { font-size: 1rem; }
    .card-icon { font-size: 1.5rem; }
    .demo-video-container { padding: 1rem; }
    .demo-video-player { width: 100%; max-width: 250px; }
}

/* ========== Уведомления ========== */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 20px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    z-index: 10000;
    max-width: 400px;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
    animation: slideIn 0.3s ease forwards;
}

.notification.notification-success {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}

.notification.notification-error {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
}

.notification.notification-info {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
}

.notification.notification-fade {
    opacity: 0;
    transform: translateX(100%);
}

/* Notifications on tiny screens */
@media (max-width: 480px) {
    .notification {
        left: 10px;
        right: 10px;
        top: 10px;
        max-width: none;
        transform: translateX(0);
    }
}

@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ========== Комментарии к задачам ========== */
.comment-item {
    background: white;
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-left: 4px solid transparent;
    transition: all 0.3s ease;
    position: relative;
}

.comment-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.comment-item.my-comment {
    border-left-color: #10b981;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.comment-item.incoming-comment {
    border-left-color: #7797C6;
}

.comment-item.unread {
    border-left-color: #ef4444;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    position: relative;
}

.comment-item.unread::before {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 12px;
    height: 12px;
    background: #ef4444;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.comment-item.read {
    opacity: 0.9;
}

/* Наследование стилей сообщений для комментариев */
.comment-item .message-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.comment-item .message-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: #6b7280;
}

.comment-item .message-content {
    font-size: 1rem;
    line-height: 1.6;
}

.task-number {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
    margin-left: 0.5rem;
}

.comment-link {
    display: block;
    padding: 1rem;
    background: rgba(119, 151, 198, 0.1);
    border-radius: 10px;
    border: 1px solid rgba(119, 151, 198, 0.2);
    color: #2c5282;
    text-decoration: none;
    transition: all 0.3s ease;
    font-style: italic;
    line-height: 1.5;
}

.comment-link:hover {
    background: rgba(119, 151, 198, 0.2);
    border-color: #7797C6;
    color: #1a365d;
    transform: scale(1.02);
}

.disabled-link {
    display: block;
    padding: 1rem;
    background: rgba(107, 114, 128, 0.1);
    border-radius: 10px;
    border: 1px solid rgba(107, 114, 128, 0.2);
    color: #6b7280;
    cursor: not-allowed;
    font-style: italic;
    line-height: 1.5;
}

/* Анимация пульсации для непрочитанных */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ========== Telegram подписка (в стиле list_support) ========== */
.telegram-subscription {
    text-align: center;
    padding: 30px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-top: 1px solid #dee2e6;
    margin-top: 2rem;
}

.telegram-subscription a {
    display: inline-block;
    transition: transform 0.3s ease;
    text-decoration: none;
}

.telegram-subscription a:hover {
    transform: scale(1.1);
}

.telegram-subscription img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s ease;
    margin-bottom: 10px;
}

.telegram-subscription img:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.telegram-subscription p {
    color: #495057;
    font-weight: 500;
    margin: 0;
    line-height: 1.4;
}

.telegram-subscription small {
    color: #6c757d;
    font-size: 0.85em;
}

.telegram-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    display: inline-block;
}

.telegram-disabled img {
    filter: grayscale(100%);
}

.telegram-disabled p {
    color: #6c757d;
}

/* ========== Информационное сообщение ========== */
.chat-info {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
    border: 2px solid #7797C6;
    border-radius: 15px;
    padding: 1.5rem;
    margin: 2rem auto;
    box-shadow: 0 4px 15px rgba(119, 151, 198, 0.1);
    position: relative;
    overflow: hidden;
    max-width: 800px !important;
}

.chat-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg, #7797C6 0%, #a8c0e8 100%);
}

.info-icon {
    font-size: 2rem;
    flex-shrink: 0;
    background: linear-gradient(135deg, #7797C6 0%, #a8c0e8 100%);
    color: white;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(119, 151, 198, 0.3);
}

.info-text {
    color: #2c5282;
    line-height: 1.6;
    font-size: 1rem;
}

.info-text strong {
    color: #1a365d;
    font-weight: 600;
}

.highlight-text {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #1a365d;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
    border: 1px solid #f6e05e;
}

/* ========== Фильтр сообщений ========== */
.message-filter {
    margin-bottom: 2rem;
}

@media (max-width: 640px) {
    .message-filter { display: none; }
}

.filter-tabs {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    background: white;
    padding: 1rem;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.filter-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
    color: #6b7280;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.filter-button:hover {
    border-color: #7797C6;
    background: #f0f9ff;
    color: #7797C6;
    transform: translateY(-2px);
}

.filter-button.active {
    border-color: #7797C6;
    background: linear-gradient(135deg, #7797C6 0%, #a8c0e8 100%);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(119, 151, 198, 0.3);
}

.filter-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.filter-icon {
    font-size: 1rem;
}

.filter-text {
    font-weight: 600;
}

/* ========== Список сообщений ========== */
.messages-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.message-item {
    background: white;
    border-radius: 15px;
    padding: 1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: none;
    margin-bottom: 10px;
}

.message-item:hover {
    transform: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Отключаем hover-эффект для исходящих сообщений пользователя */
.message-item.my-message:hover {
    transform: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.message-item.my-message {
    border-left: 4px solid #7797C6;
}

.message-item.incoming-message {
    border-left: 4px solid #10b981;
    background: linear-gradient(135deg, #f0fdf4 0%, #f7fee7 100%);
}

/* Красная линия для сообщений без ответа (is_response = 0) */
.message-item.need-response {
    border-left: 4px solid #ef4444 !important;
}

.message-item.incoming-message.unread {
    border-left-color: #f59e0b;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.2);
}

.message-item.message-read {
    opacity: 0.7;
}

/* ========== Заголовок сообщения ========== */
.message-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.message-icon {
    font-size: 1.2rem;
}

.message-icon.outgoing {
    color: #3b82f6;
}

.message-icon.incoming {
    color: #10b981;
}

.message-label {
    font-weight: 600;
    color: #1f2937;
}

.message-recipient-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    color: #1f2937;
}

.message-author {
    font-weight: 600;
    color: #1f2937;
}

.message-status,
.read-status {
    margin-left: auto;
}

/* ========== Метаинформация сообщения ========== */
.message-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: #6b7280;
    flex-wrap: wrap;
}

.message-date {
    font-weight: 500;
}

.case-number {
    font-weight: 600;
    color: #7797C6;
}

.recipient {
    color: #374151;
}

/* ========== Контент сообщения ========== */
.message-text {
    display: inline-block;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-radius: 8px;
    text-decoration: none;
    color: #1f2937;
    font-weight: 500;
    transition: background-color 0.3s ease;
    border: 1px solid #e5e7eb;
}

.message-text:hover {
    background: #e5e7eb;
    color: #7797C6;
}

.message-text.disabled {
    background: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
}

/* ========== Действия с сообщениями ========== */
.message-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* Сообщения, отправленные текущим пользователем: ховер отключён */
.my-message .message-text,
.my-message .message-text:hover {
    background: #f8fafc;
    color: #6b7280;
    cursor: default;
    text-decoration: none;
}

.mark-read-btn {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
}

/* ========== Статусы сообщений ========== */
.status {
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
}

.status-moderation {
    background: #fef3c7;
    color: #92400e;
}

.status-rejected {
    background: #fee2e2;
    color: #991b1b;
}

.status-sent {
    background: #dbeafe;
    color: #1e40af;
}

.status-read {
    background: #dcfce7;
    color: #166534;
}

.status-unread {
    background: #fef3c7;
    color: #92400e;
}

/* ========== Ссылки на профили ========== */
.profile-link {
    color: #7797C6;
    text-decoration: none;
    font-weight: 600;
}

.profile-link:hover {
    text-decoration: underline;
    color: #6687b6;
}

/* ========== Отсутствие сообщений ========== */
.no-messages {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.no-messages-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.no-messages h3 {
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.no-messages p {
    color: #6b7280;
    margin-bottom: 2rem;
}

/* ========== Сообщения об ошибках ========== */
.error-message {
    text-align: center;
    padding: 3rem 2rem;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 15px;
    color: #991b1b;
}

.error-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.error-message h3 {
    margin-bottom: 0.5rem;
}

/* ========== Баннер Telegram ========== */
.telegram-banner {
    margin-top: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #0088cc 0%, #00a0e6 100%);
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.telegram-banner.disabled {
    background: #f3f4f6;
    opacity: 0.6;
}

.telegram-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: white;
}

.telegram-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.telegram-icon.disabled {
    opacity: 0.5;
}

.telegram-text h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.telegram-text p {
    margin: 0;
    opacity: 0.9;
    font-size: 0.9rem;
}

.telegram-banner.disabled .telegram-text {
    color: #6b7280;
}

/* ========== Навигация для чата ========== */
.chat-breadcrumb {
    margin: 30px 0 1rem 0;
}

.chat-breadcrumb .breadcrumb-current {
    color: #7797C6;
    font-weight: 600;
}

/* ========== Адаптивность чата ========== */
@media (max-width: 768px) {
    .chat-container {
        padding: 1rem;
    }
    
    .chat-header {
        padding: 1.5rem;
    }
    
    .chat-title {
        font-size: 1.5rem;
    }
    
    .chat-icon {
        font-size: 2rem;
        margin-right: 0.5rem;
    }
    
    .message-item {
        padding: 1rem;
    }
    
    .message-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .message-status,
    .read-status {
        margin-left: 0;
    }
    
    .message-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .telegram-link {
        flex-direction: column;
        text-align: center;
    }
    
    .notification {
        right: 10px;
        left: 10px;
        max-width: none;
    }
}

/* ========== Анимация Shimmer для Card Headers ========== */
@keyframes shimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* ========== Modern Form Styles ========== */
.form-registration-container {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    overflow: hidden;
    border: 2px solid #7797C6 !important;
}

.registration-header {
    text-align: center !important;
    background: #7797C6 !important;
    color: white !important;
    padding: 60px 40px !important;
    border-radius: 20px !important;
    margin-bottom: 40px !important;
    position: relative !important;
    overflow: hidden !important;
}

.registration-header::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255,255,255,0.1) 10px,
        rgba(255,255,255,0.1) 20px
    ) !important;
    animation: shimmer 20s linear infinite !important;
    opacity: 0 !important;
    transition: opacity 0.5s ease !important;
}

.registration-header:hover::before {
    opacity: 1 !important;
}

.registration-header h1 {
    position: relative !important;
    z-index: 1 !important;
    margin: 0 0 15px 0 !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: white !important;
}

.registration-subtitle {
    position: relative !important;
    z-index: 1 !important;
    font-size: 20px !important;
    margin: 0 !important;
    opacity: 0.9 !important;
    color: white !important;
}

.registration-notice {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid #0ea5e9;
    border-radius: 15px;
    padding: 1.5rem;
    margin: 2rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.notice-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.notice-content p {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
    color: #0c4a6e;
}

.notice-content ul {
    margin: 0;
    padding-left: 1rem;
    color: #0369a1;
}

.visibility-icon, .required-icon {
    display: inline-block;
    margin: 0 0.25rem;
}

.modern-form {
    padding: 2rem;
}

.form-section {
    margin-bottom: 3rem;
    border: 2px solid #f1f5f9;
    border-radius: 15px;
    padding: 2rem;
    background: linear-gradient(135deg, #fefefe 0%, #f8fafc 100%);
    transition: all 0.3s ease;
}

.form-section:hover {
    border-color: #7797C6;
    box-shadow: 0 5px 20px rgba(119, 151, 198, 0.1);
}

.section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 1.5rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid #7797C6;
}

.section-icon {
    font-size: 1.75rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.required {
    color: #000000;
    font-weight: bold;
}

.form-input, .form-select, .form-textarea {
    padding: 0.875rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: white;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: #7797C6;
    box-shadow: 0 0 0 3px rgba(119, 151, 198, 0.1);
}

.form-input.error, .form-select.error, .form-textarea.error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-textarea {
    min-height: 100px;
    resize: vertical;
}

.form-hint {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.5rem;
}

.error-message {
    color: #000000;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    display: none;
}

.label-hint {
    color: #E75656;
    font-size: 0.85rem;
    font-weight: normal;
    display: block;
    margin-top: 2px;
}

.highlight-search-label {
    color: #E75656 !important;
}

.radio-group, .checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.radio-option, .checkbox-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.radio-option:hover, .checkbox-option:hover {
    background-color: #f8fafc;
}

.radio-custom, .checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

.checkbox-custom {
    border-radius: 4px;
}

.radio-option input[type="radio"], .checkbox-option input[type="checkbox"] {
    display: none;
}

.radio-option input[type="radio"]:checked + .radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: #7797C6;
    border-radius: 50%;
}

.checkbox-option input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #7797C6;
    font-weight: bold;
    font-size: 14px;
}

.radio-option input[type="radio"]:checked + .radio-custom,
.checkbox-option input[type="checkbox"]:checked + .checkbox-custom {
    border-color: #7797C6;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 10px;
}

.expandable-section {
    margin-top: 1rem;
}

.expand-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.expand-button:hover {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    border-color: #7797C6;
}

.expand-button.expanded {
    background: linear-gradient(135deg, #7797C6 0%, #a8c0e8 100%);
    color: white;
    border-color: #7797C6;
}

.expand-icon {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.expandable-content {
    margin-top: 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: white;
}

.file-upload-section {
    border: 2px dashed #cbd5e1;
    border-radius: 15px;
    padding: 2rem;
    background: #f8fafc;
}

.file-upload-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: white;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}

.info-icon {
    font-size: 2rem;
    color: #7797C6;
}

.file-upload-item {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}

.file-input {
    flex: 1;
    padding: 0.5rem;
}

.remove-file-button {
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-file-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: #7797C6 !important;
    color: white !important;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.add-file-button:hover {
    background: #6687B6 !important;
    transform: translateY(-2px);
}

.password-requirements {
    margin-top: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}

.password-requirements p {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
    color: #374151;
}

.password-requirements ul {
    margin: 0;
    padding-left: 1rem;
    list-style: none;
}

.password-requirements li {
    padding: 0.25rem 0;
    font-size: 0.875rem;
    color: #ef4444;
}

.consent-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.consent-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 10px;
    border: 2px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.3s ease;
}

.consent-option:hover {
    border-color: #7797C6;
    background: white;
}

.consent-option input[type="checkbox"]:checked + .checkbox-custom {
    background: #7797C6;
    border-color: #7797C6;
}

.consent-link {
    color: #7797C6;
    text-decoration: underline;
    font-weight: 600;
}

.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid #f1f5f9;
}

.submit-button, .reset-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border: none;
    border-radius: 15px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 200px;
    justify-content: center;
}

.submit-button {
    background: linear-gradient(135deg, #7797C6 0%, #a8c0e8 100%);
    color: white;
}

.submit-button:hover {
    background: linear-gradient(135deg, #5a7ba3 0%, #8db4e2 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(119, 151, 198, 0.3);
}

.reset-button {
    background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%);
    color: white;
}

.reset-button:hover {
    background: linear-gradient(135deg, #4b5563 0%, #6b7280 100%);
    transform: translateY(-2px);
}

.button-icon {
    font-size: 1.2rem;
}

/* Адаптивность */
@media (max-width: 768px) {
    .form-registration-container {
        margin: 1rem;
        border-radius: 15px;
    }
    
    .registration-header {
        padding: 2rem 1rem;
    }
    
    .registration-header h1 {
        font-size: 2rem;
    }
    
    .modern-form {
        padding: 1rem;
    }
    
    .form-section {
        padding: 1rem;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .submit-button, .reset-button {
        width: 100%;
    }
}
/* ===== LEGAL ENTITY FORM COMPONENTS ===== */
.legal-form-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.legal-form-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-size: 200% 200%;
    animation: shimmer 3s ease-in-out infinite;
    padding: 30px;
    text-align: center;
    border-radius: 15px 15px 0 0;
    margin: -20px -20px 30px -20px;
    color: white;
}

.legal-form-header h1 {
    margin: 0 0 10px 0;
    font-size: 28px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.legal-form-header .subtitle {
    font-size: 16px;
    opacity: 0.9;
    font-weight: 300;
}

/* Company Data Section */
.company-data-section {
    background: white;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border-left: 4px solid #7797C6;
}

.company-data-section h3 {
    color: #667eea;
    margin: 0 0 20px 0;
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.company-data-section h3:before {
    content: "";
    font-size: 24px;
}

/* Auto-suggestion Input */
.auto-suggestion-input {
    position: relative;
    margin-bottom: 20px;
}

.auto-suggestion-input .highlight-label {
    color: #e74c3c;
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
    padding: 10px;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe6e6 100%);
    border-radius: 8px;
    border-left: 4px solid #e74c3c;
}

.auto-suggestion-input input {
    width: 100%;
    padding: 15px;
    border: 2px solid #e74c3c;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: white;
}

/* Company Info Grid */
.company-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 25px;
}

/* ================================================
   LIST OFFERS - СОВРЕМЕННЫЙ ДИЗАЙН ПРЕДЛОЖЕНИЙ
   ================================================ */

/* Основной контейнер управления предложениями */
.offers-management-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.page-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #f1f5f9;
}

.page-header h1 {
    font-size: 2.25rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.page-subtitle {
    font-size: 1.125rem;
    color: #64748b;
    margin: 0;
}

/* Обертка для списка предложений */
.offers-list-wrapper {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
}

.offers-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Карточки предложений */
.offer-card {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 2rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.offer-card:hover,
.offer-card.card-hover {
    border-color: #3b82f6;
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.15);
    transform: translateY(-2px);
}

.offer-card-inactive {
    opacity: 0.6;
    background: #f8fafc;
}

.offer-card-inactive:hover {
    transform: none;
    box-shadow: none;
}

/* Заголовок карточки */
.offer-card-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f1f5f9;
}

.offer-case-title {
    margin: 0 0 0.75rem 0;
    font-size: 1.375rem;
    font-weight: 600;
}

.case-link {
    color: #1e293b;
    text-decoration: none;
    transition: color 0.2s ease;
}

.case-link:hover {
    color: #3b82f6;
}

/* Статусы предложений */
.offer-status {
    margin-top: 0.75rem;
}

.status-pending {
    color: #0ea5e9;
    font-weight: 600;
}

.status-selected {
    color: #f59e0b;
    font-weight: 600;
}

.status-success {
    color: #10b981;
    font-weight: 600;
}

.status-rejected {
    color: #ef4444;
    font-weight: 600;
}

.status-removed {
    color: #6b7280;
    font-weight: 600;
}

.status-active {
    color: #8b5cf6;
    font-weight: 600;
}

.status-unknown {
    color: #64748b;
    font-weight: 600;
}

/* Детали предложения */
.offer-details {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.detail-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-value {
    font-weight: 600;
    color: #1e293b;
    font-size: 1rem;
}

.debt-amount .detail-value {
    font-size: 1.125rem;
    color: #059669;
}

/* Действия с предложениями */
.offer-card-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
}

.message-center {
    flex: 1;
}

.message-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-radius: 12px;
    text-decoration: none;
    color: #475569;
    transition: all 0.2s ease;
    border: 1px solid #e2e8f0;
}

.message-link:hover {
    background: #e2e8f0;
    color: #1e293b;
    border-color: #cbd5e1;
}

.message-notification {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.message-icon {
    font-size: 1.25rem;
}

.message-count {
    background: #94a3b8;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 1.5rem;
    text-align: center;
}

.message-count.has-unread {
    background: #ef4444;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Редактор договора */
.contract-editor-action {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px dashed #f59e0b;
    text-align: center;
}

.contract-btn {
    font-size: 1.125rem;
    padding: 1rem 2rem;
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from { box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3); }
    to { box-shadow: 0 6px 30px rgba(245, 158, 11, 0.6); }
}

/* Пустое состояние */
.empty-state-card {
    background: #ffffff;
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
    color: #64748b;
}

.empty-state-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.6;
}

.empty-state-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.75rem;
}

.empty-state-content p {
    font-size: 1rem;
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* Sidebar с Telegram */
.telegram-notifications-sidebar {
    width: 280px;
    flex-shrink: 0;
}

.telegram-widget {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.5rem;
    position: sticky;
    top: 2rem;
}

.telegram-subscribe,
.telegram-connected,
.telegram-disabled {
    text-align: center;
}

.telegram-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
}

.telegram-link:hover {
    transform: translateY(-2px);
}

.telegram-logo {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.telegram-content h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.telegram-content p {
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.telegram-cta {
    display: inline-block;
    background: #0088cc;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.875rem;
}

.telegram-disabled .telegram-logo {
    opacity: 0.5;
    filter: grayscale(1);
}

.telegram-disabled .telegram-text {
    color: #9ca3af;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* Демо-уведомления */
.demo-notice {
    background: #fef3c7;
    color: #92400e;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
    border: 1px solid #fde68a;
}

.guest-mode-indicator {
    color: #dc2626;
    font-weight: 600;
}

/* Модальное окно подтверждения */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.show {
    opacity: 1;
}

.modal-content {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal-overlay.show .modal-content {
    transform: scale(1);
}

.modal-header h3 {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
}

.modal-body p {
    margin: 0 0 1.5rem 0;
    color: #64748b;
    line-height: 1.6;
}

.modal-footer {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

/* Адаптивность */
@media (max-width: 768px) {
    .offers-list-wrapper {
        flex-direction: column;
        gap: 1rem;
    }
    
    .telegram-notifications-sidebar {
        width: 100%;
    }
    
    .offer-card {
        padding: 1.5rem;
    }
    
    .offers-management-container {
        padding: 1rem;
    }
    
    .page-header h1 {
        font-size: 1.875rem;
    }
    
    .modal-footer {
        flex-direction: column;
    }
}

.company-info-field {
    position: relative;
}

.company-info-field label {
    display: block;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8px;
    font-size: 14px;
}

.company-info-field input,
.company-info-field textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

/* ===============================
   СПИСОК ДЕЛ В ПРОИЗВОДСТВЕ (WORK CASES)
   =============================== */

/* Основной контейнер */
.work-cases-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    background: #f8fafc;
    min-height: 100vh;
}

/* Хлебные крошки для work cases - вынесены из контейнера */
.work-cases-breadcrumb {
    text-align: left;
    margin: 0;
    margin-top: 40px;
    padding: 1rem 0 1rem 50px;
    background: transparent;
    border-bottom: 1px solid #e2e8f0;
}

.work-cases-wrapper {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.work-cases-main-content {
    flex: 1;
}

/* Адаптивность для хлебных крошек */
@media (max-width: 768px) {
    .work-cases-breadcrumb {
        padding-left: 20px;
    }
}

/* Карточки дел в фильтре чата */
.chat-cases-list {
    display: none;
    margin-top: 16px;
    gap: 12px;
    grid-template-columns: 1fr;
    width: 100%;
}

@media (min-width: 900px) {
    .chat-cases-list {
        grid-template-columns: 1fr;
    }
}

.chat-case-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box !important;
    padding: 12px 14px;
    margin-bottom: 14px;
    border: 1px solid #e2e6eb !important;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(17, 34, 68, 0.08);
    transition: border-color 0.2s ease, transform 0.2s ease;
    text-decoration: none;
    color: inherit;
}

.chat-case-card:hover {
    border-color: #9bb8ff;
    transform: translateY(-1px);
}

.chat-case-card-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-case-card-title {
    font-weight: 700;
    font-size: 16px;
}

.chat-case-card-sub {
    color: #54627a;
    font-size: 14px;
}

.chat-case-card-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-case-unread-badge {
    min-width: 34px;
    height: 32px;
    padding: 0 10px;
    border-radius: 16px;
    background: #e93c3c;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    animation: chatBlinkBadge 1.2s infinite;
    box-shadow: 0 0 0 4px rgba(233, 60, 60, 0.15);
}

.chat-case-card-link {
    color: #1a73e8;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.chat-case-card-link:hover {
    text-decoration: underline;
}

.chat-case-card-link button,
.chat-case-card-link:where(button) {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.chat-interlocutors {
    margin: -6px 0 18px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}

.chat-interlocutor-card {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    background: #fff;
    margin-bottom: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.chat-interlocutor-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    border-color: #d3d9e4;
}

.chat-interlocutor-card.chat-interlocutor--unanswered:hover {
    border-left-color: #ef4444;
}

.chat-interlocutor-card:last-child {
    margin-bottom: 0;
}

.chat-interlocutor-left {
    display: flex;
    gap: 12px;
    align-items: center;
}

.chat-interlocutor-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #eef2ff;
    color: #4338ca;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.chat-interlocutor-title {
    font-weight: 700;
    color: #0f172a;
}

.chat-interlocutor-sub {
    color: #475569;
    font-size: 0.9rem;
}

.chat-interlocutor-right {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.chat-pill {
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    color: #0f172a;
}

.chat-pill-out {
    border-color: #bfdbfe;
    color: #1d4ed8;
    background: #eff6ff;
}

.chat-pill-in {
    border-color: #bbf7d0;
    color: #15803d;
    background: #f0fdf4;
}

.chat-pill-unans {
    border-color: #fecdd3;
    color: #b91c1c;
    background: #fef2f2;
}

.chat-interlocutor--unanswered {
    border-left: 4px solid #ef4444;
    box-shadow: inset 4px 0 0 #ef4444;
}

.chat-interlocutor--certified {
    border-color: #FFA216;
    box-shadow: 0 0 0 3px rgba(255, 162, 22, 0.25), 0 24px 56px rgba(2, 6, 23, 0.20), 0 10px 24px rgba(255, 162, 22, 0.28), 0 2px 8px rgba(255, 162, 22, 0.20);
}

.chat-interlocutor-empty {
    padding: 10px 12px;
    color: #475569;
}

@keyframes chatBlinkBadge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

/* Подсветка сообщений от администратора в чате */
.message-item.admin-message {
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    color: #C2410C;
}

/* Сетка карточек дел */
.work-cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

/* Карточка дела */
.case-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.case-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border-color: #7797C6;
}

.case-card.case-archived {
    opacity: 0.7;
    background: #f8f9fa;
}

/* Заголовок карточки дела */
.case-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-bottom: 1px solid #e2e8f0;
}

.case-number {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.case-label {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
}

.case-id {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1e293b;
}

/* Статусы дел */
.case-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-new {
    background: #e0f2fe;
    color: #0277bd;
    border: 1px solid #b3e5fc;
}

.status-new .status-indicator {
    background: #0277bd;
}

.status-active {
    background: #e8f5e8;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.status-active .status-indicator {
    background: #2e7d32;
    animation: pulse 2s infinite;
}

.status-archive {
    background: #f3e5f5;
    color: #7b1fa2;
    border: 1px solid #e1bee7;
}

.status-archive .status-indicator {
    background: #7b1fa2;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Тело карточки дела */
.case-card-body {
    padding: 1.5rem;
}

.case-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.case-info-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f5f9;
    min-height: 2rem;
}

.case-info-item:last-child {
    border-bottom: none;
}

.case-info-full {
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.info-label {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
    flex-shrink: 0;
    min-width: 140px;
}

.info-value {
    font-size: 0.95rem;
    color: #1e293b;
    font-weight: 600;
    text-align: right;
    flex: 1;
}

.debt-amount {
    color: #dc2626;
    font-size: 1.1rem;
    font-weight: 700;
}

/* Действия карточки дела */
.case-card-actions {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.case-view-btn, .case-report-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.case-view-btn {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.case-view-btn:hover {
    background: #e2e8f0;
    color: #334155;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.case-report-btn {
    background: linear-gradient(135deg, #7797C6 0%, #a8c0e8 100%);
    color: white;
    border: 1px solid #7797C6;
}

.case-report-btn:hover {
    background: linear-gradient(135deg, #6b87b8 0%, #9bb4e0 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(119, 151, 198, 0.3);
}

/* Пустое состояние */
.empty-state-card {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    margin: 2rem 0;
}

.empty-state-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    opacity: 0.6;
}

.empty-state-content h3 {
    font-size: 1.5rem;
    color: #1e293b;
    margin-bottom: 1rem;
    font-weight: 600;
}

.empty-state-content p {
    color: #64748b;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Карточка ошибки */
.error-card {
    text-align: center;
    padding: 4rem 2rem;
    background: #fef2f2;
    border-radius: 15px;
    border: 1px solid #fecaca;
    margin: 2rem 0;
}

.error-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    opacity: 0.8;
}

.error-content h3 {
    font-size: 1.5rem;
    color: #dc2626;
    margin-bottom: 1rem;
    font-weight: 600;
}

.error-content p {
    color: #991b1b;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Адаптивность для work cases */
@media (max-width: 1200px) {
    .work-cases-grid {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .work-cases-container {
        padding: 1rem;
    }
    
    .work-cases-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .case-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .case-card-actions {
        flex-direction: column;
    }
    
    .case-info-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .info-label {
        min-width: auto;
    }
    
    .info-value {
        text-align: left;
    }
}

/* ===============================
   ПОДТВЕРЖДЕНИЕ ЛИЧНОСТИ (CONFIRM IDENTITY)
   =============================== */

/* Основной контейнер */
.confirm-identity-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background: #f8fafc;
    min-height: 100vh;
}

/* Контейнер формы подтверждения */
.form-confirmation-container {
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    margin: 2rem 0;
}

/* Заголовок подтверждения */
.confirmation-header {
    text-align: center;
    padding: 2rem;
    background: linear-gradient(135deg, #7797C6 0%, #a8c0e8 100%);
    color: white;
}

.confirmation-header h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.confirmation-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    margin: 0;
}

/* Уведомление о подтверждении */
.confirmation-notice {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: #f0f9ff;
    border-left: 4px solid #7797C6;
    margin: 1.5rem;
    border-radius: 8px;
}

.confirmation-notice .notice-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    color: #0ea5e9;
}

.confirmation-notice .notice-content {
    flex: 1;
}

.confirmation-notice p {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
    color: #0c4a6e;
}

.confirmation-notice ul {
    margin: 0;
    padding-left: 1.2rem;
    color: #075985;
}

.confirmation-notice li {
    margin-bottom: 0.3rem;
}

/* Секция загрузки документов */
.document-upload-section {
    margin: 2rem 0;
}

.document-info h3 {
    font-size: 1.2rem;
    color: #1e293b;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.upload-requirements {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.upload-requirements p {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
    color: #9a3412;
}

.upload-requirements ul {
    margin: 0;
    padding-left: 1.2rem;
    color: #c2410c;
}

.upload-requirements li {
    margin-bottom: 0.3rem;
}

/* Контейнер загрузки документов */
.document-upload-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.document-upload-item {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
    align-items: start;
    padding: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

/* Загрузка файлов */
.file-upload-wrapper {
    position: relative;
}

.file-input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.file-upload-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    min-height: 80px;
}

.file-upload-label:hover {
    border-color: #7797C6;
    background: #f1f5f9;
}

.file-input:focus + .file-upload-label {
    border-color: #7797C6;
    box-shadow: 0 0 0 3px rgba(119, 151, 198, 0.1);
}

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

.upload-text {
    font-weight: 500;
    color: #64748b;
}

/* Информация о файле */
.file-info {
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

.file-success {
    color: #16a34a;
    background: #f0fdf4;
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid #bbf7d0;
}

.file-error {
    color: #dc2626;
    background: #fef2f2;
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid #fecaca;
}

/* Описание файла */
.file-description-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.file-description-input {
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: border-color 0.3s ease;
}

.file-description-input:focus {
    outline: none;
    border-color: #7797C6;
    box-shadow: 0 0 0 3px rgba(119, 151, 198, 0.1);
}

/* Кнопка добавления файла */
.add-file-btn {
    align-self: flex-start;
    margin-top: 1rem;
}

/* Кнопка удаления файла */
.remove-file-btn {
    align-self: flex-start;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
}

.btn-small {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
}

/* Адаптивность для подтверждения личности */
@media (max-width: 768px) {
    .confirm-identity-container {
        padding: 1rem;
    }
    
    .confirmation-header h1 {
        font-size: 1.5rem;
    }
    
    .confirmation-subtitle {
        font-size: 1rem;
    }
    
    .document-upload-item {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .confirmation-notice {
        flex-direction: column;
        text-align: center;
    }
}

/* ===============================
   ИЗМЕНЕНИЕ ДАННЫХ ИСПОЛНИТЕЛЯ (CHANGE EXECUTOR)
   =============================== */

/* Основной контейнер */
.change-executor-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background: #f8fafc;
    min-height: 100vh;
}

/* Контейнер формы изменения */
.form-change-container {
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    margin: 2rem 0;
}

/* Заголовок изменения данных */
.change-header {
    text-align: center;
    padding: 2rem;
    background: linear-gradient(135deg, #7797C6 0%, #a8c0e8 100%);
    color: white;
}

.change-header h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.change-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    margin: 0;
}

/* Уведомление об изменениях */
.change-notice {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: #fefce8;
    border-left: 4px solid #eab308;
    margin: 1.5rem;
    border-radius: 8px;
}

.change-notice .notice-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    color: #ca8a04;
}

.change-notice .notice-content {
    flex: 1;
}

.change-notice p {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
    color: #713f12;
}

.change-notice ul {
    margin: 0;
    padding-left: 1.2rem;
    color: #a16207;
}

.change-notice li {
    margin-bottom: 0.3rem;
}

/* Расширяемые секции */
.expandable-section {
    margin: 1rem 0;
}

.expand-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    font-weight: 500;
    color: #475569;
}

.expand-btn:hover {
    background: #e2e8f0;
    border-color: #7797C6;
}

.expand-icon {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.expand-text {
    flex: 1;
    text-align: left;
}

.expand-counter {
    background: #7797C6;
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.expandable-content {
    margin-top: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

/* Сетка чекбоксов */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
    padding: 0.5rem;
}

.checkbox-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 0.9rem;
}

.checkbox-option:hover {
    background: #f1f5f9;
}

.checkbox-custom {
    width: 18px;
    height: 18px;
    border: 2px solid #cbd5e1;
    border-radius: 4px;
    position: relative;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.checkbox-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.checkbox-option input[type="checkbox"]:checked + .checkbox-custom {
    background: #7797C6;
    border-color: #7797C6;
}

.checkbox-option input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.checkbox-option input[type="checkbox"]:focus + .checkbox-custom {
    box-shadow: 0 0 0 3px rgba(119, 151, 198, 0.2);
}

/* Радио кнопки */
.radio-group {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.radio-option:hover {
    background: #f1f5f9;
}

.radio-custom {
    width: 18px;
    height: 18px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.radio-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.radio-option input[type="radio"]:checked + .radio-custom {
    border-color: #7797C6;
}

.radio-option input[type="radio"]:checked + .radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7797C6;
}

.radio-option input[type="radio"]:focus + .radio-custom {
    box-shadow: 0 0 0 3px rgba(119, 151, 198, 0.2);
}

/* Ссылка на политику конфиденциальности */
.privacy-link {
    color: #7797C6;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.privacy-link:hover {
    color: #6b87b8;
}

/* Иконки видимости */
.visibility-icon {
    font-size: 0.9rem;
    margin-left: 0.3rem;
    opacity: 0.7;
}

/* Адаптивность для изменения данных */
@media (max-width: 768px) {
    .change-executor-container {
        padding: 1rem;
    }
    
    .change-header h1 {
        font-size: 1.5rem;
    }
    
    .change-subtitle {
        font-size: 1rem;
    }
    
    .checkbox-grid {
        grid-template-columns: 1fr;
        max-height: 200px;
    }
    
    .radio-group {
        flex-direction: column;
        gap: 1rem;
    }
    
    .expand-btn {
        padding: 0.8rem;
        font-size: 0.9rem;
    }
    
    .change-notice {
        flex-direction: column;
        text-align: center;
    }
}

/* ===============================
   ИЗМЕНЕНИЕ ДАННЫХ ЮРИДИЧЕСКОГО ЛИЦА (CHANGE LEGAL ENTITY)
   =============================== */

/* Основной контейнер */
.change-legal-entity-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background: #f8fafc;
    min-height: 100vh;
}

/* Контейнер формы изменения юридического лица */
.form-change-legal-container {
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    margin: 2rem 0;
}

/* Заголовок изменения данных юридического лица */
.change-legal-header {
    text-align: center;
    padding: 2rem;
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: white;
}

.change-legal-header h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.change-legal-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    margin: 0;
}

/* Уведомление об изменениях юридического лица */
.change-legal-notice {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: #f0fdf4;
    border-left: 4px solid #16a34a;
    margin: 1.5rem;
    border-radius: 8px;
}

.change-legal-notice .notice-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    color: #16a34a;
}

.change-legal-notice .notice-content {
    flex: 1;
}

.change-legal-notice p {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
    color: #14532d;
}

.change-legal-notice ul {
    margin: 0;
    padding-left: 1.2rem;
    color: #166534;
}

.change-legal-notice li {
    margin-bottom: 0.3rem;
}

/* Специальные опции для юридических лиц */
.all-regions-option {
    margin: 1rem 0;
    padding: 1rem;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
}

.special-option {
    padding: 1rem;
    background: white;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.special-option:hover {
    background: #f1f5f9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.special-option .checkbox-custom {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

.special-option .option-text {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.special-option .option-text small {
    color: #64748b;
    font-size: 0.85rem;
    font-weight: normal;
}

/* Корпоративные элементы формы */
.corporate-field {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #cbd5e1;
    padding: 1rem;
    border-radius: 8px;
    margin: 1rem 0;
}

.corporate-field .form-label {
    color: #1e293b;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.corporate-field .form-label::before {
    content: '🏢';
    font-size: 1.2rem;
}

/* Дополнительные стили для юридических лиц */
.legal-entity-specific {
    border-left: 4px solid #059669;
    padding-left: 1rem;
}

.business-info-highlight {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #a7f3d0;
    padding: 1rem;
    border-radius: 8px;
    margin: 1rem 0;
}

.business-info-highlight .info-icon {
    color: #059669;
    font-size: 1.2rem;
    margin-right: 0.5rem;
}

/* Адаптивность для юридических лиц */
@media (max-width: 768px) {
    .change-legal-entity-container {
        padding: 1rem;
    }
    
    .change-legal-header h1 {
        font-size: 1.5rem;
    }
    
    .change-legal-subtitle {
        font-size: 1rem;
    }
    
    .all-regions-option {
        padding: 0.8rem;
    }
    
    .special-option {
        padding: 0.8rem;
    }
    
    .special-option .option-text {
        font-size: 0.9rem;
    }
    
    .change-legal-notice {
        flex-direction: column;
        text-align: center;
    }
    
    .corporate-field {
        padding: 0.8rem;
    }
}

/* Дополнительные стили для знака + в кнопке добавления файла */
.add-file-button span,
.add-file-button *,
button.add-file-button span,
#addFileButton span,
#addFileButton * {
    color: white !important;
}

/* ============================================================================= */
/*                     СТИЛИ ДЛЯ ПРОГРЕСС-БАРА И ДОПОЛНИТЕЛЬНОЙ ВАЛИДАЦИИ      */
/*                     (из form_executor_legal.php)                           */
/* ============================================================================= */

/* Progress bar styles */
.form-progress {
    margin: 20px 0;
    text-align: center;
}

.progress-bar {
    width: 100%;
    height: 20px;
    background-color: #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #059669);
    width: 0%;
    transition: width 0.3s ease, background 0.3s ease;
    border-radius: 10px;
}

.progress-text {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

/* Character counter styles */
.char-counter {
    font-size: 12px;
    color: #6b7280;
    text-align: right;
    margin-top: 5px;
}

/* Auto-resize textarea */
.auto-resize {
    resize: none;
    overflow: hidden;
    min-height: 80px;
}

/* Input feedback styles */
.input-feedback {
    font-size: 12px;
    margin-top: 5px;
}

.input-feedback.error {
    color: #ef4444;
    display: none !important; /* Скрываем по умолчанию */
}

.input-feedback.error.show {
    display: block !important; /* Показываем при ошибке */
}

.input-feedback.success {
    color: #10b981;
}

/* Error state for inputs */
.form-input.error, .form-select.error, .form-textarea.error {
    border-color: #ef4444;
    background-color: #fef2f2;
}

/* Error message styles */
.error-message {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 5px;
    display: none;
}

/* ========== СТИЛИ ИЗ FORM_EXECUTOR_LEGAL ========== */

/* Контейнер аккаунта кредитора */
.creditor-account-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Хлебные крошки */
.breadcrumb.account-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.breadcrumb-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #475569;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-weight: 500;
}

.breadcrumb-link:hover {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    transform: translateY(-1px);
}

.breadcrumb-separator {
    color: #94a3b8;
    font-weight: bold;
    user-select: none;
}

.breadcrumb-current {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #1e293b;
    font-weight: 600;
    padding: 0.5rem 1rem;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 8px;
}

.breadcrumb-icon {
    font-size: 1.1rem;
}

/* Контейнер регистрации */
.form-registration-container {
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

/* Заголовок регистрации */
.registration-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 3rem 2rem;
    text-align: center;
    position: relative;
}

.registration-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
}

.registration-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    position: relative;
    z-index: 1;
}

.registration-subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
    margin: 0;
    font-weight: 400;
    position: relative;
    z-index: 1;
}

/* Уведомление о регистрации */
.registration-notice {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 2rem;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-bottom: 1px solid #e2e8f0;
}

.notice-icon {
    font-size: 2rem;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.notice-content {
    flex: 1;
}

.notice-content p {
    margin: 0 0 1rem 0;
    font-weight: 600;
    color: #1e40af;
}

.notice-content ul {
    margin: 0;
    padding-left: 1.5rem;
    color: #1e40af;
}

.notice-content li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.visibility-indicator, .required-indicator {
    font-weight: 600;
    margin-right: 0.5rem;
}

/* Прогресс бар */
.form-progress {
    padding: 1.5rem 2rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.progress-bar {
    width: 100%;
    height: 12px;
    background: #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.75rem;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #059669);
    border-radius: 6px;
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 35%, rgba(255,255,255,0.3) 50%, transparent 65%);
    animation: progress-shine 2s infinite;
}

@keyframes progress-shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.progress-text {
    text-align: center;
    color: #64748b;
    font-weight: 500;
    font-size: 0.9rem;
}

/* Секции формы */
.form-section {
    padding: 2rem;
    border-bottom: 1px solid #f1f5f9;
}

.form-section:last-child {
    border-bottom: none;
}

.active-section {
    background: linear-gradient(135deg, #fefefe 0%, #f8fafc 100%);
}

.section-header {
    margin-bottom: 2rem;
    text-align: center;
}

.section-header h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

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

.section-description {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
}

/* Группы форм и строки */
.form-group {
    margin-bottom: 1.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Лейблы */
.form-label {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.form-label.required::after {
    content: ' *';
    color: #ef4444;
    font-weight: 700;
}

/* Поля ввода */
.form-input {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.2s ease;
    background: white;
    box-sizing: border-box;
}

.form-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input:valid {
    border-color: #10b981;
}

.form-input.error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Радиокнопки */
.radio-group {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.radio-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.75rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.2s ease;
    min-width: 120px;
}

.radio-item:hover {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.radio-item input[type="radio"]:checked + .radio-label {
    font-weight: 600;
    color: #3b82f6;
}

.radio-item:has(input[type="radio"]:checked) {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

.radio-item input[type="radio"] {
    margin: 0;
    transform: scale(1.2);
}

.radio-label {
    font-weight: 500;
    color: #374151;
}

/* Обратная связь */
.input-feedback {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

.input-feedback.error {
    color: #ef4444;
    padding: 0.5rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    display: none !important; /* Скрываем по умолчанию */
}

.input-feedback.error.show {
    display: block !important; /* Показываем при ошибке */
}

.input-feedback.success {
    color: #059669;
    padding: 0.5rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
}

/* Помощь по полям */
.field-help {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.25rem;
    line-height: 1.4;
}

/* Кнопки действий */
.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 2rem 0;
}

.btn-primary, .btn-secondary {
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    text-decoration: none;
    font-family: inherit;
    font-size: 1rem;
    min-width: 150px;
    justify-content: center;
}

.btn-primary {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #0056b3, #004085);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
}

.btn-secondary {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background: #5a6268;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.form-note {
    text-align: center;
    margin-top: 1.5rem;
    padding: 1rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Чекбоксы */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.5rem;
}

.checkbox-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    padding: 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.2s ease;
    background: white;
}

.checkbox-option:hover {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.checkbox-option:has(input[type="checkbox"]:checked) {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

.checkbox-option input[type="checkbox"] {
    margin: 0;
    transform: scale(1.2);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.checkbox-label {
    font-weight: 500;
    color: #374151;
    line-height: 1.5;
    flex: 1;
}

.checkbox-label a {
    color: #3b82f6;
    text-decoration: underline;
}

.checkbox-label a:hover {
    color: #1d4ed8;
}

/* Адаптивность */
@media (max-width: 768px) {
    .creditor-account-container {
        padding: 1rem;
    }
    
    .registration-header {
        padding: 2rem 1.5rem;
    }
    
    .registration-header h1 {
        font-size: 2rem;
    }
    
    .registration-subtitle {
        font-size: 1rem;
    }
    
    .form-section {
        padding: 1.5rem 1rem;
    }
    
    .radio-group {
        flex-direction: column;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .breadcrumb.account-breadcrumb {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    
    .form-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .btn-primary, .btn-secondary {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .creditor-account-container {
        padding: 0.5rem;
    }
    
    .registration-header h1 {
        font-size: 1.75rem;
    }
    
    .section-header h2 {
        font-size: 1.5rem;
        flex-direction: column;
        gap: 0.5rem;
    }
    .chat-breadcrumb {
        margin: 0;
    }
}

/* Кнопки добавления файлов */
.add-file-button {
    background-color: #7797C6 !important;
    color: white !important;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.add-file-button:hover {
    background-color: #6688b5 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(119, 151, 198, 0.3);
}

.add-file-button::before {
    content: '+';
    color: white;
    font-size: 18px;
    font-weight: bold;
}

/* Индикатор прогресса */
.progress-container {
    margin: 1rem 0;
}

.progress-bar {
    width: 100%;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #28a745, #20c997);
    border-radius: 6px;
    transition: width 0.3s ease;
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 35%, rgba(255,255,255,0.2) 50%, transparent 65%);
    animation: progress-shine 2s infinite;
}

@keyframes progress-shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.progress-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
}

/* ========== СТИЛИ ДЛЯ ФОРМЫ РЕГИСТРАЦИИ ИСПОЛНИТЕЛЯ ========== */

/* Контейнер формы регистрации */
.creditor-account-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 150px 2rem 2rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Хлебные крошки */
.breadcrumb.account-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.breadcrumb-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #475569;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-weight: 500;
}

.breadcrumb-link:hover {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    transform: translateY(-1px);
}

.breadcrumb-separator {
    color: #94a3b8;
    font-weight: bold;
    user-select: none;
}

.breadcrumb-current {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #1e293b;
    font-weight: 600;
    padding: 0.5rem 1rem;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 8px;
}

.breadcrumb-icon {
    font-size: 1.1rem;
}

/* Контейнер регистрации */
.form-registration-container {
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

/* Заголовок регистрации */
.registration-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 3rem 2rem;
    text-align: center;
    position: relative;
}

.registration-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
}

.registration-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    position: relative;
    z-index: 1;
}

.registration-subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
    margin: 0;
    font-weight: 400;
    position: relative;
    z-index: 1;
}

.header-icon {
    display: inline-block;
    margin-right: 0.75rem;
    font-size: 1.2em;
}

/* Прогресс бар формы */
.form-progress {
    padding: 1.5rem 2rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.form-progress .progress-bar {
    width: 100%;
    height: 12px;
    background: #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.75rem;
    position: relative;
}

.form-progress .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #059669);
    border-radius: 6px;
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
}

.form-progress .progress-text {
    text-align: center;
    color: #64748b;
    font-weight: 500;
    font-size: 0.9rem;
}

/* Уведомление о регистрации */
.registration-notice {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 2rem;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-bottom: 1px solid #e2e8f0;
}

.notice-icon {
    font-size: 2rem;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.notice-content {
    flex: 1;
}

.notice-content p {
    margin: 0 0 1rem 0;
    font-weight: 600;
    color: #1e40af;
}

.notice-content ul {
    margin: 0;
    padding-left: 1.5rem;
    color: #1e40af;
}

.notice-content li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.visibility-indicator, .required-indicator {
    font-weight: 600;
    margin-right: 0.5rem;
}

/* Секции формы */
.form-section {
    padding: 2rem;
    border-bottom: 1px solid #f1f5f9;
}

.form-section:last-child {
    border-bottom: none;
}

.active-section {
    background: linear-gradient(135deg, #fefefe 0%, #f8fafc 100%);
}

.section-header {
    margin-bottom: 2rem;
    text-align: center;
}

.section-header h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

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

.section-description {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
}

/* Группы форм и строки */
.form-group {
    margin-bottom: 1.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Лейблы */
.form-label {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.form-label.required::after {
    content: ' *';
    color: #ef4444;
    font-weight: 700;
}

/* Поля ввода */
.form-input {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.2s ease;
    background: white;
    box-sizing: border-box;
}

.form-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input:valid {
    border-color: #10b981;
}

.form-input.error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Радиокнопки */
.radio-group {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.radio-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.75rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.2s ease;
    min-width: 120px;
}

.radio-item:hover {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.radio-item input[type="radio"]:checked + .radio-label {
    font-weight: 600;
    color: #3b82f6;
}

.radio-item:has(input[type="radio"]:checked) {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

.radio-item input[type="radio"] {
    margin: 0;
    transform: scale(1.2);
}

.radio-label {
    font-weight: 500;
    color: #374151;
}

/* Обратная связь */
.input-feedback {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.4;
    display: none;
}

.input-feedback.error {
    color: #ef4444;
    padding: 0.5rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    display: none !important; /* Скрываем по умолчанию */
}

.input-feedback.error.show {
    display: block !important; /* Показываем при ошибке */
}

.input-feedback.success {
    color: #059669;
    padding: 0.5rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    display: block;
}

/* Помощь по полям */
.field-help {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.25rem;
    line-height: 1.4;
}

.field-description {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 4px;
    border-left: 3px solid #7797C6;
}

/* Скрытый контент для скринридеров */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Специальные поля */
.phone-input {
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
}

/* Адаптивность */
@media (max-width: 768px) {
    .creditor-account-container {
        padding: 1rem;
    }
    
    .registration-header {
        padding: 2rem 1.5rem;
    }
    
    .registration-header h1 {
        font-size: 2rem;
    }
    
    .registration-subtitle {
        font-size: 1rem;
    }
    
    .form-section {
        padding: 1.5rem 1rem;
    }
    
    .radio-group {
        flex-direction: column;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .breadcrumb.account-breadcrumb {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
}

@media (max-width: 480px) {
    .creditor-account-container {
        padding: 0.5rem;
    }
    
    .registration-header h1 {
        font-size: 1.75rem;
    }
    
    .section-header h2 {
        font-size: 1.5rem;
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Адаптивность для preorder-компонентов */
@media (max-width: 1200px) {
    .preorder-container {
        gap: 24px;
    }
    
    .preorder-left-column,
    .preorder-right-column {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .preorder-container {
        flex-direction: column;
        gap: 20px;
    }
    
    .preorder-request-info {
        padding: 24px;
        margin-bottom: 24px;
    }
    
    .preorder-request-title {
        font-size: 1.25rem;
    }
    
    .preorder-form {
        padding: 24px;
    }
    
    .preorder-form-title {
        font-size: 1.25rem;
    }
    
    .preorder-checkbox-group {
        flex-direction: column;
        gap: 12px;
    }
    
    .preorder-checkbox-item {
        padding: 12px;
    }
    
    .preorder-buttons {
        flex-direction: column;
        gap: 12px;
    }
    
    .preorder-btn {
        width: 100%;
        justify-content: center;
    }
    
    .preorder-executors {
        padding: 24px;
    }
    
    .preorder-executor-card {
        padding: 20px;
    }
    
    .preorder-executor-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .preorder-executor-badges {
        flex-direction: row;
        align-items: center;
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 480px) {
    .creditor-account-container {
        padding: 0.5rem;
    }
    
    .registration-header h1 {
        font-size: 1.75rem;
    }
    
    .section-header h2 {
        font-size: 1.5rem;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    /* Мобильная адаптивность для preorder */
    .preorder-page {
        padding: 0 12px;
    }
    
    .preorder-breadcrumbs {
        font-size: 0.875rem;
        margin-bottom: 16px;
    }
    
    .preorder-request-info,
    .preorder-form,
    .preorder-executors {
        padding: 16px;
        border-radius: 12px;
    }
    
    .preorder-request-title,
    .preorder-form-title,
    .preorder-executors-title {
        font-size: 1.125rem;
        margin-bottom: 16px;
    }
    
    .preorder-form-section-title {
        font-size: 1rem;
        margin-bottom: 12px;
    }
    
    .preorder-checkbox-item {
        padding: 10px;
        font-size: 0.875rem;
    }
    
    .preorder-executor-card {
        padding: 16px;
        margin-bottom: 16px;
    }
    
    .preorder-executor-header {
        margin-bottom: 16px;
    }
    
    .preorder-executor-badges {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .preorder-executor-type {
        padding: 6px 10px;
        font-size: 0.75rem;
    }
    
    .preorder-executor-field {
        font-size: 0.875rem;
        margin-bottom: 8px;
    }
    
    .preorder-param-item {
        flex-direction: column;
        gap: 4px;
        padding: 12px 8px;
    }
    
    .preorder-param-label {
        font-size: 0.875rem;
    }
    
    .preorder-param-value {
        font-size: 0.875rem;
    }
    
    .preorder-toggle-button {
        padding: 12px;
        font-size: 0.875rem;
    }
    
    .preorder-agreement label {
        font-size: 0.875rem;
    }
    
    .preorder-notice-text {
        font-size: 0.8rem;
    }
}

/* ==================== TELEGRAM SUBSCRIPTION (tg-sub- namespace) ==================== */
/* Современный дизайн для страницы подписки на Telegram уведомления */
/* Цветовая палитра: #7796C6, #FFA216, #E75656 */

.tg-sub-container-top {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px 16px 32px;
    background: #f8fafc;
    min-height: 40vh;
}

.tg-sub-container-bottom {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 16px 64px;
    background: #f8fafc;
    min-height: 40vh;
}

/* Главный заголовок */
.tg-sub-header {
    text-align: center;
    margin-bottom: 32px;
    background: linear-gradient(135deg, #7796C6 0%, #6687b5 100%);
    color: #ffffff !important;
    padding: 32px 24px;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

.tg-sub-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255, 255, 255, 0.1) 10px,
        rgba(255, 255, 255, 0.1) 20px
    );
    animation: tgSubShimmer 20s linear infinite;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.tg-sub-header:hover::before {
    opacity: 1;
}

@keyframes tgSubShimmer {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(50%, 50%, 0); }
}

.tg-sub-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    margin: 0 0 12px;
    color: #ffffff !important;
}

.tg-sub-subtitle {
    font-size: 16px;
    margin: 0;
    opacity: 0.95;
    line-height: 1.5;
}

/* Карточки уведомлений */
.tg-sub-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.08), 0 2px 8px rgba(2, 6, 23, 0.04);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.tg-sub-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(2, 6, 23, 0.12), 0 4px 12px rgba(2, 6, 23, 0.06);
}

/* Блок с инструкциями */
.tg-sub-instructions {
    text-align: center;
}

.tg-sub-step-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.tg-sub-step {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 16px;
    line-height: 1.5;
}

.tg-sub-step:last-child {
    border-bottom: none;
}

.tg-sub-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #7796C6 0%, #6687b5 100%);
    color: #ffffff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.tg-sub-step-text {
    flex: 1;
    text-align: left;
}

.tg-sub-step-text strong {
    color: #7796C6;
    font-weight: 600;
}

/* Кнопки */
.tg-sub-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #7796C6 0%, #6687b5 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(119, 150, 198, 0.3);
    min-height: 48px;
}

.tg-sub-button:hover {
    background: linear-gradient(135deg, #6687b5 0%, #5577a4 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(119, 150, 198, 0.4);
    color: #ffffff;
    text-decoration: none;
}

.tg-sub-button:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(119, 150, 198, 0.3);
}

.tg-sub-button-icon {
    font-size: 18px;
}

/* Вариант кнопки для Telegram */
.tg-sub-button-telegram {
    background: linear-gradient(135deg, #0088cc 0%, #006699 100%);
    box-shadow: 0 4px 12px rgba(0, 136, 204, 0.3);
}

.tg-sub-button-telegram:hover {
    background: linear-gradient(135deg, #006699 0%, #004466 100%);
    box-shadow: 0 8px 20px rgba(0, 136, 204, 0.4);
}

/* Блок с кодом */
.tg-sub-code-block {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 2px solid #7796C6;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    margin: 24px 0;
}

.tg-sub-code-title {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 16px;
}

.tg-sub-code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #ffffff;
    border: 2px solid #7796C6;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 24px;
    font-weight: 700;
    color: #7796C6;
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
    margin: 8px auto;
    box-shadow: 0 4px 12px rgba(119, 150, 198, 0.2);
    width: 50%;
    max-width: 400px;
    min-width: 280px;
}

.tg-sub-code-copy-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #7796C6;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.tg-sub-code-copy-btn:hover {
    background: #6687b5;
    transform: translateY(-1px);
}

.tg-sub-code-copy-btn:active {
    transform: translateY(0);
}

.tg-sub-code-copy-btn.copied {
    background: #22c55e;
}

.tg-sub-code-description {
    font-size: 14px;
    color: #64748b;
    margin-top: 12px;
    line-height: 1.5;
}

/* Блок с ссылкой на бот */
.tg-sub-bot-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #0088cc 0%, #006699 100%);
    color: #ffffff;
    border-radius: 12px;
    text-decoration: none;
    margin: 16px 0;
    transition: all 0.3s ease;
}

.tg-sub-bot-link:hover {
    background: linear-gradient(135deg, #006699 0%, #004466 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 136, 204, 0.3);
    color: #ffffff;
    text-decoration: none;
}

.tg-sub-bot-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.tg-sub-bot-text {
    flex: 1;
}

.tg-sub-bot-title {
    font-weight: 600;
    margin: 0 0 4px;
    color: white !important;
}

.tg-sub-bot-url {
    font-size: 14px;
    opacity: 0.9;
    word-break: break-all;
    color: white !important;
    transition: text-decoration 0.2s ease;
}

.tg-sub-bot-link:hover .tg-sub-bot-url {
    text-decoration: underline;
}

/* Блок отказа в доступе */
.tg-sub-access-denied {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border: 2px solid #E75656;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    color: #991b1b;
}

.tg-sub-denied-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    background: #E75656;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 24px;
}

.tg-sub-denied-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px;
    color: #991b1b;
}

.tg-sub-denied-text {
    margin: 0 0 16px;
    line-height: 1.5;
}

.tg-sub-button-home {
    background: linear-gradient(135deg, #E75656 0%, #dc2626 100%);
    box-shadow: 0 4px 12px rgba(231, 86, 86, 0.3);
}

.tg-sub-button-home:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 8px 20px rgba(231, 86, 86, 0.4);
}

/* Видео блок */
.tg-sub-video-section {
    margin-top: 32px;
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.08), 0 2px 8px rgba(2, 6, 23, 0.04);
    border: 1px solid #e2e8f0;
}

.tg-sub-video-title {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin: 0 0 20px;
    color: #1e293b;
}

.tg-sub-video-container {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #f1f5f9;
    aspect-ratio: 16/9;
}

/* Мобильная адаптация */
@media (max-width: 768px) {
    .tg-sub-container-top {
        padding: 16px 12px 24px;
    }
    
    .tg-sub-container-bottom {
        padding: 0 12px 40px;
    }
    
    .tg-sub-header {
        padding: 24px 16px;
        margin-bottom: 24px;
    }
    
    .tg-sub-title {
        font-size: 24px;
    }
    
    .tg-sub-subtitle {
        font-size: 14px;
    }
    
    .tg-sub-card {
        padding: 20px 16px;
        margin-bottom: 16px;
    }
    
    .tg-sub-step {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 16px 0;
    }
    
    .tg-sub-step-text {
        text-align: center;
    }
    
    .tg-sub-code {
        font-size: 20px;
        padding: 10px 12px;
        letter-spacing: 1px;
        flex-direction: column;
        gap: 8px;
        text-align: center;
        width: 100%;
        max-width: none;
        min-width: auto;
    }
    
    .tg-sub-code-copy-btn {
        font-size: 11px;
        padding: 6px 10px;
        align-self: stretch;
    }
    
    .tg-sub-bot-link {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
    
    .tg-sub-bot-url {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .tg-sub-title {
        font-size: 20px;
    }
    
    .tg-sub-button {
        padding: 12px 20px;
        font-size: 14px;
        min-height: 44px;
    }
    
    .tg-sub-code {
        font-size: 18px;
        padding: 8px 10px;
        flex-direction: column;
        gap: 6px;
        width: 100%;
        max-width: none;
        min-width: auto;
    }
    
    .tg-sub-code-copy-btn {
        font-size: 10px;
        padding: 5px 8px;
    }
    
    .tg-sub-step {
        font-size: 14px;
    }
    
    .tg-sub-step-number {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}

/* ==================== FALLBACK СТИЛИ для совместимости ==================== */
/* Дополнительные стили на случай проблем с загрузкой основных стилей */

.tg-sub-container-top {
    max-width: 800px !important;
    margin: 150px auto 0;
    padding: 24px 16px 32px;
    background: #f8fafc;
    min-height: 40vh;
}

.tg-sub-container-bottom {
    max-width: 800px !important;
    margin: 0 auto;
    padding: 0 16px 64px;
    background: #f8fafc;
    min-height: 40vh;
}

.tg-sub-header {
    text-align: center;
    margin-bottom: 32px;
    background: linear-gradient(135deg, #7796C6 0%, #6687b5 100%);
    color: #ffffff !important;
    padding: 32px 24px;
    border-radius: 16px;
}

.tg-sub-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 12px;
    color: #ffffff;
}

.tg-sub-subtitle {
    font-size: 16px;
    margin: 0;
    opacity: 0.95;
    line-height: 1.5;
}

.tg-sub-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.08), 0 2px 8px rgba(2, 6, 23, 0.04);
    border: 1px solid #e2e8f0;
}

.tg-sub-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #7796C6 0%, #6687b5 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    min-height: 48px;
}

/* ============================================
   FAQ PAGE STYLES
   ============================================ */

/* FAQ Page Modern Styles */
.faq-hero {
    padding: 4rem 0 3rem;
    background: linear-gradient(135deg, var(--background-primary) 0%, var(--background-secondary) 100%);
    position: relative;
    overflow: hidden;
}

.faq-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(74, 144, 226, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(80, 200, 120, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.faq-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.faq-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(74, 144, 226, 0.1);
    border: 1px solid rgba(74, 144, 226, 0.2);
    border-radius: 50px;
    padding: 0.875rem 1.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 2rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(74, 144, 226, 0.1);
    transition: all 0.3s ease;
}

.faq-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(74, 144, 226, 0.2);
}

.faq-badge svg {
    animation: pulse-faq 2s infinite;
}

@keyframes pulse-faq {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

.faq-header h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    line-height: 1.2;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--primary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.faq-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
    opacity: 0.9;
}

.faq-content {
    padding: 4rem 0;
    background: linear-gradient(180deg, var(--background-secondary) 0%, var(--background-primary) 100%);
}

.faq-grid {
    display: grid;
    gap: 2rem;
    margin-bottom: 5rem;
    max-width: 1000px !important;
    margin-left: auto;
    margin-right: auto;
}

.faq-item {
    background: var(--background-primary);
    border-radius: 24px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all 0.4s ease;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.faq-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.03) 0%, rgba(80, 200, 120, 0.03) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.faq-item:hover::before {
    opacity: 1;
}

.faq-item:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
    border-color: rgba(74, 144, 226, 0.2);
}

.faq-item:target {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.1);
    animation: highlight-target 1s ease;
}

@keyframes highlight-target {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.faq-content-block {
    padding: 2.5rem;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 300px;
}

.faq-header-section {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.faq-number {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: var(--gradient-primary);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.375rem;
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
}

.faq-number::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: rotate(45deg);
    animation: shimmer-number 3s infinite;
}

@keyframes shimmer-number {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.faq-title {
    flex: 1;
}

.faq-content-block h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.4;
    position: relative;
}

.faq-content-block h3::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--gradient-primary);
    border-radius: 2px;
}

.faq-answer {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 1rem;
}

.faq-answer p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1.25rem;
    font-size: 1.05rem;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

.faq-answer ul {
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 1.25rem 0;
    padding-left: 0;
    list-style: none;
}

.faq-answer li {
    margin-bottom: 0.75rem;
    padding-left: 2rem;
    position: relative;
    font-size: 1.05rem;
}

.faq-answer li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6rem;
    width: 12px;
    height: 12px;
    background: var(--gradient-primary);
    border-radius: 50%;
    transform: scale(0.8);
}

.faq-answer strong {
    color: var(--text-primary);
    font-weight: 600;
}

.faq-conclusion {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    border-radius: 32px;
    padding: 4rem 3rem;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin: 0 1rem;
    box-shadow: 0 20px 60px rgba(74, 144, 226, 0.3);
}

.faq-conclusion::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.conclusion-content {
    position: relative;
    z-index: 1;
}

.conclusion-content h2 {
    font-size: 2.25rem;
    margin-bottom: 2rem;
    color: white;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.conclusion-content p {
    font-size: 1.25rem;
    line-height: 1.7;
    margin-bottom: 1.25rem;
    opacity: 0.95;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.conclusion-content p:last-of-type {
    margin-bottom: 3rem;
    font-size: 1.375rem;
    opacity: 1;
    font-weight: 600;
}

.conclusion-cta {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.conclusion-cta .btn {
    padding: 1.25rem 2.5rem;
    border-radius: 16px;
    font-weight: 600;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.conclusion-cta .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.conclusion-cta .btn:hover::before {
    left: 100%;
}

.conclusion-cta .btn-primary {
    background: white;
    color: var(--primary-color) !important;
    border: none !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    height: 100%;
}

.conclusion-cta .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
    color: var(--primary-color) !important;
}

.conclusion-cta .btn-outline {
    background: rgba(255, 255, 255, 0.1);
    color: white !important;
    border: 2px solid white !important;
    backdrop-filter: blur(10px);
}

.conclusion-cta .btn-outline:hover {
    background: white;
    color: var(--primary-color) !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

/* Floating Action Button */
.faq-fab {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(74, 144, 226, 0.4);
    transition: all 0.3s ease;
    z-index: 1000;
    text-decoration: none !important;
    color: white !important;
}

.faq-fab:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 35px rgba(74, 144, 226, 0.5);
    color: white !important;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* FAQ Адаптивность */
@media (max-width: 768px) {
    .faq-hero {
        padding: 3rem 0 2rem;
    }
    
    .faq-badge {
        padding: 0.75rem 1.5rem;
        font-size: 0.875rem;
    }
    
    .faq-header h1 {
        font-size: 2.25rem;
    }
    
    .faq-subtitle {
        font-size: 1.125rem;
    }
    
    .faq-content {
        padding: 3rem 0;
    }
    
    .faq-grid {
        gap: 1.5rem;
        margin-bottom: 3rem;
    }
    
    .faq-content-block {
        flex-direction: column;
        gap: 1.5rem;
        padding: 2rem;
        min-height: auto;
    }
    
    .faq-header-section {
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 1rem;
    }
    
    .faq-number {
        align-self: flex-start;
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }
    
    .faq-content-block h3 {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }
    
    .faq-answer p,
    .faq-answer li {
        font-size: 1rem;
    }
    
    .faq-conclusion {
        padding: 3rem 2rem;
        margin: 0 0.5rem;
        border-radius: 24px;
    }
    
    .conclusion-content h2 {
        font-size: 1.875rem;
    }
    
    .conclusion-content p {
        font-size: 1.125rem;
    }
    
    .conclusion-content p:last-of-type {
        font-size: 1.25rem;
    }
    
    .conclusion-cta {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .conclusion-cta .btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
        padding: 1rem 2rem;
    }
    
    .faq-fab {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 56px;
        height: 56px;
    }
}

@media (max-width: 480px) {
    .faq-content-block {
        padding: 1.5rem;
    }
    
    .faq-conclusion {
        padding: 2.5rem 1.5rem;
    }
}