/* ==========================================================================
   Support tickets — "My Support", "Contact Support", and the success dialog

   Loaded globally from _AppLayout (rather than per-page) because "My Support" and
   the ticket-submitted dialog can both appear over any signed-in screen: the link
   that opens the first lives in the account menu, and the second is driven by a
   TempData flag read in the layout itself. Builds on the tokens, buttons, fields
   and .dialog rules in site.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Dialog chrome shared by "My Support" and "Contact Support"
   -------------------------------------------------------------------------- */

.dialog--support {
    max-width: 480px;
}

/* "My Support" reads less bold than the shared .dialog__title (also used by
   Contact Support and the ticket detail dialog, which keep the heavier
   default weight) — scoped to this one heading via its own modifier class. */
.dialog__title--regular {
    font-weight: 600;
}

/* "My Support"'s ticket detail needs more room than the list does, so only that
   dialog is widened — detected by what it contains (.support-detail only appears
   in that fragment) rather than by a class, since the shared <dialog> element in
   site.js renders each fragment in turn without changing its own class. Left at
   the narrower default below 700px, where "70%" would be cramped rather than roomy. */
@media (min-width: 700px) {
    .dialog--support:has(.support-detail) {
        width: 70%;
        max-width: 960px;
    }

    /* Contact Support's own fixed size, matching the approved design (832 x 600)
       plus the extra ~75px the design didn't need to budget for: the Locked
       Account variant of this same fragment adds an Email field the design's
       signed-in version does not have (see LockedAccountContactContentViewComponent).
       Both variants share this one rule rather than a taller size just for the
       one with Email, so the two read as the same dialog at two heights of
       content rather than two differently-sized dialogs. Still capped by the
       viewport via width/height (not max-width/max-height alone), so a viewport
       narrower or shorter than 832x675 shrinks it rather than overflowing —
       same calc() idiom as .dialog's own base width above. */
    .dialog--support:has(.support-form) {
        width: min(832px, calc(100% - 2 * var(--dialog-gutter)));
        max-width: none;
        /*height: min(675px, calc(100% - 2 * var(--dialog-gutter)));*/
    }
}

/* Tighter than site.css's own .dialog__inner padding/gap — one of several
   trims (see .support-form and its scoped overrides below) that together
   bring "Contact Support" down to a height that fits without the native
   <dialog> having to scroll itself. Width is untouched — see the rule above. */
.dialog--support:has(.support-form) .dialog__inner {
    gap: 12px;
    padding: 18px 24px;
}

/* Contact Customer Care (LockedAccountContactContentViewComponent) is a narrow,
   phone-width wizard by design — not the wide desktop layout .support-form
   otherwise gets above 700px per the rule above, which it would also match
   since it shares that same class for its field/spacing styling. Carved out
   by its own marker attribute at equal specificity, later in the cascade, so
   this wins regardless of viewport width — the rule above only widens inside
   its own @media block, but max-width always constrains an explicit width. */
.dialog--support:has([data-support-contact-wizard]) {
    max-width: 420px;
}

/* The no-JS / direct-link fallback: the same card, centred as a static block
   instead of a native <dialog> — .app-main already centres it on the page. */
.support-page {
    width: 100%;
    margin-inline: auto;
}

/* Same dark tint a real <dialog>'s own ::backdrop would show behind it —
   this page has no real dialog to provide one on a genuine full-page round
   trip (reached directly, e.g. a staff reply notification email's own
   link, or with JavaScript off), so .app's own light --surface-sunken is
   overridden here instead. Same pattern as .change-password-page's own
   fallback treatment — see the matching rule in app.css. */
body.app:has(.support-page) {
    background: rgba(0, 0, 0, 0.45);
}

/* Mirrors .dialog__close, on the opposite corner — the back arrow on "Contact
   Support". Absolute for the same reason .dialog__close is: it has to sit clear of
   the centred title rather than share a flex row with it. Vertically centred
   the same way .dialog__close now is (see its own remarks in site.css), so the
   two stay level with each other on the rare dialog that shows both. */
.dialog__back {
    position: absolute;
    top: 50%;
    left: -4px;
    transform: translateY(-50%);
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--ink-muted);
    cursor: pointer;
}

.dialog__back:hover {
    background: var(--surface-sunken);
    color: var(--ink);
}

.dialog__back svg {
    width: 18px;
    height: 18px;
}

/* --------------------------------------------------------------------------
   "My Support" — empty state
   -------------------------------------------------------------------------- */

.support-empty {
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: 28px 0 8px;
}

.support-empty__icon {
    width: 84px;
    height: 84px;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
}

.support-empty__text {
    font-size: 14px;
    color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   "My Support" — the ticket list
   -------------------------------------------------------------------------- */

.support-list {
    display: grid;
    gap: 20px;
    /* Long enough to need scrolling before the dialog itself grows past the
       viewport — same idea as .dialog__body--scroll on the legal dialog. */
    max-height: min(44.8vh, 336px);
    overflow-y: auto;
    text-align: left;
}

.support-group__title {
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
}

.support-group__empty {
    padding: 16px;
    border-radius: var(--radius);
    background: var(--surface-sunken);
    color: var(--ink-muted);
    font-size: 13px;
    text-align: center;
}

.support-group__items {
    display: grid;
    gap: 10px;
}

.support-ticket {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--field-border);
    border-radius: var(--radius-sm);
    /* This row is an <a> to "Support Details" (site.js intercepts the click into
       the shared dialog), not a plain <article>, so it needs its link styling
       undone to keep reading as a row rather than a link. */
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s var(--ease);
}

.support-ticket:hover {
    /* site.css's own a:hover otherwise underlines every text node this link
       wraps — subject, badge, meta — the moment the row is hovered. */
    background: var(--surface-sunken);
    color: inherit;
    text-decoration: none;
}

.support-ticket__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--ink-strong);
}

.support-ticket__icon svg {
    width: 18px;
    height: 18px;
}

.support-ticket__body {
    display: grid;
    gap: 6px;
    min-width: 0;
}

/* A grid item stretches to fill its column by default — without this the
   status badge below spans the full row width instead of hugging its text. */
.support-ticket__body .badge {
    justify-self: start;
}

.support-ticket__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    /* The design truncates a long, doubled-up subject rather than wrapping it. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.support-ticket__meta {
    font-size: 12px;
    color: var(--ink-muted);
}

/* ---- Status badges — extend .badge from site.css ------------------------ */

.badge--reviewing {
    background: #fdecd2;
    color: #9a5b00;
}

.badge--new-reply {
    background: #dcf5e3;
    color: #14713b;
}

.badge--closed {
    background: #efeff0;
    color: #6b7075;
}

/* --------------------------------------------------------------------------
   Footer action shared by every "My Support" state
   -------------------------------------------------------------------------- */

.support-footer {
    margin-top: 24px;
}

/* --------------------------------------------------------------------------
   "Contact Support" form
   -------------------------------------------------------------------------- */

.support-form {
    display: grid;
    gap: 12px;
    text-align: left;
}

/* Contact Support's own fields, at site.css's own sizing, add up to a dialog
   taller than most viewports comfortably fit — which is what made the native
   <dialog> scroll internally rather than just show at a shorter height.
   Scoped to this form rather than .field/.input/.textarea themselves, which
   the rest of the site also uses. */
.support-form .field {
    gap: 6px;
}

.support-form .input {
    min-height: 42px;
}

/* Roomy enough for Description to read as the dialog's main field, matching
   the approved design. */
.textarea {
    width: 100%;
    min-height: 160px;
    padding: 14px 16px;
    background: var(--field-bg);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--ink);
    /* Was "vertical" — dragging it taller doesn't gain anything now that
       .field__counter sits inside this same corner (see its own remarks),
       and the browser's own resize handle sat right on top of that count. */
    resize: none;
    transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.textarea::placeholder {
    color: var(--field-placeholder);
}

.textarea:hover {
    background: #f2f2f2;
}

.textarea:focus {
    background: var(--field-bg-focus);
    border-color: var(--field-border-focus);
    outline: none;
}

/* Reuses the class site.css's .input.input-validation-error already styles —
   wireCharCounter toggles this on Description once it runs over the limit. */
.textarea.input-validation-error {
    border-color: var(--danger);
    background: var(--field-bg-focus);
}

/* Sits inside .field__control (position: relative — see .field__affix
   elsewhere for the same technique), in the textarea's own bottom-right
   corner, rather than as a grid row of its own underneath it. */
.field__counter {
    position: absolute;
    right: 12px;
    bottom: 10px;
    font-size: 12px;
    color: var(--ink-muted);
    /* So it never intercepts a click or a text selection meant for the
       textarea underneath it. */
    pointer-events: none;
}

.field__counter--invalid {
    color: var(--danger);
}

.field__required {
    color: var(--danger);
}

/* ---- Upload control ------------------------------------------------------ */

.upload-control {
    display: inline-grid;
    align-content:center;
    justify-items: center;
    gap: 6px;
    width: 90px;
    height:90px;
    padding: 8px;
    background: none;
    /* Darker and more opaque than the shared --field-border token (#ececec), which
       is too faint for a dashed outline drawn on its own rather than dividing two
       filled surfaces. */
    border: 1px dashed #c7c9cc;
    border-radius: var(--radius);
    color: var(--ink-soft);
    font-family: var(--font-sans);
    font-size: 11px;
    cursor: pointer;
}

.upload-control:hover {
    background: var(--surface-sunken);
    border-color: #aeb1b5;
}

.upload-control svg {
    width: 20px;
    height: 20px;
}

.upload-control:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.upload-control__label {
    max-width: 76px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Attachment size status ------------------------------------------------
   Only ever rendered in its one, over-the-limit state — see
   updateUploadStatus (site.js), which leaves it [hidden] otherwise — so this
   is styled as the warning outright, the same red as every other field
   error in this app. */
.upload-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    color: var(--danger);
}

/* Sits inside .support-composer__actions, alongside Send rather than stacked
   above it — .support-composer__actions' own gap (8px) already spaces it from
   Send, so this needs no margin of its own the way it did when it was a row
   above the message box. flex: 1 1 auto + min-width: 0 (rather than the old
   flex: none) is what keeps this row's own width bounded to whatever space
   Send isn't using — without that, its cards (each a fixed 90px square, see
   .upload-list__item) just kept growing this row past the panel's own edge
   however many files were picked, pushing Send off past the visible dialog
   instead of staying put beside it. Bounded like this, .upload-row's own
   flex-wrap: wrap (see below) is what actually wraps the cards onto more
   rows in place, growing the panel down instead of sideways. */
.support-composer__upload-row {
    flex: 1 1 auto;
    min-width: 0;
}

/* Its own row, ahead of the message rather than sharing
   .support-composer__upload-row's own line at the bottom — see
   SupportDetailContentViewComponent and wireMultiFileUpload's data-multi-upload-list.
   [hidden] while empty (its own starting markup, and wireMultiFileUpload's
   render() again once every card is removed) means this margin only ever
   shows up alongside the cards it is spacing out. */
.support-composer__upload-list {
    margin-bottom: 10px;
}

.support-composer .upload-status {
    margin-bottom: 8px;
}

/* The attachment trigger inside the reply composer reads as a plain icon
   button, matching Send beside it, rather than the bordered drop-target
   square "Contact Support" uses when the picker is the only thing on the
   screen. */
.upload-control--compact {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
}

.upload-control--compact:hover {
    background: var(--control-disabled-bg);
    border-color: transparent;
}

.upload-control--compact svg {
    width: 18px;
    height: 18px;
}

.upload-control--compact .upload-control__label {
    display: none;
}

/* ---- Contact Support's chosen-file row -----------------------------------
   Files first, "Upload" last — one square card per file picked, in the same
   row as .upload-control itself. wireMultiFileUpload (site.js) inserts and
   removes .upload-list__item cards directly into .upload-row, ahead of the
   trigger button, rather than into a separate list underneath it. Sized and
   shaped to match .support-attachment on "Support Details", the read-only
   equivalent of this same card. */

.upload-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}

.upload-list__item {
    position: relative;
    display: grid;
    /* 82/18 split of the explicit height below — percentages only resolve
       against a definite height, which is why this sets one instead of
       leaving it to grow with .upload-list__footer's own content. */
    grid-template-rows: 82% 18%;
    width: 90px;
    height: 90px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--field-border);
    background: var(--field-bg);
}

.upload-list__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    /* White, not the grey .upload-list__footer/.support-attachment__meta
       below it uses — the two rows read as distinct top/bottom sections of
       the same card rather than one uniformly grey box. */
    background-color: var(--surface);
    background-size: cover;
    background-position: center;
}

.upload-list__badge {
    padding: 3px 7px;
    border-radius: 3px;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.upload-list__badge--pdf {
    background: #e1442f;
}

.upload-list__badge--doc {
    background: #2c5fda;
}

.upload-list__badge--txt {
    background: #6b7075;
}

.upload-list__badge--img {
    background: #1f9d55;
}

.upload-list__badge--file {
    background: var(--ink-soft);
}

/* One line, name and size side by side, rather than stacked — an 18%-height
   footer (see .upload-list__item) has no room left for two text lines once
   its own padding is accounted for. */
.upload-list__footer {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    background: #b3b3b3;
    color: var(--ink-soft);
    font-size: 9px;
    overflow: hidden;
}

.upload-list__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-list__size {
    flex: none;
    opacity: 0.75;
    white-space: nowrap;
}

.upload-list__remove {
    position: absolute;
    top: 4px;
    right: 4px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.85);
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.upload-list__remove:hover {
    background: #fff;
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   "Support Details" — ticket summary, message thread and reply composer
   -------------------------------------------------------------------------- */

.support-detail {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    align-items: start;
    text-align: left;
}

/* Below the width .dialog--support:has(.support-detail) widens for, the summary
   and thread stack instead of sitting side by side — there is no room for two
   columns in the narrower default dialog. */
@media (max-width: 699px) {
    .support-detail {
        grid-template-columns: 1fr;
    }

    .support-detail__summary {
        border-right: 0;
        border-bottom: 1px solid var(--field-border);
        padding-right: 0;
        padding-bottom: 16px;
    }
}

.support-detail__summary {
    display: grid;
    gap: 10px;
    align-content: start;
    padding-right: 24px;
    border-right: 1px solid var(--field-border);
}

/* Without this, the badge — a grid item — stretches to fill the summary's
   own column width instead of hugging its text, same reasoning as
   .support-ticket__body .badge. */
.support-detail__summary .badge {
    justify-self: start;
}

.support-detail__subject {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink-strong);
}

.support-detail__meta {
    font-size: 13px;
    color: var(--ink-muted);
}

.support-thread {
    display: grid;
    align-content: start;
    gap: 20px;
    /* A flat 380px rather than min(50vh, 380px) — the popup should be the
       same size regardless of anything, message count included, and 50vh
       was still one more way for it to vary, on a shorter window. */
    max-height: 380px;
    overflow-y: auto;
    /* A grid item's min-height defaults to auto — its content's own height —
       which silently wins over max-height above, so more messages just kept
       growing this box (and the dialog around it, into its own top-layer
       scrollbar) instead of ever actually capping and scrolling internally. */
    min-height: 0;
}

.support-message {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.support-message__avatar {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    /* Client and support replies get their own colour so the thread can be
       skimmed without reading the name on every line. */
    background: #ef5b2c;
}

.support-message--support .support-message__avatar {
    background-image: url('/images/support_team_profile_pic.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.support-message--client .support-message__avatar {
    background-image: url('/images/profile_pic_placeholder.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.support-message__body {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.support-message__meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.support-message__author {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}

.support-message__role {
    font-weight: 400;
    color: var(--ink-muted);
}

.support-message__time {
    font-size: 12px;
    color: var(--ink-muted);
}

.support-message__text {
    font-size: 14px;
    color: var(--ink);
    white-space: pre-wrap;
    word-break: break-word;
}

.support-message__attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 2px;
}

/* ---- Feedback widget — the static "Do you feel the answer is helpful?" prompt
   under the demo agent reply. Sits in the thread like a message would, but is
   its own row rather than a .support-message since it has no avatar. See
   wireFeedbackWidget in site.js. -------------------------------------------- */

.support-feedback {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-left: 44px;
    padding: 10px 14px;
    border: 1px solid var(--field-border);
    border-radius: var(--radius);
    background: var(--surface-sunken);
}

.support-feedback__prompt {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-soft);
}

.support-feedback__icon {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--ink-muted);
}

.support-feedback__actions {
    display: flex;
    gap: 8px;
}

.support-feedback__btn {
    padding: 6px 16px;
    background: var(--surface);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.support-feedback__btn:hover {
    background: var(--field-bg);
}

.support-feedback__btn--selected {
    background: var(--ink-strong);
    border-color: var(--ink-strong);
    color: #fff;
}

.support-feedback__btn--selected:hover {
    background: var(--ink-strong);
}

.support-attachment {
    display: grid;
    /* Same 82/18 split, same reasoning, as .upload-list__item — kept in step
       since this is meant to read as the same card. */
    grid-template-rows: 82% 18%;
    width: 106px;
    height: 90px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--field-border);
    background: var(--field-bg);
    /* A real link (opens the file through DownloadAttachmentModel in a new tab),
       styled to still read as the plain file chip it looks like. */
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.support-attachment:hover {
    border-color: #c7c9cc;
}

/* One line, name and size side by side — see the matching remarks on
   .upload-list__footer. */
.support-attachment__meta {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    background: var(--field-border);
    color: var(--ink-soft);
    font-size: 9px;
    overflow: hidden;
}

.support-attachment__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.support-attachment__size {
    flex: none;
    opacity: 0.75;
    white-space: nowrap;
}

/* ---- Reply composer ------------------------------------------------------ */

.support-composer {
    /*margin-top: 20px;*/
}

/* The grey rounded panel itself — split out from .support-composer so the
   attachments row and the upload-status line above it (both direct children
   of the form now, not this box) sit outside it, plain background, rather
   than inside the same panel as "Leave Message". */
.support-composer__box {
    padding: 12px 14px;
    background: var(--field-bg);
    border-radius: var(--radius);
}

.support-composer__field {
    display: block;
    width: 100%;
    min-height: 22px;
    max-height: 90px;
    padding: 0 0 10px;
    background: none;
    border: 0;
    resize: none;
    /* wireAutoGrowTextarea (site.js) sets this field's own height to its
       scrollHeight on every keystroke, growing it from the min-height above
       one line at a time — a plain rows="1" textarea never grows on its
       own, so typing past the first line just scrolled the rest of the
       message out of view inside a box that never got any taller. Once
       growth hits max-height above, this is what lets the rest keep
       scrolling instead of being clipped outright. */
    overflow-y: auto;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--ink);
}

.support-composer__field:focus {
    outline: none;
}

.support-composer__field::placeholder {
    color: var(--field-placeholder);
}

.support-composer__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.support-composer__send {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    margin-left: auto;
    background: var(--ink-strong);
    color: #fff;
    cursor: pointer;
}

.support-composer__send svg {
    padding:2px;
    width: 18px;
    height: 18px;
}

.support-composer__send img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: inherit;
}

.support-composer__send:disabled {
    background: #c9cbce;
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Ticket Submit Success — the coloured banner and the outlined second action

   The banner sits outside .dialog__inner as a block of its own, with its own
   close control and its own title, so the copy and actions below use the plain
   .dialog__body / .dialog__actions rules without a .dialog__head at all — there
   is nothing left for one to hold once the title moves onto the banner.
   -------------------------------------------------------------------------- */

/* 10% over the base .dialog's 420px cap — scoped to this dialog alone so the
   plain alert dialogs sharing the base class (e.g. "Resend limit reached")
   keep their own width. Still governed by the base rule's
   width: calc(100% - 2 * var(--dialog-gutter)), so this only raises the
   upper bound and never pushes the dialog past a narrow viewport. */
.dialog--success {
    max-width: 462px;
}

.dialog__banner {
    position: relative;
    min-height: 150px;
    border-radius: 14px 14px 0 0;
    /*background: linear-gradient(180deg, #bfe0e6 0%, #9dc9d2 100%);*/
    background-color: #E2E6ED;
}

.dialog__banner .dialog__close {
    color: rgba(0, 0, 0, 0.55);
}

.dialog__banner .dialog__close:hover {
    background: rgba(255, 255, 255, 0.35);
    color: var(--ink);
}

/* Anchored to the bottom of the banner rather than centred in it, so the title
   sits just above the white body copy instead of floating mid-colour. The form
   around .dialog__close stays a plain, unstyled block — it never enters this
   layout since its only child is taken out of flow by .dialog__close itself. */
.dialog__banner-content {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 18px;
    display: grid;
    gap: 6px;
    text-align: center;
}

/* The base .dialog__title assumes a flex .dialog__head; this one sits in the
   grid banner instead, so only the colour needs restating here. */
.dialog__banner-content .dialog__title {
    color: var(--ink-strong);
}

.dialog__banner-ticket {
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.65);
    letter-spacing: 0.02em;
}

.dialog__actions {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.btn--outline {
    background: transparent;
    border-color: var(--ink-strong);
    color: var(--ink);
}

.btn--outline:hover {
    background: var(--surface-sunken);
    color: var(--ink);
}