/* Client Portal 4.2 — Support forms, conversations, archive and pagination. */

.cp-portal .cp-support-ticket-form label {
  display: block;
  margin-bottom: 7px;
  color: var(--cp-text);
  font-weight: 700;
}

.cp-portal .cp-support-ticket-form input:focus,
.cp-portal .cp-support-ticket-form select:focus,
.cp-portal .cp-support-ticket-form textarea:focus,
.cp-portal .cp-support-ticket-comment-form textarea:focus {
  border-color: var(--cp-accent);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(216, 47, 73,
.12);
}

.cp-portal .cp-support-ticket-empty p {
  margin: 0;
  color: var(--cp-text-soft);
  line-height: 1.55;
}

.cp-portal .cp-support-box {
  margin-bottom: 1rem;
  background: var(--cp-card);
  border: 1px solid var(--cp-border);
  border-radius: 18px;
  box-shadow: var(--cp-shadow);
  padding: 16px;
  color: var(--cp-text-soft);
  line-height: 1.62;
}

.cp-portal .cp-support-messages-section {
  width: 100%;
  max-width: none;
  margin-bottom: 24px;
}

.cp-portal .cp-support-messages-section .cp-panel-card,
.cp-portal .cp-support-messages-section .cp-account-card {
  width: 100%;
  max-width: none;
}

.cp-portal .cp-support-hours {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 8px 0 18px;
  padding: 14px 16px;
  border: 1px solid #f0c7cf;
  border-radius: 8px;
  background: #fff8f9;
  color: #4b5563;
  font-size: .94rem;
  line-height: 1.6;
  box-shadow: none;
}

.cp-portal .cp-support-hours-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: 999px;
  background: #fff0f3;
  color: #df3047;
  font-size: .82rem;
  line-height: 1;
}

.cp-portal .cp-support-hours-text {
  min-width: 0;
}

.cp-portal .cp-support-hours strong {
  color: var(--cp-accent);
}

.cp-portal .cp-support-tickets-card {
  margin-bottom: 1.5rem;
}

.cp-portal .cp-support-ticket-layout {
  display: grid;
  gap: 18px;
}

.cp-portal .cp-support-ticket-form {
  padding: 18px;
  border: 1px solid var(--cp-border);
  border-radius: 16px;
  background: #fff;
}

.cp-portal .cp-support-ticket-form .cp-form-field {
  margin-bottom: 14px;
}

.cp-portal .cp-support-ticket-form input,
.cp-portal .cp-support-ticket-form select {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--cp-border);
  border-radius: 10px;
  background: #fff;
  color: var(--cp-text);
  box-shadow: none;
}

.cp-portal .cp-support-ticket-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--cp-border);
  border-radius: 10px;
  background: #fff;
  color: var(--cp-text);
  box-shadow: none;
  min-height: 130px;
  resize: vertical;
}

.cp-portal .cp-support-ticket-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 16px;
}

.cp-portal .cp-support-ticket-list {
  display: grid;
  gap: 14px;
}

.cp-portal .cp-support-ticket-empty {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--cp-border);
  border-radius: 16px;
  background: #fff;
}

.cp-portal .cp-support-ticket-item {
  padding: 16px;
  border: 1px solid var(--cp-border);
  border-radius: 16px;
  background: #fff;
}

.cp-portal .cp-support-ticket-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.cp-portal .cp-support-ticket-title {
  margin: 0 0 6px;
  color: var(--cp-text);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

.cp-portal .cp-support-ticket-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--cp-muted);
  font-size: .88rem;
  line-height: 1.45;
}

.cp-portal .cp-support-ticket-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--cp-text-soft);
  background: #f5f7fa;
  border: 1px solid #e2e7ee;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.cp-portal .cp-support-ticket-status--open {
  color: #175cd3;
  background: #eff8ff;
  border-color: #b2ddff;
}

.cp-portal .cp-support-ticket-status--in_progress {
  color: #5925dc;
  background: #f4f3ff;
  border-color: #d9d6fe;
}

.cp-portal .cp-support-ticket-status--waiting_user {
  color: #b54708;
  background: #fff6ed;
  border-color: #fedf89;
}

.cp-portal .cp-support-ticket-status--closed {
  color: #027a48;
  background: #ecfdf3;
  border-color: #abefc6;
}

.cp-portal .cp-support-ticket-message,
.cp-portal .cp-support-ticket-comment-body {
  color: var(--cp-text-soft);
  font-size: .94rem;
  line-height: 1.58;
}

.cp-portal .cp-support-ticket-dialog {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.cp-portal .cp-support-ticket-comment {
  padding: 12px;
  border: 1px solid #edf0f4;
  border-radius: 12px;
  background: #fafbfc;
}

.cp-portal .cp-support-ticket-comment--admin {
  background: var(--cp-success-bg);
  border-color: var(--cp-success-border);
}

.cp-portal .cp-support-ticket-comment-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: 6px;
  color: var(--cp-text);
  font-size: .9rem;
}

.cp-portal .cp-support-ticket-comment-head span {
  color: var(--cp-muted);
  font-size: .84rem;
}

.cp-portal .cp-support-ticket-comment-form {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #edf0f4;
}

.cp-portal .cp-support-ticket-comment-form label {
  display: block;
  margin-bottom: 7px;
  color: var(--cp-text);
  font-size: .98rem;
  font-family: inherit;
  font-weight: 700;
  line-height: 1.35;
}

.cp-portal .cp-support-ticket-comment-form textarea {
  width: 100%;
  min-height: 96px;
  padding: 10px 12px;
  border: 1px solid var(--cp-border);
  border-radius: 10px;
  background: #fff;
  color: var(--cp-text);
  font-size: .98rem;
  font-family: inherit;
  line-height: 1.5;
  box-shadow: none;
  resize: vertical;
}

.cp-portal .cp-support-ticket-comment-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}

.cp-portal .cp-support-ticket-group-title {
  margin: 0 0 10px;
  color: var(--cp-text);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

.cp-portal .cp-support-ticket-group-title--closed {
  color: var(--cp-muted);
}

.cp-portal .cp-support-closed-details {
  margin-top: 18px;
  scroll-margin-top: 96px;
}

.cp-portal .cp-support-closed-details > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
}

.cp-portal .cp-support-closed-details > summary::before {
  content: "▸";
  color: var(--cp-muted);
  font-size: .9rem;
  line-height: 1;
  transition: transform .16s ease;
}

.cp-portal .cp-support-closed-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f5f7fa;
  border: 1px solid #e2e7ee;
  color: var(--cp-muted);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
}

.cp-portal .cp-support-closed-details .cp-support-ticket-closed-list {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}

.cp-portal .cp-support-closed-details .cp-support-ticket-item {
  opacity: .9;
}

.cp-portal .cp-support-ticket-item--collapsible {
  padding: 0;
  overflow: hidden;
}

.cp-portal .cp-support-ticket-summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  cursor: pointer;
  list-style: none;
  background: #fff;
  -webkit-tap-highlight-color: transparent;
}

.cp-portal .cp-support-closed-details > summary::-webkit-details-marker,
.cp-portal .cp-support-ticket-summary::-webkit-details-marker {
  display: none;
}

.cp-portal .cp-support-ticket-summary::before {
  content: "▸";
  display: block;
  flex: 0 0 auto;
  margin-top: .3rem;
  color: var(--cp-muted);
  font-size: .9rem;
  line-height: 1;
  transition: transform .16s ease;
}

.cp-portal .cp-support-closed-details[open] > summary::before,
.cp-portal .cp-support-ticket-item--collapsible[open] > .cp-support-ticket-summary::before {
  transform: rotate(90deg);
}

.cp-portal .cp-support-ticket-summary .cp-support-ticket-head {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.cp-portal .cp-support-ticket-summary:focus-visible {
  position: relative;
  z-index: 1;
  box-shadow: inset 0 0 0 3px rgba(216, 47, 73, .18);
}

.cp-portal .cp-support-ticket-collapsible-body {
  padding: 14px 16px 16px;
  border-top: 1px solid #edf0f4;
}

.cp-portal .cp-support-closed-more {
  margin-top: 16px;
  display: flex;
  justify-content: flex-start;
}

.cp-account-page .cp-support-ticket-form,
.cp-account-page .cp-support-ticket-empty,
.cp-account-page .cp-support-ticket-item {
  border-radius: var(--cp-radius-inner);
  box-shadow: var(--cp-shadow-inner);
}

.cp-account-page .cp-support-box,
.cp-account-page .cp-support-ticket-comment,
.cp-account-page .cp-support-hours {
  border-radius: var(--cp-radius-inner);
  box-shadow: none;
}

.cp-account-page .cp-support-ticket-form input,
.cp-account-page .cp-support-ticket-form select,
.cp-account-page .cp-support-ticket-form textarea,
.cp-account-page .cp-support-ticket-comment-form textarea {
  border-radius: var(--cp-radius-control);
}

.cp-account-page .cp-support-ticket-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  min-height: 28px;
  padding: 5px 10px 5px 9px;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(15, 23, 42,
.04),
    inset 0 1px 0 rgba(255, 255, 255,
.72);
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .005em;
}

.cp-account-page .cp-support-ticket-status::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}

.cp-account-page .cp-support-ticket-status--open {
  color: #175cd3;
  background: linear-gradient(180deg,
#f8fcff 0%,
#eff8ff 100%);
  border-color: #b9dcfb;
}

.cp-account-page .cp-support-ticket-status--open::before {
  box-shadow: 0 0 0 3px rgba(23, 92, 211,
.10);
}

.cp-account-page .cp-support-ticket-status--in_progress {
  color: #5925dc;
  background: linear-gradient(180deg,
#faf9ff 0%,
#f4f3ff 100%);
  border-color: #d8d3fe;
}

.cp-account-page .cp-support-ticket-status--in_progress::before {
  box-shadow: 0 0 0 3px rgba(89, 37, 220,
.10);
}

.cp-account-page .cp-support-ticket-status--waiting_user {
  color: #b54708;
  background: linear-gradient(180deg,
#fffaf5 0%,
#fff6ed 100%);
  border-color: #f6d58d;
}

.cp-account-page .cp-support-ticket-status--waiting_user::before {
  box-shadow: 0 0 0 3px rgba(181, 71, 8,
.10);
}

.cp-account-page .cp-support-ticket-status--closed {
  color: #027a48;
  background: linear-gradient(180deg,
#f5fff8 0%,
#ecfdf3 100%);
  border-color: #ace8c3;
}

.cp-account-page .cp-support-ticket-status--closed::before {
  box-shadow: 0 0 0 3px rgba(2, 122, 72,
.10);
}

.cp-portal .cp-support-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--cp-border);
}

.cp-portal .cp-support-pagination-pages {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

.cp-portal .cp-support-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid var(--cp-border);
  border-radius: 10px;
  background: #fff;
  color: var(--cp-text-soft);
  font-size: .88rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.cp-portal .cp-support-page-link.is-active {
  border-color: var(--cp-accent);
  background: var(--cp-accent);
  color: #fff;
}

.cp-portal .cp-support-page-link.is-disabled {
  cursor: default;
  opacity: .48;
  pointer-events: none;
}

.cp-portal .cp-support-ticket-summary:focus,
.cp-portal .cp-support-page-link:focus {
  outline: 0;
}

.cp-portal .cp-support-page-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(216, 47, 73, .18);
}

.cp-portal .cp-support-page-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  color: var(--cp-muted);
  font-weight: 700;
}

.cp-portal .cp-support-pagination-summary {
  color: var(--cp-muted);
  font-size: .86rem;
  font-weight: 650;
  line-height: 1.4;
  text-align: center;
}

.cp-portal .cp-support-closed-more--archive {
  justify-content: center;
  margin-top: 14px;
}