/* [cc 20.10 2010c, punctul 10] sx-exp-client.css — Case de expediție, capitolul 3 (#ce-vede-clientul): emailul, linkul, factura (parts/exp-client.ro.php), „baby strat”.
   Trei coloane egale (pe telefon una sub alta): titlul scurt → un fragment mic → o propoziție. Tokenii paginii vin din final.css / site27.css; tema: html[data-theme]. Fără JS. */
.sx-xc {
  --xc-ok: #6cc08f;
  --xc-sh: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 21px 34px -21px rgba(0, 0, 0, .9);
}
:root[data-theme="light"] .sx-xc {
  --xc-ok: #1f6e3a;
  --xc-sh: 0 1px 1px rgba(23, 32, 43, .06), 0 13px 34px -21px rgba(23, 32, 43, .42);
}
.s27 .sx-xc .sx-xc-head { margin-bottom: clamp(34px, 3.6vw, 55px); }
.s27 .sx-xc :where(p, h3, ol, ul, em) { margin: 0; }
.sx-xc .xc-num { font-variant-numeric: tabular-nums; }
.sx-xc .xc-i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* subgrid: titlurile, fragmentele și propozițiile stau pe aceleași 3 rânduri în cele 3 coloane */
.s27 .sx-xc .xc-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; column-gap: 34px; row-gap: 13px; }
.s27 .sx-xc .xc-c { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 13px; min-width: 0; padding-top: 13px; border-top: 1px solid var(--rule); }
.s27 .sx-xc .xc-c::marker { content: none; }
.s27 .sx-xc .xc-h { font: 400 21px/29px var(--ws); letter-spacing: -.012em; word-spacing: 0; color: var(--ink); text-wrap: balance; }
.s27 .sx-xc .xc-t { font: 400 16px/24px var(--ws); letter-spacing: -.004em; word-spacing: 0; color: var(--ink2); text-wrap: pretty; }

/* fragmentul */
.s27 .sx-xc .xc-fr {
  min-width: 0; padding: 13px 16px 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); box-shadow: var(--xc-sh);
  font: 400 15px/1.4 var(--ws); letter-spacing: 0; word-spacing: 0; color: var(--ink);
}
.s27 .sx-xc .xc-from { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); font: 400 14px/20px var(--ws); color: var(--mute); }
.s27 .sx-xc .xc-from b { font-weight: 600; color: var(--ink); }
.s27 .sx-xc .xc-from .xc-i { color: var(--ink); }
.s27 .sx-xc .xc-subj { margin-top: 13px; font: 500 17px/24px var(--ws); color: var(--ink); text-wrap: pretty; }
.s27 .sx-xc .xc-mails { list-style: none; padding: 0; }
.s27 .sx-xc .xc-mails li + li { margin-top: 8px; border-top: 1px solid var(--rule); }
.s27 .sx-xc .xc-mails .xc-subj { margin-top: 8px; }
.s27 .sx-xc .xc-where { font: 400 14px/20px var(--ws); color: var(--mute); }
.s27 .sx-xc .xc-att {
  display: flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; margin-top: 8px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px;
  font: 400 14px/19px var(--ws); color: var(--ink2);
}
.s27 .sx-xc .xc-att span { min-width: 0; overflow-wrap: anywhere; }

/* linkul de urmărire */
.s27 .sx-xc .xc-tt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 13px; }
.s27 .sx-xc .xc-tt b { font: 600 16px/22px var(--ws); }
.s27 .sx-xc .xc-st { padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; font: 400 13px/18px var(--ws); color: var(--ink2); }
.s27 .sx-xc .xc-prog { margin-top: 8px; font: 400 14px/20px var(--ws); color: var(--mute); }
.s27 .sx-xc .xc-pb { display: block; height: 5px; margin-top: 5px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.s27 .sx-xc .xc-pb i { display: block; width: 50%; height: 100%; background: var(--xc-ok); }
.s27 .sx-xc .xc-stages { list-style: none; padding: 0; margin-top: 8px; }
.s27 .sx-xc .xc-stages li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: start; column-gap: 8px; padding: 8px 0 0; }
.s27 .sx-xc .xc-stages li + li { margin-top: 8px; border-top: 1px solid var(--rule); }
.s27 .sx-xc .xc-stages .xc-i { margin-top: 3px; color: var(--mute); }
.s27 .sx-xc .xc-stages .is-done .xc-i { color: var(--xc-ok); stroke-width: 2.2; }
.s27 .sx-xc .xc-stages span { font: 400 14px/20px var(--ws); color: var(--ink2); }
.s27 .sx-xc .xc-stages span b { display: block; font: 600 15px/21px var(--ws); color: var(--ink); }
.s27 .sx-xc .xc-stages em { font: 400 14px/21px var(--ws); font-style: normal; color: var(--mute); }
.s27 .sx-xc .xc-stages .is-done em { font-weight: 600; color: var(--xc-ok); }

.s27 .sx-xc .xc-foot { margin-top: 21px; font: 400 14px/22px var(--ws); color: var(--mute); }

@media (max-width: 1100px) {
  .s27 .sx-xc .xc-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 21px; }
  .s27 .sx-xc .xc-c { grid-row: auto; grid-template-columns: minmax(0, 38.2fr) minmax(0, 61.8fr); grid-template-rows: auto 1fr; column-gap: 34px; row-gap: 5px; align-items: start; }
  .s27 .sx-xc .xc-h { grid-column: 1; grid-row: 1; }
  .s27 .sx-xc .xc-t { grid-column: 1; grid-row: 2; }
  .s27 .sx-xc .xc-fr { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 760px) {
  .s27 .sx-xc .xc-c { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; row-gap: 13px; padding-top: 21px; }
  .s27 .sx-xc .xc-h, .s27 .sx-xc .xc-t, .s27 .sx-xc .xc-fr { grid-column: 1; grid-row: auto; }
  .s27 .sx-xc .xc-h { font-size: 20px; line-height: 27px; }
}