@import url("profile.css");

/* Ported to match palPrintFront/support.css exactly (the channel strip with
   vertical dividers instead of separate cards, icon-in-shell form inputs). */

.pp-breadcrumb { display: flex; align-items: center; gap: .55rem; margin-bottom: var(--sp-4); color: var(--pp-text-muted); font-size: .75rem; }
.pp-breadcrumb a { color: var(--pp-text-muted); text-decoration: none; }
.pp-breadcrumb a:hover { color: var(--pp-primary); }
.pp-breadcrumb span { color: var(--pp-text-strong); font-weight: 700; }

.pp-page-heading { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.pp-page-heading > div { min-width: 0; }
.pp-heading-icon { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; color: var(--pp-primary); background: var(--pp-primary-soft); border-radius: 9px; font-size: 1.25rem; }
.pp-page-heading h1 { margin: 0; color: var(--pp-text-strong); font-size: 1.5rem; }
.pp-page-heading p { margin: .3rem 0 0; color: var(--pp-text-muted); font-size: .8125rem; }
.pp-role-badge { margin-inline-start: auto; display: inline-flex; flex: none; align-items: center; gap: .45rem; padding: .45rem .7rem; color: var(--pp-blue-800); background: var(--pp-primary-soft); border: 1px solid var(--pp-primary-border); border-radius: var(--pp-radius-pill); font-size: .75rem; font-weight: 700; white-space: nowrap; }

.pp-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); }
.pp-field { display: flex; flex-direction: column; gap: .35rem; }
.pp-field.is-wide { grid-column: 1 / -1; }
.pp-field > span { color: var(--pp-text-strong); font-size: .8125rem; font-weight: 600; }
.pp-input-shell {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 42px;
  padding-inline: .7rem;
  background: var(--pp-surface-muted);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-sm);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.pp-input-shell.is-textarea { align-items: flex-start; padding-block: .55rem; }
.pp-input-shell:hover { border-color: var(--pp-blue-300); }
.pp-input-shell:focus-within { border-color: var(--pp-primary); box-shadow: 0 0 0 3px rgba(var(--pp-blue-rgb), .18); }
.pp-input-shell > i { flex: none; color: var(--pp-primary); font-size: 1rem; }
.pp-input-shell input, .pp-input-shell select, .pp-input-shell textarea {
  width: 100%;
  padding: .5rem 0;
  color: var(--pp-text-body);
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: .8125rem;
}
.pp-input-shell textarea { resize: vertical; min-height: 72px; }

.support-channels { display: grid; grid-template-columns: repeat(3, 1fr); margin: var(--sp-3) 0 var(--sp-4); }
.support-channel {
  position: relative;
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  color: inherit;
  text-align: start;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.support-channel + .support-channel::before { content: ""; position: absolute; inset-block: 14px; inset-inline-start: 0; width: 1px; background: var(--pp-border); }
.support-channel:hover { background: transparent; }
.support-channel > i { flex: none; color: var(--pp-primary); font-size: 1.35rem; }
.support-channel > span { min-width: 0; flex: 1; display: grid; gap: 2px; }
.support-channel strong { font-size: .85rem; color: var(--pp-text-strong); font-weight: 700; }
.support-channel small { color: var(--pp-text-muted); font-size: .7rem; }
.support-channel > b { flex: none; color: var(--pp-primary); font-size: .7rem; font-weight: 700; white-space: nowrap; }

.support-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr); gap: var(--sp-4); align-items: start; }
.support-side { display: grid; gap: var(--sp-4); }

.support-upload { grid-column: 1 / -1; min-height: 54px; display: flex; align-items: center; gap: var(--sp-2); padding: .6rem .75rem; border: 1px dashed var(--pp-blue-200); border-radius: var(--pp-radius-sm); cursor: pointer; }
.support-upload:hover { border-color: var(--pp-primary); }
.support-upload > i { flex: none; color: var(--pp-primary); font-size: 1.1rem; }
.support-upload > span { flex: 1; display: grid; }
.support-upload strong { color: var(--pp-text-strong); font-size: .78rem; }
.support-upload small { color: var(--pp-text-muted); font-size: .68rem; }
.support-upload input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.support-upload > b { flex: none; margin-inline-start: auto; color: var(--pp-primary); font-size: .72rem; font-weight: 700; white-space: nowrap; }

.support-form-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); padding-top: var(--sp-3); margin-top: var(--sp-3); border-top: 1px solid var(--pp-border); }

.support-ticket { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) 1px; border-bottom: 1px solid var(--pp-border); }
.support-ticket:last-child { border-bottom: 0; }
.support-ticket div { display: grid; gap: 2px; }
.support-ticket strong { display: block; color: var(--pp-text-strong); font-size: .78rem; }
.support-ticket small { display: block; color: var(--pp-text-muted); font-size: .68rem; }
.support-ticket > span { flex: none; padding: .2rem .55rem; color: #15803d; background: #dcfce7; border-radius: var(--pp-radius-pill); font-size: .65rem; font-weight: 700; }
.support-ticket > span.is-open { color: #995300; background: #fff0bf; }

.support-faq details { border-bottom: 1px solid var(--pp-border); }
.support-faq details:last-child { border-bottom: 0; }
.support-faq summary {
  position: relative;
  padding: .7rem 24px .7rem 1px;
  color: var(--pp-text-strong);
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.support-faq summary::-webkit-details-marker { display: none; }
.support-faq summary::after { content: "+"; position: absolute; inset-inline-end: 2px; color: var(--pp-primary); font-size: 1.1rem; font-weight: 500; }
.support-faq details[open] summary::after { content: "\2212"; }
.support-faq details p { margin: 0; padding: 0 1px .7rem; color: var(--pp-text-muted); font-size: .72rem; line-height: 1.8; }

@media (max-width: 900px) {
  .support-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .support-channels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .support-channel { min-height: 0; flex-direction: column; justify-content: center; gap: 6px; padding: var(--sp-3) 6px; text-align: center; }
  .support-channel > span { flex: 0 0 auto; justify-items: center; }
  .support-channel strong { font-size: .75rem; }
  .support-channel small { font-size: .6rem; overflow-wrap: anywhere; }
  .support-channel > b { font-size: .65rem; }
}
@media (max-width: 560px) {
  .pp-field-grid { gap: var(--sp-3); }
  .pp-field > span:first-child { font-size: .75rem; }
  .pp-input-shell { gap: .4rem; padding-inline: .55rem; }
  .pp-input-shell select, .pp-input-shell input { min-width: 0; font-size: .8rem; text-overflow: ellipsis; }
}

.pp-page-heading h1#pageTitle { font-size: 1.2rem; }
@media (max-width: 560px) { .pp-page-heading h1#pageTitle { font-size: 1.05rem; } }