/* Useful contacts: public table */
.useful-contacts { margin: 24px 0; }
.useful-contacts .contacts-public-group { margin: 28px 0; }
.useful-contacts .contacts-public-title {
    margin: 0 0 14px; padding: 0; color: #1b2027;
    font-size: 21px; font-weight: 700; line-height: 1.35;
    text-transform: none; letter-spacing: normal;
}
.useful-contacts .contacts-table-wrap {
    border: 1px solid #dce3ed; border-radius: 22px;
    overflow: hidden; background: #fff;
}
.useful-contacts .contacts-table {
    display: table; width: 100%; margin: 0; border: 0;
    table-layout: fixed; border-collapse: collapse; font-size: 15px;
}
.useful-contacts .contacts-table th,
.useful-contacts .contacts-table td {
    border: 0; padding: 14px 16px; text-align: left;
    vertical-align: top; overflow-wrap: anywhere;
    line-height: 1.5; color: #26323f; background: transparent;
}
.useful-contacts .contacts-table thead th {
    background: #e7f1ff; color: #53657d; font-size: 13px; font-weight: 600;
}
.useful-contacts .contacts-table thead th:first-child { width: 28%; }
.useful-contacts .contacts-table thead th:nth-child(2) { width: 22%; }
.useful-contacts .contacts-table thead th:nth-child(3) { width: 18%; }
.useful-contacts .contacts-table thead th:nth-child(4) { width: 32%; }
.useful-contacts .contacts-table tbody tr + tr > * { border-top: 1px solid #e1e7ef; }
.useful-contacts .contacts-table .contacts-name { color: #1b2027; font-weight: 600; }
.useful-contacts .contacts-table a {
    color: #0068df; font-weight: 500; text-decoration: underline;
    text-underline-offset: 3px;
}
.useful-contacts .contacts-table a:focus-visible { outline: 2px solid #0068df; outline-offset: 3px; }
.useful-contacts .contacts-social-links { display: flex; flex-direction: column; gap: 6px; }
.useful-contacts .contacts-comment { white-space: pre-line; }
.useful-contacts .contacts-mobile-label { display: none; }
.contacts-visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* Admin editor */
.account-ui.app-ui .contacts-editor {
    margin: 0; padding: 24px; background: #fff;
    border: 1px solid #dce3ed; border-radius: 26px;
}
.account-ui.app-ui .contacts-editor .contacts-editor-help {
    margin: 10px 0 16px; color: #718094; font-size: 13px; line-height: 1.5;
}
.account-ui.app-ui .contacts-editor .contacts-status {
    display: inline-block; margin: 16px 0; padding: 12px 16px;
    background: #e6f6ee; border: 1px solid #a9d9bd; border-radius: 16px;
    color: #28895b; font-size: 14px; font-weight: 500;
}
.account-ui.app-ui .contacts-editor .contacts-errors {
    margin: 16px 0; padding: 14px 16px; border: 1px solid #efb9c0;
    border-radius: 16px; background: #fff3f4; color: #b82535;
}
.account-ui.app-ui .contacts-errors ul { margin: 8px 0 0; padding-left: 20px; list-style: disc; }
.account-ui.app-ui .contacts-category-editor {
    margin: 20px 0; padding: 18px; border: 1px solid #dce5f0;
    background: #f5f9ff; border-radius: 22px;
}
.account-ui.app-ui .contacts-contact-editor {
    margin: 16px 0; padding: 16px; background: #fff;
    border: 1px solid #dce3ed; border-radius: 18px;
}
.account-ui.app-ui .contacts-editor-row {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; margin-bottom: 14px;
}
.account-ui.app-ui .contacts-editor .contacts-editor-heading {
    margin: 0; padding: 0; font-size: 17px !important;
    color: #1b2027; font-weight: 700; line-height: 1.4;
    text-transform: none; letter-spacing: normal;
}
.account-ui.app-ui .contacts-editor .contacts-remove-button {
    min-height: 36px; padding: 6px 10px; border: 1px solid #eeb9bf;
    border-radius: 12px; background: #f9e4e6; color: #c82736;
    font-size: 12px; font-weight: 600; cursor: pointer;
}
.account-ui.app-ui .contacts-fields-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.account-ui.app-ui .contacts-editor label {
    display: block; margin-bottom: 6px; font-size: 14px;
    line-height: 1.4; font-weight: 700;
}
.account-ui.app-ui .contacts-editor label span {
    color: #718094; font-size: 12px; font-weight: 400;
}
.account-ui.app-ui .contacts-editor input,
.account-ui.app-ui .contacts-editor textarea {
    display: block; width: 100%; min-width: 0; box-sizing: border-box;
    margin: 0; padding: 10px 12px; border: 1px solid #cedaea;
    border-radius: 14px; background: #fafcff; color: #1b2027;
    font: inherit; font-size: 16px; line-height: 1.4;
}
.account-ui.app-ui .contacts-editor textarea { resize: vertical; min-height: 88px; }
.account-ui.app-ui .contacts-editor input:focus,
.account-ui.app-ui .contacts-editor textarea:focus { outline: 2px solid #1677ff; outline-offset: 1px; }
.account-ui.app-ui .contacts-editor-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.account-ui.app-ui .contacts-editor button:disabled { opacity: .5; cursor: default; }

@media (max-width: 600px) {
    .useful-contacts .contacts-public-title { font-size: 18px; }
    .useful-contacts .contacts-table-wrap { border: 0; border-radius: 0; background: transparent; overflow: visible; }
    .useful-contacts .contacts-table { display: block; font-size: 14px; }
    .useful-contacts .contacts-table thead {
        position: absolute; width: 1px; height: 1px; padding: 0;
        margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
    }
    .useful-contacts .contacts-table tbody { display: block; }
    .useful-contacts .contacts-table tbody tr {
        display: block; margin: 10px 0; padding: 14px;
        border: 1px solid #dce3ed; border-radius: 20px; background: #fff;
    }
    .useful-contacts .contacts-table tbody th,
    .useful-contacts .contacts-table tbody td {
        display: block; width: auto; padding: 7px 0; border: 0 !important;
        background: transparent;
    }
    .useful-contacts .contacts-table tbody .contacts-name { padding-top: 0; font-size: 16px; }
    .useful-contacts .contacts-table tbody .contacts-empty { display: none; }
    .useful-contacts .contacts-mobile-label {
        display: block; margin-bottom: 3px; color: #718094; font-size: 12px;
    }
    .useful-contacts .contacts-phone,
    .useful-contacts .contacts-social-links a { display: inline-block; padding: 4px 0; }
    .account-ui.app-ui .contacts-editor { margin: 0 16px; padding: 16px; border-radius: 22px; }
    .account-ui.app-ui .contacts-category-editor { padding: 12px; border-radius: 18px; }
    .account-ui.app-ui .contacts-contact-editor { padding: 12px; border-radius: 16px; }
    .account-ui.app-ui .contacts-fields-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}





/* Contacts: action buttons and new mobile order */
.useful-contacts .contacts-table .contacts-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    max-width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}
.useful-contacts .contacts-table .contacts-link svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.useful-contacts .contacts-table .contacts-link span {
    min-width: 0;
    overflow-wrap: anywhere;
}
.useful-contacts .contacts-table .contacts-phone-button {
    background: #e6f6ee;
    border-color: #a9d9bd;
    color: #28895b;
}
.useful-contacts .contacts-table .contacts-social-button {
    background: #e7f1ff;
    border-color: #b4d4ff;
    color: #0068df;
}
.useful-contacts .contacts-phone-button:hover { filter: brightness(.97); }
.useful-contacts .contacts-social-button:hover { filter: brightness(.97); }

@media (max-width: 600px) {
    .useful-contacts .contacts-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "name comment"
            "phone social";
        gap: 12px;
        padding: 14px;
    }
    .useful-contacts .contacts-table tbody th,
    .useful-contacts .contacts-table tbody td {
        min-width: 0;
        padding: 0;
    }
    .useful-contacts .contacts-table .contacts-name {
        grid-area: name;
        align-self: start;
    }
    .useful-contacts .contacts-table td:nth-child(2) {
        grid-area: phone;
    }
    .useful-contacts .contacts-table td:nth-child(3) {
        grid-area: social;
    }
    .useful-contacts .contacts-table td:nth-child(4) {
        grid-area: comment;
    }
    .useful-contacts .contacts-mobile-label {
        display: none;
    }
    .useful-contacts .contacts-comment {
        color: #657387;
        font-size: 14px;
    }
    .useful-contacts .contacts-social-links {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }
    .useful-contacts .contacts-table tbody tr:has(td:nth-child(4).contacts-empty) .contacts-name {
        grid-column: 1 / -1;
    }
    .useful-contacts .contacts-table tbody tr:has(td:nth-child(2).contacts-empty) td:nth-child(3) {
        grid-column: 1 / -1;
    }
    .useful-contacts .contacts-table tbody tr:has(td:nth-child(3).contacts-empty) td:nth-child(2) {
        grid-column: 1 / -1;
    }
}