/* «Мои обращения» (system/library/shopnet/tickets.php): the list, the conversation, the form of the page and of the window */
.sn-tk-list { display: flex; flex-direction: column; border: 1px solid var(--rule, #e6e8eb); border-radius: 12px; overflow: hidden }
.sn-tk-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 14px 18px; color: inherit; text-decoration: none !important; border-top: 1px solid var(--rule, #e6e8eb) }
.sn-tk-row:first-child { border-top: 0 }
.sn-tk-row:hover { background: #f8f9fa; color: inherit }
.sn-tk-row__num { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums }
.sn-tk-row__main small { display: block; color: #6b737a; margin-top: 2px }
.sn-tk-row__st { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap }
.sn-tk-row.is-unread { background: color-mix(in srgb, var(--primary, #e30613) 5%, #fff) }
.sn-tk-new { font-size: .78rem; font-weight: 700; color: #fff; background: var(--primary, #e30613); border-radius: 10px; padding: 1px 8px }
@media (max-width: 575px) { .sn-tk-row { grid-template-columns: 1fr; } .sn-tk-row__st { justify-content: flex-start } }
.sn-tk-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 16px; padding: 14px 16px; margin: 0 0 18px; border-radius: 10px; background: #f6f7f8 }
.sn-tk-fields span { display: block; font-size: .8rem; color: #6b737a }
.sn-tk-chat { display: flex; flex-direction: column; gap: 10px; margin: 0 0 20px }
.sn-tk-msg { max-width: 85%; padding: 10px 14px; border-radius: 12px; line-height: 1.5 }
.sn-tk-msg--customer { align-self: flex-end; background: #eef1f4; border-bottom-right-radius: 4px }
.sn-tk-msg--manager { align-self: flex-start; background: #e5f4ea; border-bottom-left-radius: 4px }
.sn-tk-msg__who { font-size: .8rem; color: #6b737a; margin-bottom: 3px }
.sn-tk-msg__text { overflow-wrap: anywhere }
.sn-tk-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px }
.sn-tk-files a { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 8px; background: rgba(255, 255, 255, .8); border: 1px solid #dfe3e7; color: inherit; font-size: .88rem; max-width: 100%; overflow-wrap: anywhere }
.sn-tk-files small { color: #6b737a }
.sn-tk-sys { align-self: center; font-size: .82rem; color: #6b737a }
.sn-tk-reply { padding: 16px; border: 1px solid var(--rule, #e6e8eb); border-radius: 12px }
.sn-tk-reply__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px }
.sn-tk-attach { display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; color: var(--primary, #e30613); font-weight: 600 }
.sn-tk-picked { font-size: .85rem; color: #6b737a; overflow-wrap: anywhere }
.sn-tk-err { display: none; margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: #fdecea; color: #b02a1b; font-size: .9rem }
.sn-tk-err.on { display: block }
.sn-tk-close { margin-top: 12px }
.sn-tk-note, .sn-tk-filehint { font-size: .85rem; color: #6b737a; margin-top: 8px }
.sn-tk-goals { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 0 0 16px }
.sn-tk-goal { display: block; margin: 0; cursor: pointer }
.sn-tk-goal input { position: absolute; opacity: 0 }
.sn-tk-goal span { display: block; height: 100%; padding: 10px 12px; border: 1px solid #d5d9dd; border-radius: 10px }
.sn-tk-goal small { display: block; color: #6b737a; margin-top: 2px; line-height: 1.35 }
.sn-tk-goal input:checked + span { border-color: var(--primary, #e30613); box-shadow: 0 0 0 1px var(--primary, #e30613); background: color-mix(in srgb, var(--primary, #e30613) 4%, #fff) }
.sn-tk-goal input:focus-visible + span { outline: 2px solid var(--primary, #e30613); outline-offset: 2px }
.sn-tk-who { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; align-items: center; font-size: .92rem; padding: 12px 14px; border-radius: 10px; background: #f6f7f8; margin: 0 0 14px }
.sn-tk-who > span { color: #6b737a }
.sn-tk-who > b, .sn-tk-who > div { min-width: 0; overflow-wrap: anywhere }
.sn-tk-who select.form-control { height: 38px; background: #fff }
.sn-tk-who .sn-tk-nopayer { font-weight: 400 }
@media (max-width: 420px) { .sn-tk-who { grid-template-columns: 1fr; gap: 2px } .sn-tk-who > span { margin-top: 6px } }
.sn-tk-set { border: 0; padding: 0; margin: 0; min-width: 0 }
.sn-tk-hint { color: #6b737a; margin: 0 0 12px }
.sn-tk-prod { position: relative }
.sn-tk-fixed { padding: 10px 12px; border-radius: 8px; border: 1px solid #e6e8eb }
.sn-tk-sugg { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin-top: -12px; background: #fff; border: 1px solid #d5d9dd; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); max-height: 280px; overflow: auto }
.sn-tk-sugg button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 12px; font-size: .9rem; line-height: 1.3 }
.sn-tk-sugg button:hover, .sn-tk-sugg button.on { background: #f1f3f5 }
.sn-tk-docs { display: flex; flex-wrap: wrap; gap: 6px 16px }
.sn-tk-docs label { display: inline-flex !important; gap: 6px; align-items: center; font-weight: 400 !important; margin: 0 !important }
.sn-tk-nopayer { padding: 10px 12px; border-radius: 8px; background: #fff3dc; color: #7a4700 }
.sn-tk-form .form-control { margin-bottom: 0 }
.sn-tk-form .sn-field { margin-bottom: 14px }
.sn-tk-form .sn-field > label { display: block; font-weight: 600; font-size: .9rem; margin: 0 0 6px }
.sn-tk-form .sn-field > label i { font-style: normal; color: var(--primary, #e30613) }
/* the window of the buttons of the site */
#sn-ticket-modal .modal-dialog { max-width: 560px }
#sn-ticket-modal .modal-content { border: 0; border-radius: 12px; padding: 26px 28px }
#sn-ticket-modal .close { position: absolute; right: 16px; top: 12px; z-index: 2; font-size: 1.8rem }
#sn-ticket-modal .sn-tk-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 4px; padding-right: 24px }
#sn-ticket-modal .sn-tk-done p { font-size: 1.05rem; color: #17643a; font-weight: 600 }
#sn-ticket-modal .form-control { height: 42px }
#sn-ticket-modal textarea.form-control { height: auto }
@media (max-width: 420px) { #sn-ticket-modal .modal-content { padding: 22px 16px } }
/* the button of the header «Отправить заявку» and the buttons of the card */
.sn-tk-head { color: #fff !important }
.sn-tk-head svg { color: #fff }
.sn-tk-cardlinks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: .9rem }
.sn-tk-cardlinks a { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; border-bottom: 1px dashed currentColor; line-height: 1.2 }
.sn-tk-cardlinks a:hover { color: var(--primary, #e30613) }
.sn-tk-price { margin-top: 8px }