/**
 * CHS shared components — storefront, WordPress admin, and support screens.
 * Unscoped on purpose: the same markup must look the same everywhere.
 * Needs tokens.css first.
 */

/* Shared top-bar links: Store · My Services · Support · Panel (store, My Account, Plesk) */
.chs-xnav {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  font-family: var(--cyrus-font);
}

.chs-xnav a {
  display: inline-block;
  padding: 6px 10px;
  color: var(--cyrus-white);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

.chs-xnav a:hover {
  color: var(--cyrus-hover);
}

.chs-xnav .is-current > a {
  background: var(--cyrus-gold);
  color: var(--cyrus-ink);
}

.chs-xnav .is-current > a:hover {
  background: var(--cyrus-hover);
  color: var(--cyrus-ink);
}

@media (max-width: 860px) {
  .chs-xnav .chs-xnav__link {
    display: none;
  }
}

.chs-status {
  display: inline-block;
  padding: 2px 10px;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--cyrus-ink);
  background: var(--cyrus-white);
  border: 1px solid var(--cyrus-ink);
  border-radius: var(--cyrus-radius);
  white-space: nowrap;
}

.chs-status--active,
.chs-status--ticket-answered {
  background: var(--cyrus-hover);
  border-color: var(--cyrus-hover);
}

.chs-status--overdue,
.chs-status--ticket-open {
  background: var(--cyrus-gold);
  border-color: var(--cyrus-gold);
}

.chs-status--suspended {
  background: var(--cyrus-black);
  border-color: var(--cyrus-black);
  color: var(--cyrus-white);
}

.chs-status--cancelled,
.chs-status--ticket-closed {
  color: var(--cyrus-muted);
  border-color: var(--cyrus-field);
}

.chs-ticket-thread {
  margin: 16px 0 24px;
}

.chs-ticket-msg {
  border: 1px solid var(--cyrus-line);
  border-left: 4px solid var(--cyrus-hover);
  padding: 12px 16px;
  margin-bottom: 12px;
  background: var(--cyrus-white);
}

.chs-ticket-msg--staff {
  border-left-color: var(--cyrus-gold);
  background: var(--cyrus-gold-soft);
}

.chs-ticket-msg header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.chs-link-button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--cyrus-link);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

.chs-link-button:hover {
  color: var(--cyrus-ink);
  background: var(--cyrus-hover);
}