/* ============================================================
   Fast Usenet — HESK customer-side brand skin.
   Loaded LAST (via head.txt) so it overrides the hesk3 theme.
   ============================================================ */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../img/fu/inter-latin.woff2") format("woff2");
}

/* ---- Rebrand HESK's theme variables to Fast Usenet red + neutral text ---- */
:root {
  --primary: #b30000;
  --secondary: #d32f2f;
  --tertiary: #ff4d4d;
  --font__pri-clr: #0b1020;
  --font__sec-clr: #5b6472;
  --link__pri-clr: #d32f2f;
  --link__pri-hover-clr: #b30000;
  --link__sec-clr: #d32f2f;
  --link__sec-hover-clr: #b30000;
  --btn__bg-clr-pri: #d32f2f;
  --btn__border-clr-pri: #b30000;
  --main-background: #f7f8fb;
  --breadcrumbs__a-clr: #d32f2f;
  --breadcrumbs__a-hover-clr: #b30000;
}

/* ---- Inter everywhere on the customer side ----
   HESK sets font-family:Lato on ~32 element-specific selectors, so a body rule
   alone won't win. Override broadly (keep monospace for code). */
body.cust-help, body.cust-help * {
  font-family: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
/* Match Astro base typography: 16px / 1.6 (HESK default is 14px/1.57 which reads small). */
body.cust-help { font-size: 16px; line-height: 1.6; color: #5b6472; }
/* Knowledgebase article body — larger, more readable (match Astro article copy). */
.page-view-article .ticket__body_block,
.page-view-article .ticket__body_block p,
.page-view-article .ticket__body_block li { font-size: 16.5px; line-height: 1.75; }
/* Left-align body copy (HESK default justifies it, causing stretched word gaps). */
.page-view-article .ticket__body_block { text-align: left; }
body.cust-help code, body.cust-help pre, body.cust-help kbd, body.cust-help samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace !important;
}

/* ---- Hide HESK's default (logo-only) header — we use our own ---- */
body.cust-help .wrapper .main > .header { display: none !important; }

/* Breathing room below the content card so it (and its box-shadow) clear the footer. */
.cust-help .contr { margin-bottom: 40px; }

/* ---- Keep the required "Powered by HESK" footer, just make it subtle ---- */
body.cust-help .footer { background: transparent; padding: 14px 0; }
body.cust-help .footer p { font-size: 12px; color: #9aa3b2; }

/* ============================================================
   Utility bar (ported from the marketing site)
   ============================================================ */
.fu-container { max-width: 1320px; margin: 0 auto; padding: 0 15px; }

.fu-util { background: #111; font-size: 13.5px; font-family: "Inter Variable", "Inter", sans-serif; }
.fu-util__inner { display: flex; align-items: center; justify-content: space-between; height: 40px; max-width: 1320px; margin: 0 auto; padding: 0 15px; }
.fu-lang { position: relative; }
.fu-lang__btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; background: none; border: 0; color: #cfd3da; font: inherit; padding: 0; }
.fu-lang__btn:hover { color: #fff; }
.fu-lang__flag img { width: 18px; height: auto; display: block; border-radius: 2px; }
.fu-lang__btn svg { width: 13px; height: 13px; }
.fu-lang__menu { position: absolute; top: 100%; left: 0; z-index: 60; min-width: 160px; list-style: none; margin: 6px 0 0; padding: 6px; background: #1b1b1d; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.4); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .18s ease; }
.fu-lang:hover .fu-lang__menu, .fu-lang:focus-within .fu-lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.fu-lang__menu a { display: block; padding: 8px 12px; border-radius: 7px; color: #cfd3da; text-decoration: none; }
.fu-lang__menu a:hover { background: rgba(255,255,255,.07); color: #fff; }
.fu-util__right { display: flex; align-items: center; gap: 14px; }
.fu-util__login { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; text-decoration: none; }
.fu-util__login svg { width: 15px; height: 15px; color: #ff5a5a; }
.fu-util__login:hover { color: #ff5a5a; }
.fu-util__sep { width: 1px; height: 18px; background: rgba(255,255,255,.16); }
.fu-util__social { display: inline-flex; color: #cfd3da; }
.fu-util__social svg { width: 15px; height: 15px; }
.fu-util__social:hover { color: #fff; }

/* ============================================================
   Main nav (ported)
   ============================================================ */
.fu-nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); border-bottom: 1px solid #eceef2; font-family: "Inter Variable", "Inter", sans-serif; }
.fu-nav__inner { display: flex; align-items: center; gap: 24px; height: 74px; }
.fu-nav__logo { flex-shrink: 0; }
.fu-nav__logo img { height: 47px; width: auto; display: block; }
.fu-nav__links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.fu-nav__item { position: relative; }
.fu-nav__link { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; cursor: pointer; font: inherit; padding: 10px 14px; border-radius: 8px; font-size: 15px; font-weight: 600; color: #2a3242; text-decoration: none; white-space: nowrap; transition: color .15s ease, background .15s ease; }
.fu-nav__link:hover { color: #d32f2f; background: #fbeaea; }
.fu-nav__link svg { width: 14px; height: 14px; opacity: .7; }
.fu-nav__drop { position: absolute; top: calc(100% - 2px); left: 0; z-index: 60; min-width: 210px; list-style: none; margin: 0; padding: 8px; background: #fff; border: 1px solid #eceef2; border-radius: 12px; box-shadow: 0 20px 44px -12px rgba(16,24,40,.22); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .18s ease; }
.fu-nav__item--has:hover .fu-nav__drop { opacity: 1; visibility: visible; transform: translateY(0); }
.fu-nav__drop a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14.5px; color: #3a4252; text-decoration: none; }
.fu-nav__drop a:hover { background: #fbeaea; color: #d32f2f; }
.fu-nav__cta { flex-shrink: 0; padding: 10px 22px; border-radius: 999px; background: linear-gradient(135deg, #ff4d4d, #c11616); color: #fff; font-size: 14.5px; font-weight: 700; text-decoration: none; white-space: nowrap; box-shadow: 0 8px 20px -6px rgba(211,47,47,.5); transition: all .2s ease; }
.fu-nav__cta:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -6px rgba(211,47,47,.62); color: #fff; }
.fu-nav__toggle { display: none; background: none; border: 0; cursor: pointer; color: #2a3242; }
.fu-nav__toggle svg { width: 28px; height: 28px; }

@media (max-width: 991px) {
  .fu-nav__toggle { display: inline-flex; order: 3; margin-left: auto; margin-right: 8px; }
  .fu-nav__cta { display: none; }
  .fu-nav__links { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; flex-direction: column; align-items: stretch; gap: 0; margin: 0; background: #fff; border-bottom: 1px solid #eceef2; padding: 8px; box-shadow: 0 20px 30px -16px rgba(16,24,40,.2); display: none; }
  .fu-nav__links.is-open { display: flex; }
  .fu-nav__link { width: 100%; justify-content: space-between; }
  .fu-nav__drop { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 6px 12px; display: none; }
  .fu-nav__item--has.is-open .fu-nav__drop { display: block; }
}
@media (max-width: 575px) {
  .fu-nav__inner { height: 64px; gap: 12px; padding: 0 6px; }
  .fu-nav__logo { margin-left: 10px; }
  .fu-nav__logo img { height: 34px; }
}

/* ============================================================
   Footer (ported)
   ============================================================ */
/* Footer metrics mirror the marketing site (Footer.astro, measured 2026-09-22): its footer inherits NO line-height (computes to normal, 29px per link row), so the body line-height 1.6 must not leak in here; top padding 64/48, bottom bar 20. */
.fu-footer { background: linear-gradient(180deg, #1a1919 0%, #0d0d0d 100%); color: #aab2c2; line-height: normal; font-family: "Inter Variable", "Inter", sans-serif; }
.fu-footer__top { padding: 64px 0 48px; }
.fu-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 991px) { .fu-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; } .fu-footer__brand { grid-column: 1 / -1; } }
.fu-footer__logo { height: 37px; width: auto; margin-bottom: 18px; }
.fu-footer__brand p { font-size: 14px; line-height: 1.65; margin: 0 0 20px; max-width: 320px; }
.fu-footer__social { display: flex; gap: 10px; list-style: none; padding: 0; margin: 0; }
.fu-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; font-size: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #cdd3df; transition: all .2s ease; }
.fu-footer__social a:hover { background: #d32f2f; border-color: #d32f2f; color: #fff; transform: translateY(-2px); }
.fu-footer__col h3 { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin: 0 0 16px; }
.fu-footer__col ul { list-style: none; padding: 0; margin: 0; }
.fu-footer__col li { margin-bottom: 10px; }
.fu-footer__col a { font-size: 14px; color: #9aa3b5; text-decoration: none; transition: color .18s ease; }
.fu-footer__col a:hover { color: #ff5a5a; }
.fu-footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0; }
.fu-footer__bottominner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.fu-footer__bottominner p { margin: 0; font-size: 13px; color: #7c869a; }
.fu-footer__legal { display: flex; gap: 20px; }
.fu-footer__legal a { font-size: 13px; color: #7c869a; text-decoration: none; transition: color .18s ease; }
.fu-footer__legal a:hover { color: #fff; }
@media (max-width: 575px) { .fu-footer__bottominner { flex-direction: column; text-align: center; } }

/* ============================================================
   Custom quick-help link grid on the support homepage
   ============================================================ */
.page-index .nav { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; justify-content: stretch; margin-top: 40px; }
.page-index .nav .navlink { margin: 0; max-width: none; width: 100%; padding: 26px 26px; }
.page-index .nav .navlink .icon-in-circle { width: 54px; height: 54px; margin-right: 18px; }
.page-index .nav .navlink .icon-in-circle .icon { width: 26px; height: 26px; }
.page-index .nav .navlink__title { font-size: 17px; }
.page-index .nav .navlink__descr { font-size: 13.5px; }
@media (max-width: 640px) { .page-index .nav { grid-template-columns: 1fr; } }
/* Our inline line-icons render white on the red icon circle. */
.page-index .nav .navlink .fu-qhicon { fill: none; stroke: #fff; }

/* Hide the lone "Top articles" tab label on the homepage KB section. */
.page-index .tabbed__head { display: none; }
/* Space between the "Knowledgebase" heading and the article boxes. */
.page-index .article__heading { margin-bottom: 28px; }

/* KB article previews on the homepage: 2-column card grid. */
.page-index .tabbed__tabs_tab.is-visible {
  display: grid; grid-template-columns: 1fr 1fr; gap: 15px;
  background: transparent; box-shadow: none; padding: 0;
}
.page-index .tabbed__tabs_tab .preview {
  width: auto; border-bottom: 0;
  border: 1px solid #e8ebf0; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
@media (max-width: 640px) { .page-index .tabbed__tabs_tab.is-visible { grid-template-columns: 1fr; } }

/* ============================================================
   Inner-page hero band (ported from the marketing PageHero)
   ============================================================ */
.fu-pagehero {
  position: relative; overflow: hidden; isolation: isolate; background: #111;
  font-family: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.fu-pagehero__bg {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(135deg, rgba(13,13,13,.92) 0%, rgba(31,31,31,.88) 55%, rgba(13,13,13,.92) 100%),
    url("../img/fu/page_header.jpg") no-repeat center center #0d0d0d;
  background-size: auto, cover;
}
.fu-pagehero__glow {
  position: absolute; z-index: -1; top: -120px; right: -80px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(211,47,47,.28), transparent 65%);
  filter: blur(20px); pointer-events: none;
}
.fu-pagehero__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 53px 15px; flex-wrap: wrap; max-width: 1320px; margin: 0 auto;
}
.fu-pagehero__eyebrow {
  display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #ff6b6b; margin-bottom: 10px;
}
.fu-pagehero__text h1 {
  margin: 0; color: #fff; font-weight: 900; letter-spacing: -0.02em;
  font-size: clamp(28px, 4vw, 44px); line-height: 1.1;
}
.fu-breadcrumb { font-size: 14px; color: #aab2c2; }
.fu-breadcrumb__item a { color: #cdd3df; text-decoration: none; }
.fu-breadcrumb__item a:hover { color: #ff5a5a; }
.fu-breadcrumb__item:last-child span { color: #fff; font-weight: 600; }
.fu-breadcrumb__sep { margin: 0 8px; color: #4b5468; }
@media (max-width: 575px) { .fu-pagehero__inner { padding: 38px 15px; } }

/* ============================================================
   Ticket submission form — modern Astro-style fields
   ============================================================ */
.page-create-ticket .form-submit-ticket {
  max-width: 720px; margin: 0 auto;
  background: #fff; border: 1px solid #eceef2; border-radius: 16px;
  padding: 34px 36px; box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.page-create-ticket .form-group,
.page-create-ticket .param { margin-bottom: 20px; max-width: none; }
/* Two-column row (Name + Email) */
.page-create-ticket .fu-form-row--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.page-create-ticket .fu-form-row--2col .form-group { min-width: 0; }
@media (max-width: 560px) { .page-create-ticket .fu-form-row--2col { grid-template-columns: 1fr; gap: 0; } }
/* Three-up custom-field selects (Request / Newsreader / Operating System) */
.page-create-ticket .fu-cf-row--3col { display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 0; }
.page-create-ticket .fu-cf-row--3col .form-group { flex: 1 1 100%; }
.page-create-ticket .fu-cf-row--3col .param { flex: 1 1 0; min-width: 180px; }
@media (max-width: 640px) { .page-create-ticket .fu-cf-row--3col .param { flex: 1 1 100%; } }
.page-create-ticket .label,
.page-create-ticket .form-group > label,
.page-view-ticket .form .label,
.page-view-ticket .form .form-group > label {
  display: block; font-weight: 600; font-size: 14px; color: #0b1020; margin-bottom: 7px;
}
/* Required asterisk sits right next to the label text, not floated to the row's right edge. */
.page-create-ticket .label.required:after,
.page-create-ticket label.required:after,
.page-create-ticket .form-group.required .label:after,
.page-create-ticket .form-group.required label:after,
.page-view-ticket .form .label.required:after,
.page-view-ticket .form label.required:after,
.page-view-ticket .form .form-group.required .label:after,
.page-view-ticket .form .form-group.required label:after {
  position: static; right: auto; margin-left: 4px;
}
.page-create-ticket .form .form-control,
.page-create-ticket .form select,
.page-view-ticket .form .form-control {
  width: 100%; height: auto; box-sizing: border-box;
  border: 1px solid #dfe3ea; border-radius: 10px; background: #fff;
  padding: 12px 14px; font-size: 15px; color: #1f2733; line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.page-create-ticket .form .form-control:focus,
.page-create-ticket .form select:focus,
.page-view-ticket .form .form-control:focus {
  border-color: #d32f2f; box-shadow: 0 0 0 3px rgba(211,47,47,.15); outline: none;
}
.page-create-ticket .form textarea.form-control,
.page-view-ticket .form textarea.form-control { min-height: 170px; height: auto; resize: vertical; }
.page-create-ticket .form select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23d32f2f'%3E%3Cpath fill-rule='evenodd' d='M5.2 7.2a1 1 0 011.4 0L10 10.6l3.4-3.4a1 1 0 111.4 1.4l-4.1 4.1a1 1 0 01-1.4 0L5.2 8.6a1 1 0 010-1.4z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
/* Submit → brand pill, centered */
.page-create-ticket .form-footer { text-align: center; margin-top: 6px; }
.page-create-ticket .btn:not(.btn-refresh),
.page-create-ticket .btn-full,
.page-view-ticket .form--reply .btn-full {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; height: auto; line-height: 1; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, #ff4d4d, #c11616); color: #fff;
  padding: 15px 42px; font-size: 16px; font-weight: 700; cursor: pointer;
  box-shadow: 0 10px 24px -6px rgba(211,47,47,.5); transition: transform .18s ease, box-shadow .18s ease;
}
.page-create-ticket .btn:not(.btn-refresh):hover,
.page-view-ticket .form--reply .btn-full:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -6px rgba(211,47,47,.6); color: #fff; }
/* Captcha refresh = small icon button, not a pill */
.page-create-ticket .btn-refresh {
  position: static; right: auto; top: auto; bottom: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-width: 0; padding: 0; margin: 0 0 0 10px;
  border: 1px solid #dfe3ea; border-radius: 10px; background: #fff;
  color: #d32f2f; box-shadow: none; cursor: pointer; vertical-align: middle;
  transition: border-color .15s ease, background .15s ease;
}
.page-create-ticket .btn-refresh:hover { background: #fff5f5; border-color: #d32f2f; transform: none; box-shadow: none; }
.page-create-ticket .btn-refresh .icon-refresh { width: 18px; height: 18px; fill: currentColor; }
/* SPAM prevention block tidy */
.page-create-ticket .form-spam, .page-create-ticket [class*="spam"] { text-align: center; }
/* Captcha block: widen so label fits one line; image + refresh share a centered row. */
.page-create-ticket .captcha-block { max-width: none; }
.page-create-ticket .captcha-block .form-group { text-align: center; }
.page-create-ticket .captcha-block img[name="secimg"] { vertical-align: middle !important; margin: 0; border-radius: 8px; }
.page-create-ticket label[for="mysecnum"] { display: block; text-align: center; margin: 14px 0 8px; }
.page-create-ticket .form #mysecnum,
.page-create-ticket .form #question { display: block; width: 100%; max-width: 260px; margin: 0 auto; text-align: center; }

/* ============================================================
   Ticket view (ticket.php) — modern thread + details sidebar.
   CSS-ONLY on purpose: zero template edits, so upgrades only
   need a re-diff of stock hesk3 vs our fork, not this page.
   ============================================================ */

/* --- Message cards: white, rounded, soft border (match the submit form) --- */
.page-view-ticket .ticket__body_block {
  background: #fff; border: 1px solid #eceef2; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  padding: 26px 30px; margin-bottom: 20px; text-align: left;
}
/* Staff replies: red accent edge + a SUPPORT badge so customers can scan the thread */
.page-view-ticket .ticket__body_block.response {
  border-left: 3px solid #d32f2f;
  background: linear-gradient(180deg, #fffafa 0%, #fff 72px);
}
.page-view-ticket .ticket__body_block.response .block--head .contact::before {
  content: "SUPPORT";
  display: inline-block; padding: 2px 10px; margin-right: 10px;
  border-radius: 999px; background: #fbeaea; color: #b30000;
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em; line-height: 1.8;
}

/* --- Subject: dark + heavy, not HESK red --- */
.page-view-ticket .ticket:not(.ticket--article) .ticket__body_block h1 {
  font-size: 22px; font-weight: 800; color: #0b1020; letter-spacing: -0.01em;
  margin-bottom: 12px;
}

/* --- Meta line (From / Reply by / time): quieter --- */
.page-view-ticket .ticket__body_block .block--head { font-size: 13.5px; }
.page-view-ticket .ticket__body_block .block--head .contact > span,
.page-view-ticket .ticket__body_block .block--head time { color: #8a93a3; }
.page-view-ticket .ticket__body_block .block--head .contact b { color: #1f2733; }
/* Requester name chip: soft outlined pill instead of the shadowed dropdown box */
.page-view-ticket .ticket__body_block .block--head .contact .dropdown.customer .label,
.page-view-ticket .ticket__body_block .block--head .contact .dropdown.customer label {
  border-radius: 999px; background: #f7f8fb;
  box-shadow: inset 0 0 0 1px #e5e8ee !important;
  padding: 2px 12px !important;
}
.page-view-ticket .ticket__body_block .block--head .contact .dropdown.customer:hover .label,
.page-view-ticket .ticket__body_block .block--head .contact .dropdown.customer:hover label {
  box-shadow: inset 0 0 0 1px #d32f2f !important;
  background: #fff5f5;
}
/* Stock hover floods the chip container with --secondary (red) + white text/icons.
   Keep the chip light: kill the container flood, tint text + icons brand-red. */
.page-view-ticket .ticket__body_block .block--head .contact .dropdown.customer:not(.right):hover {
  background-color: transparent !important;
  border-color: transparent;
}
.page-view-ticket .ticket__body_block .block--head .contact .dropdown.customer:not(.right):hover label,
.page-view-ticket .ticket__body_block .block--head .contact .dropdown.customer:not(.right):hover .label,
.page-view-ticket .ticket__body_block .block--head .contact .dropdown.customer:not(.right):hover label span,
.page-view-ticket .ticket__body_block .block--head .contact .dropdown.customer:not(.right):hover .label span {
  color: #b30000 !important;
}
.page-view-ticket .ticket__body_block .block--head .contact .dropdown.customer:not(.right):hover > * > .icon {
  color: #b30000 !important;
  fill: #b30000 !important;
}

/* --- Message body copy --- */
.page-view-ticket .ticket__body_block .block--description {
  font-size: 15.5px; line-height: 1.7; color: #3a4252; text-align: left;
}

/* --- Per-message print buttons: hidden. A single "Print Support Log" action
   lives in the sidebar instead (injected by footer.txt, styled below). --- */
.page-view-ticket .block--head .btn.btn-action { display: none; }

/* --- "Add reply" card --- */
.page-view-ticket .ticket__body_block > .text-bold { font-size: 17px; font-weight: 700; color: #0b1020; }
.page-view-ticket .form--reply { margin: 16px 0 0; }
/* Attachment dropzone: friendly dashed target */
.page-view-ticket .dropzone {
  border: 1.5px dashed #dfe3ea; border-radius: 12px; background: #fafbfc;
  transition: border-color .15s ease;
}
.page-view-ticket .dropzone:hover { border-color: #d32f2f; }

/* --- Rating footer ("Was this helpful?"): lighter divider --- */
.page-view-ticket .ticket__block-footer {
  border-top: 1px solid #f0f2f6; color: #8a93a3; font-size: 13px;
}

/* ---------- Ticket Details sidebar ---------- */
.page-view-ticket .ticket__params { position: sticky; top: 94px; align-self: flex-start; }
.page-view-ticket .ticket__params .params--block {
  background: #fff; border: 1px solid #eceef2; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.page-view-ticket .ticket__params .params--block h2 {
  height: auto; padding: 18px 20px 8px; font-size: 16px; font-weight: 700; color: #0b1020;
}
.page-view-ticket .ticket__params .accordion-title .link { font-size: 12.5px; font-weight: 600; color: #8a93a3; }
.page-view-ticket .ticket__params .accordion-title .link:hover { color: #d32f2f; }
.page-view-ticket .ticket__params .params--block .accordion-body { padding: 2px 20px 16px; }
/* Rows: light hairlines, muted labels, solid values */
.page-view-ticket .ticket__params .params--block .row {
  margin-top: 0; padding: 9px 0; border-bottom: 1px solid #f0f2f6;
  align-items: baseline; font-size: 14px;
}
.page-view-ticket .ticket__params .params--block .row:last-child { border-bottom: 0; padding-bottom: 2px; }
.page-view-ticket .ticket__params .params--block .row .title { color: #8a93a3; }
.page-view-ticket .ticket__params .params--block .row .value { color: #1f2733; font-weight: 600; }

/* Status value → colored pill. Pill borrows currentColor, so custom statuses
   (inline color from HESK settings) tint themselves automatically. */
.page-view-ticket .ticket__params .row .value:not(.with-label) > span {
  display: inline-block; padding: 1px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; line-height: 1.9; color: #475467;
  background: color-mix(in srgb, currentColor 10%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, #fff);
}
/* Default HESK status classes get proper colors */
.page-view-ticket .ticket__params .row .value > span.open        { color: #2563eb; }
.page-view-ticket .ticket__params .row .value > span.waitingreply{ color: #b45309; }
.page-view-ticket .ticket__params .row .value > span.replied     { color: #0f766e; }
.page-view-ticket .ticket__params .row .value > span.inprogress  { color: #7c3aed; }
.page-view-ticket .ticket__params .row .value > span.onhold      { color: #6b7280; }
.page-view-ticket .ticket__params .row .value > span.resolved    { color: #15803d; }

/* "[Mark as Resolved]" → outline pill button. The literal [brackets] are text
   nodes we can't remove without a template edit, so zero the row's font-size
   and restore it on the link — the brackets vanish, the markup stays stock. */
.page-view-ticket .ticket__params .row .value.center { font-size: 0; width: 100%; }
.page-view-ticket .ticket__params .row .value.center .link {
  display: block; font-size: 13.5px; font-weight: 700; text-align: center;
  padding: 8px 16px; border-radius: 999px;
  border: 1.5px solid #d32f2f; color: #d32f2f;
  text-decoration: none !important; /* stock .link forces underline !important */
  transition: all .15s ease;
}
.page-view-ticket .ticket__params .row .value.center .link:hover { background: #d32f2f; color: #fff; }
/* In browsers with :has(), tidy the button's row: no hairline, no empty label cell */
.page-view-ticket .ticket__params .params--block .row:has(.value.center) { border-bottom: 0; padding-top: 2px; }
.page-view-ticket .ticket__params .params--block .row:has(.value.center) .title { display: none; }

/* "Print Support Log" row (injected as the sidebar's last row by footer.txt) */
.page-view-ticket .ticket__params .fu-print-row { border-bottom: 0; padding: 12px 0 2px; }
.page-view-ticket .ticket__params .fu-print-row .fu-print-log {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 8px 16px; border-radius: 999px; border: 1.5px solid #dfe3ea;
  color: #5b6472; font-size: 13.5px; font-weight: 700; text-decoration: none;
  transition: all .15s ease;
}
.page-view-ticket .ticket__params .fu-print-row .fu-print-log:hover {
  border-color: #d32f2f; color: #d32f2f; background: #fff5f5;
}
.page-view-ticket .ticket__params .fu-print-row .icon-print { width: 15px; height: 15px; fill: currentColor; }

/* --- Small screens: slimmer cards, sidebar unsticks (it stacks above the thread) --- */
@media (max-width: 768px) {
  .page-view-ticket .ticket__params { position: static; }
}
@media (max-width: 575px) {
  .page-view-ticket .ticket__body_block { padding: 20px 18px; border-radius: 14px; }
}