/* SolidCos Support — customer frontend styles (scoped to .scs-support).
   A small self-contained design system: tokens + components, light & dark. */

.scs-support {
    /* Warm orange, sampled from the staff back-office composer (#e08038), so the
       support experience reads as one product from the customer thread through
       to the agent's reply. Overridable per site: every accent use goes through
       these three tokens, so a theme can restyle the whole UI with
       .scs-support { --scs-accent: ...; --scs-accent-600: ...; --scs-ring: ...; } */
    --scs-accent: #e08038;
    --scs-accent-600: #c76a22;
    --scs-on-accent: #ffffff;
    --scs-surface: #ffffff;
    --scs-surface-2: #f7f8fa;
    --scs-text: #111827;
    --scs-muted: #6b7280;
    --scs-border: #e6e8ec;
    --scs-ring: rgba(224, 128, 56, .25);
    /* The wash behind an icon, and the halo on the active step dot. Deliberately
       NOT a tint of the accent: it was a hardcoded orange, so it stayed peach on
       a shop whose accent is black. A neutral of its own keeps the tiles quiet
       whatever the brand colour is, and it is one token to change. */
    --scs-tint: #faf9f6;
    --scs-radius: 16px;
    --scs-radius-sm: 10px;
    --scs-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .08);
    --scs-shadow-lg: 0 14px 34px -10px rgba(16, 24, 40, .18);
    --scs-in-bubble: #ffffff;
    --scs-out-bubble: #e5f7d8;

    max-width: 1120px;
    margin: 0 auto;
    color: var(--scs-text);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.scs-support h1 { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .35rem; }
.scs-support h2 { font-size: 1.15rem; font-weight: 650; letter-spacing: -.01em; margin: 0 0 1rem; }
.scs-support p { margin: 0 0 1rem; }
.scs-support a { color: var(--scs-accent); text-decoration: none; }
.scs-support a:hover { text-decoration: underline; }

/* cards */
.scs-support .scs-card {
    background: var(--scs-surface);
    border: 1px solid var(--scs-border);
    border-radius: var(--scs-radius);
    box-shadow: var(--scs-shadow);
    padding: 1.5rem;
    margin: 0 0 1.25rem;
}

/* form controls */
.scs-support label { display: block; font-size: .8rem; font-weight: 600; color: var(--scs-text); margin: .85rem 0 .3rem; }
.scs-support label .scs-opt { font-weight: 400; color: var(--scs-muted); }
.scs-support .scs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.scs-support .scs-field-group label { margin-top: 0; }
@media (max-width: 560px) { .scs-support .scs-row { grid-template-columns: 1fr; gap: 0; } }
.scs-support input,
.scs-support select,
.scs-support textarea {
    width: 100%;
    box-sizing: border-box;
    padding: .65rem .8rem;
    border: 1px solid var(--scs-border);
    border-radius: var(--scs-radius-sm);
    background: var(--scs-surface-2);
    color: inherit;
    font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.scs-support input:focus,
.scs-support select:focus,
.scs-support textarea:focus {
    outline: none;
    border-color: var(--scs-accent);
    box-shadow: 0 0 0 3px var(--scs-ring);
}

/* A checkbox or a radio is not a text field, and the rule above hands every
   input a full-width box with text padding and a border. A native checkbox in
   WebKit honours all three, so in the narrow first column of the return table
   it collapsed to a dot on iPhones — while Blink, which ignores most of it on
   a native checkbox, drew it correctly. That is also why Chrome's device
   toolbar cannot reproduce it: it changes the viewport, not the engine that
   renders form controls. */
.scs-support input[type="checkbox"],
.scs-support input[type="radio"] {
    width: 1.25rem;
    min-width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    flex: none;
    vertical-align: middle;
    accent-color: var(--scs-accent);
}
/* box-shadow is deliberately not reset above, so the focus ring the shared
   :focus rule draws still reaches these. */

.scs-support textarea { min-height: 7.5rem; resize: vertical; }
.scs-support .scs-card form > label:first-child { margin-top: 0; }

/* buttons */
.scs-support button,
.scs-support .button,
.scs-support input[type="submit"] {
    display: inline-block;
    background: var(--scs-accent);
    color: var(--scs-on-accent);
    border: 0;
    border-radius: var(--scs-radius-sm);
    padding: .68rem 1.35rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--scs-shadow);
    transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
}
.scs-support button:hover,
.scs-support .button:hover,
.scs-support input[type="submit"]:hover { background: var(--scs-accent-600); text-decoration: none; }
.scs-support button:active,
.scs-support .button:active { transform: translateY(1px); }
.scs-support .button.scs-btn-sm { padding: .24rem .7rem; font-size: .74rem; font-weight: 600; box-shadow: none; }

/* table search */
.scs-support .scs-search { display: block; width: 100%; max-width: 340px; margin-bottom: .8rem; padding: .55rem .8rem; border: 1px solid var(--scs-border); border-radius: var(--scs-radius-sm); font: inherit; }
.scs-support .scs-search:focus { outline: none; border-color: var(--scs-accent); }
.scs-support .scs-nomatch td { text-align: center; color: var(--scs-muted); }

/* hard-coded guest page wrapper (rendered between theme header/footer) */
.scs-guest-page { padding: 2.5rem 1rem; }

/* guest (no-login) extras */
.scs-support .scs-choices-list { display: grid; gap: .5rem; margin-bottom: .3rem; }
.scs-support .scs-radio { display: flex; align-items: center; gap: .7rem; border: 1px solid var(--scs-border); border-radius: var(--scs-radius-sm); padding: .6rem .8rem; cursor: pointer; }
.scs-support .scs-radio:hover { border-color: var(--scs-accent); }
/* The radio itself is sized with the other checkable controls further up; this
   rule used to be the lone exception to the generic input styling and would now
   win on source order, handing it back an automatic width. */
.scs-support .scs-guest-login { margin-top: 1.25rem; font-size: .9rem; color: var(--scs-muted); }

/* table pagination */
.scs-support .scs-pager { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 1rem; }
.scs-support .scs-pager-btn { background: var(--scs-surface); color: var(--scs-text); border: 1px solid var(--scs-border); border-radius: var(--scs-radius-sm); padding: .35rem .85rem; font-size: .82rem; font-weight: 600; cursor: pointer; box-shadow: none; }
.scs-support .scs-pager-btn:hover:not(:disabled) { background: var(--scs-surface); border-color: var(--scs-accent); color: var(--scs-accent); }
.scs-support .scs-pager-btn:disabled { opacity: .45; cursor: default; }
.scs-support .scs-pager-info { font-size: .82rem; color: var(--scs-muted); }

/* type chooser */
.scs-support .scs-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin: 0 0 2.25rem; }
.scs-support .scs-choice {
    display: block;
    background: var(--scs-surface);
    border: 1px solid var(--scs-border);
    border-radius: var(--scs-radius);
    box-shadow: var(--scs-shadow);
    padding: 1.35rem 1.25rem;
    color: inherit;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.scs-support .scs-choice:hover { transform: translateY(-3px); box-shadow: var(--scs-shadow-lg); border-color: var(--scs-accent); text-decoration: none; }
.scs-support .scs-choice .scs-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--scs-tint); color: var(--scs-accent); display: flex; align-items: center; justify-content: center; margin-bottom: .85rem; }
.scs-support .scs-choice .scs-ic svg { width: 20px; height: 20px; }
.scs-support .scs-choice strong { font-size: 1.02rem; font-weight: 650; }
.scs-support .scs-choice span { display: block; font-size: .84rem; color: var(--scs-muted); margin-top: .35rem; }

/* warranty wizard steps */
/* wizard stepper */
.scs-support .scs-steps { display: flex; list-style: none; padding: 0; margin: 0 0 1.6rem; }
.scs-support .scs-step { position: relative; flex: 1 1 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; font-size: .8rem; }
/* connector to the previous step (behind the dots) */
.scs-support .scs-step::before { content: ""; position: absolute; top: 17px; right: 50%; width: 100%; height: 2px; background: var(--scs-border); z-index: 0; }
.scs-support .scs-step:first-child::before { display: none; }
.scs-support .scs-step.active::before,
.scs-support .scs-step.done::before { background: var(--scs-accent); }
.scs-support .scs-step-dot { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--scs-surface); color: var(--scs-muted); border: 2px solid var(--scs-border); font-weight: 700; font-size: .85rem; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.scs-support .scs-step-check { width: 17px; height: 17px; }
.scs-support .scs-step-label { color: var(--scs-muted); }
.scs-support .scs-step.active .scs-step-dot { background: var(--scs-accent); color: #fff; border-color: var(--scs-accent); box-shadow: 0 0 0 4px var(--scs-tint); }
.scs-support .scs-step.active .scs-step-label { color: var(--scs-text); font-weight: 600; }
.scs-support .scs-step.done .scs-step-dot { background: var(--scs-accent); color: #fff; border-color: var(--scs-accent); }
.scs-support .scs-step.done .scs-step-label { color: var(--scs-text); }
.scs-support .scs-prod { display: flex; align-items: center; gap: .75rem; }
.scs-support .scs-prod-img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; border: 1px solid var(--scs-border); flex: 0 0 auto; }

/* status pills */
.scs-support .scs-st { display: inline-block; border-radius: 999px; padding: .15rem .6rem; font-size: .7rem; font-weight: 600; text-transform: capitalize; }
.scs-support .scs-st-new { background: #e0edff; color: #1e40af; }
.scs-support .scs-st-open { background: #efe7ff; color: #6b21a8; }
.scs-support .scs-st-replied { background: #e3f7ea; color: #1e7a3d; }
.scs-support .scs-st-waiting { background: #fef2d9; color: #92610a; }
.scs-support .scs-st-closed { background: #eceef2; color: #5b6270; }

/* meta + badges */
.scs-support .scs-meta { font-size: .78rem; color: var(--scs-muted); display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; margin-bottom: .4rem; }
.scs-support .scs-badge {
    display: inline-block;
    background: var(--scs-surface-2);
    border: 1px solid var(--scs-border);
    border-radius: 999px;
    padding: .12rem .6rem;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--scs-muted);
}

/* request list */
.scs-support a.scs-item {
    display: block;
    background: var(--scs-surface);
    border: 1px solid var(--scs-border);
    border-radius: var(--scs-radius-sm);
    box-shadow: var(--scs-shadow);
    padding: .9rem 1.05rem;
    margin-bottom: .7rem;
    color: inherit;
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.scs-support a.scs-item:hover { transform: translateY(-2px); box-shadow: var(--scs-shadow-lg); border-color: var(--scs-accent); text-decoration: none; }

.scs-support .scs-body { white-space: pre-wrap; }

/* custom file control (replaces the theme's native file input) */
.scs-support .scs-file { display: inline-flex; align-items: center; gap: .7rem; cursor: pointer; }
.scs-support .scs-file-btn { display: inline-block; background: var(--scs-surface-2); border: 1px solid var(--scs-border); border-radius: var(--scs-radius-sm); padding: .5rem .9rem; font-weight: 600; font-size: .88rem; color: var(--scs-text); transition: border-color .15s ease, color .15s ease; }
.scs-support .scs-file:hover .scs-file-btn { border-color: var(--scs-accent); color: var(--scs-accent); }
.scs-support .scs-file-name { font-size: .85rem; color: var(--scs-muted); }

/* notices */
.scs-support .scs-note { padding: .7rem .9rem; border-radius: var(--scs-radius-sm); margin-bottom: 1.25rem; font-weight: 500; border: 1px solid transparent; }
.scs-support .scs-note.success { background: rgba(34, 160, 90, .12); border-color: rgba(34, 160, 90, .35); }
.scs-support .scs-note.error { background: rgba(220, 60, 90, .12); border-color: rgba(220, 60, 90, .35); }

.scs-support .scs-back { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1.1rem; font-size: .88rem; font-weight: 600; }
.scs-support .scs-back::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }

/* announcement banner */
.scs-support .scs-ann { display: flex; gap: .8rem; align-items: flex-start; background: #eef2ff; border: 1px solid #c7d2fe; border-left: 4px solid var(--scs-accent); color: #1e2340; border-radius: var(--scs-radius-sm); padding: .9rem 1rem; margin-bottom: 1rem; box-shadow: var(--scs-shadow); }
.scs-support .scs-ann-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--scs-tint); color: var(--scs-accent); }
.scs-support .scs-ann-ic svg { width: 17px; height: 17px; }
.scs-support .scs-ann-body { flex: 1; min-width: 0; }
.scs-support .scs-ann-body strong { font-size: .95rem; }
.scs-support .scs-ann-body div { font-size: .9rem; margin-top: .15rem; color: #3a3f5c; overflow-wrap: anywhere; }
.scs-support .scs-ann-x { flex: none; background: none; border: 0; box-shadow: none; color: var(--scs-muted); font-size: 1.25rem; line-height: 1; cursor: pointer; width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.scs-support .scs-ann-x:hover { background: var(--scs-tint); color: var(--scs-accent); opacity: 1; }

/* self-serve suggestions (under the message field) */
.scs-support .scs-suggest { margin-top: .6rem; border: 1px solid var(--scs-border); border-radius: var(--scs-radius-sm); background: var(--scs-surface); box-shadow: var(--scs-shadow); overflow: hidden; }
.scs-support .scs-suggest-head { display: flex; align-items: center; gap: .4rem; padding: .5rem .8rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--scs-muted); border-bottom: 1px solid var(--scs-border); background: var(--scs-surface-2); }
.scs-support .scs-suggest-head::before { content: ""; flex: none; width: 13px; height: 13px; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%236b7280'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%2018h6'/%3E%3Cpath%20d='M10%2022h4'/%3E%3Cpath%20d='M15.09%2014c.18-.98.65-1.74%201.41-2.5A4.65%204.65%200%200%200%2018%208%206%206%200%200%200%206%208c0%201%20.23%202.23%201.5%203.5.76.76%201.23%201.52%201.41%202.5'/%3E%3C/svg%3E") no-repeat center/contain; }
.scs-support .scs-suggest-item { border-bottom: 1px solid var(--scs-border); }
.scs-support .scs-suggest-item:last-child { border-bottom: 0; }
.scs-support .scs-suggest-item summary { cursor: pointer; padding: .6rem .8rem; font-weight: 600; font-size: .9rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.scs-support .scs-suggest-item summary::-webkit-details-marker { display: none; }
.scs-support .scs-suggest-item summary::after { content: '+'; color: var(--scs-muted); }
.scs-support .scs-suggest-item[open] summary::after { content: '\2212'; }
.scs-support .scs-suggest-body { padding: 0 .8rem .7rem; white-space: pre-wrap; font-size: .9rem; color: var(--scs-text); }

/* FAQ accordion */
.scs-support .scs-faq-cats { columns: 2; column-gap: 1.5rem; }
.scs-support .scs-faq-cat { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; margin-bottom: 1.5rem; }
.scs-support .scs-faq-cat-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 .6rem; }
@media (max-width: 720px) { .scs-support .scs-faq-cats { columns: 1; } }
.scs-support .scs-faq { border: 1px solid var(--scs-border); border-radius: var(--scs-radius); overflow: hidden; background: var(--scs-surface); box-shadow: var(--scs-shadow); }
.scs-support .scs-faq-item { border-bottom: 1px solid var(--scs-border); }
.scs-support .scs-faq-item:last-child { border-bottom: 0; }
.scs-support .scs-faq-item summary { cursor: pointer; padding: 1rem 1.1rem; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.scs-support .scs-faq-item summary::-webkit-details-marker { display: none; }
.scs-support .scs-faq-item summary::after { content: '+'; color: var(--scs-muted); font-weight: 400; font-size: 1.3rem; }
.scs-support .scs-faq-item[open] summary::after { content: '\2212'; }
.scs-support .scs-faq-answer { padding: 0 1.1rem 1.1rem; white-space: pre-wrap; color: var(--scs-text); }

/* warranty product table */
.scs-support .scs-tablewrap { overflow-x: auto; background: var(--scs-surface); border: 1px solid var(--scs-border); border-radius: var(--scs-radius); box-shadow: var(--scs-shadow); }
.scs-support .scs-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.scs-support .scs-table th,
.scs-support .scs-table td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--scs-border); vertical-align: middle; }
.scs-support .scs-table th { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--scs-muted); background: var(--scs-surface-2); }
.scs-support .scs-table tbody tr { transition: background .12s ease; }
.scs-support .scs-table tbody tr:hover { background: var(--scs-surface-2); }
.scs-support .scs-table tr:last-child td { border-bottom: 0; }
.scs-support .scs-table td:last-child { white-space: nowrap; }

/* Our table stays a table, whatever the shop's theme does to tables.
   Shoptimizer stacks every table inside My Account on a phone — tr and td go
   display:block and the header is visually hidden with the clip() trick. That
   is right for the WooCommerce orders table, where each cell carries its own
   data-title to label itself once stacked, and wrong here: the tick box, the
   product and the quantity came out on three separate lines with nothing left
   to say which was which. The guest page, which never loads that stylesheet,
   looked correct all along.

   Not written inside a media query on purpose. The theme's breakpoint is its
   own, another theme will pick a different one, and the rules below only ever
   restore what a table already is — so they are safe at every width. Narrow
   screens are handled by .scs-tablewrap, which scrolls. */
.scs-support .scs-table tr { display: table-row; margin-bottom: 0; }
.scs-support .scs-table th,
.scs-support .scs-table td { display: table-cell; }
.scs-support .scs-table thead {
    display: table-header-group;
    position: static;
    clip: auto;
    clip-path: none;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
}
.scs-support .scs-table tbody tr { transition: background .12s ease; }
.scs-support .scs-table tbody tr[onclick] { cursor: pointer; }
.scs-support .scs-table tbody tr:hover { background: var(--scs-surface-2); }

/* chat thread */
.scs-support .scs-chat {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.25rem;
    background:
        radial-gradient(rgba(128,128,128,.05) 1px, transparent 1px) 0 0 / 22px 22px,
        var(--scs-surface-2);
    border: 1px solid var(--scs-border);
    border-radius: var(--scs-radius);
    max-height: 62vh;
    overflow-y: auto;
}
.scs-support .scs-bubble {
    max-width: 76%;
    padding: .55rem .8rem;
    border-radius: 16px;
    font-size: .94rem;
    line-height: 1.45;
    box-shadow: 0 1px 1px rgba(16, 24, 40, .08);
}
.scs-support .scs-bubble .scs-body { white-space: pre-wrap; }
.scs-support .scs-bubble.mine { align-self: flex-end; background: var(--scs-out-bubble); color: var(--scs-text); border-bottom-right-radius: 5px; }
.scs-support .scs-bubble.theirs { align-self: flex-start; background: var(--scs-in-bubble); color: var(--scs-text); border: 1px solid var(--scs-border); border-bottom-left-radius: 5px; }
.scs-support .scs-bubble .scs-time { font-size: .66rem; opacity: .6; margin-top: .3rem; text-align: right; }
.scs-support .scs-bubble .scs-atts { margin-top: .4rem; }
.scs-support .scs-bubble .scs-atts img { max-width: 160px; max-height: 160px; border-radius: 10px; display: block; }
/* A QR is there to be read, not previewed. It arrives at 100x100 and max-width
   only ever scales an image DOWN, so the ceiling above left it at 100px. An
   explicit width is what enlarges it; pixelated keeps the modules square rather
   than smearing them into something a scanner may refuse. max-width:100% so it
   still fits a phone. */
.scs-support .scs-bubble .scs-atts img.scs-qr {
  width: 250px; height: auto; max-width: 100%; max-height: none;
  image-rendering: pixelated; background: #fff; padding: 6px;
}
.scs-support .scs-bubble .scs-atts video { max-width: 240px; border-radius: 10px; display: block; margin-top: .4rem; }

/* composer — WhatsApp-style rounded field + circular send */
/* flex-end, not center: the textarea grows with the message (up to
   max-height) and the send button should stay pinned to the last line,
   WhatsApp-style. Collapsed, field and button are both 42px, so bottom
   alignment and centre alignment look identical. */
.scs-support .scs-composer { display: flex; gap: .55rem; align-items: flex-end; margin-top: .85rem; }
.scs-support .scs-field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .25rem;
    background: var(--scs-surface);
    border: 1px solid var(--scs-border);
    border-radius: 22px;
    padding: 0 .3rem 0 .5rem;
    box-shadow: var(--scs-shadow);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.scs-support .scs-field:focus-within { border-color: var(--scs-accent); box-shadow: 0 0 0 3px var(--scs-ring); }
.scs-support .scs-field textarea {
    flex: 1;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    /* The collapsed pill was rendering taller than the 42px send button --
       measured off a screenshot at ~1.24x its height -- so with the row's
       align-items:flex-end the button sat about 5px below the field's centre.
       Pinning the textarea to 40px makes the pill 40 + 2 * 1px border = 42px,
       exactly the button, so bottom-aligned reads as centred. box-sizing is
       restated locally (the block at the top of this file already sets it) so
       this arithmetic cannot be broken by a theme resetting it. */
    box-sizing: border-box;
    padding: .55rem .3rem;
    height: 40px;
    min-height: 40px;
    max-height: 130px;
    line-height: 1.4;
    resize: none;
    overflow-y: auto;
}
.scs-support .scs-field textarea:focus { outline: none; box-shadow: none; }
.scs-support .scs-attach-btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--scs-muted); padding: .4rem; border-radius: 50%; transition: color .15s ease, background .15s ease; }
.scs-support .scs-attach-btn:hover { color: var(--scs-accent); background: var(--scs-surface-2); }
.scs-support .scs-attach-btn svg { width: 19px; height: 19px; display: block; }
.scs-support .scs-file-note { font-size: .72rem; color: var(--scs-muted); align-self: center; padding-right: .4rem; white-space: nowrap; }
.scs-support .scs-send { flex: 0 0 auto; width: 42px; height: 42px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.scs-support .scs-send svg { width: 18px; height: 18px; }

@media (max-width: 560px) {
    .scs-support .scs-bubble { max-width: 88%; }
    .scs-support .scs-card { padding: 1.15rem; }
}

/* An order outside the return window: still listed, because hiding it invites
   "where has my order gone?", but plainly not selectable. */
.scs-row-shut { opacity: .55; }
.scs-row-shut td { cursor: default; }

/* ---- Attachments --------------------------------------------------------
   Files accumulate across picks, so the list has to show what is actually
   going to be sent, and each one has to be removable. */
/* Scoped under .scs-support on purpose: the plugin styles every <button> as a
   filled accent button, and an unscoped .scs-upload-remove loses to it on
   specificity — the × came out as an orange pill with the glyph adrift in it. */
.scs-support .scs-upload-list { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.scs-support .scs-upload-list li { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    padding: .4rem .6rem; border: 1px solid var(--scs-border); border-radius: var(--scs-radius-sm);
    background: var(--scs-surface); font-size: .85rem; }
.scs-support .scs-upload-name { min-width: 0; overflow-wrap: anywhere; }
.scs-support .scs-upload-remove {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
    background: none; box-shadow: none; color: var(--scs-muted);
    font-size: 1.15rem; line-height: 1; font-weight: 400; cursor: pointer;
}
.scs-support .scs-upload-remove:hover { background: var(--scs-surface-2); color: #b91c1c; }
.scs-support .scs-upload-remove:active { transform: none; }
.scs-support .scs-upload-errors { margin-top: .5rem; }
.scs-support .scs-upload-errors p { margin: 0 0 .25rem; padding: .45rem .6rem; border-radius: var(--scs-radius-sm);
    background: #fef2f2; color: #991b1b; font-size: .82rem; }

/* ---- Withdrawal terms ----------------------------------------------------
   Carried over from the standalone return portal. It sits under the lookup
   form: a customer should be able to read the conditions before starting,
   without leaving the page to find them. */
/* Its own block, not a footnote on whatever came before it. 1rem left it
   crowding the pager under the order table; 2.25rem is the gap the choices grid
   already uses between sections. The bottom margin keeps it off the page end. */
.scs-terms { margin: 2.25rem 0 1.5rem; }
.scs-terms__title { font-size: 1rem; margin: 0 0 .6rem; }
.scs-terms__list { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .4rem; }
.scs-terms__list li { font-size: .88rem; line-height: 1.5; }
.scs-terms__full { margin: .9rem 0 0; font-size: .88rem; }

/* Spacing in the card forms comes from the labels above each field, so the
   submit row — a bare <p> after the last input — had nothing holding it off.
   The intro paragraph keeps its own tighter spacing. */
.scs-support .scs-card form > p { margin: 1.15rem 0 0; }
.scs-support .scs-card form > p.scs-opt { margin: 0 0 .25rem; }

/* An item already in a case is shown, not hidden: a customer looking for it
   should see why it cannot be picked rather than wonder where it went. */
.scs-support .scs-item-taken { opacity: .6; }
.scs-support .scs-item-taken__why { display: block; font-size: .78rem; color: var(--scs-muted); margin-top: .15rem; }

/* A YouTube embed in a FAQ answer. Sized on the iframe itself: the back-office
   writes no wrapper, because the iframe often sits inside a <p> where a <div>
   would be invalid nesting that the browser repairs by splitting the paragraph. */
.scs-faq-answer .scs-video,
.scs-rich .scs-video,
.scs-rich iframe,
.scs-faq-answer iframe { display: block; width: 100%; max-width: 44rem; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 6px; margin: .75rem 0; }

/* A picture in a FAQ answer. max-width only, never width: a small image stays
   the size it was uploaded at instead of being stretched across the column. */
.scs-faq-answer .scs-image,
.scs-rich .scs-image,
.scs-rich img,
.scs-faq-answer img { display: block; max-width: 100%; height: auto; border-radius: 6px; margin: .75rem 0; }

/* The brand's support phone, under the choices. Only printed where the brand has
   one, so there is no empty-state to style. */
.scs-support .scs-phone { margin: 1rem 0 0; color: var(--scs-muted, #6b7280); font-size: .95rem; }
.scs-support .scs-phone a { font-weight: 600; white-space: nowrap; }


/* Staff-written blocks above and below the support hub. The brand writes these
   in the back-office; a brand with nothing to say leaves them empty and nothing
   is printed, so there is no empty state to style. Scoped to .scs-support so a
   heading written here cannot outrank the theme's own. */
.scs-support .scs-rich { margin: 0 0 1.25rem; color: var(--scs-text); }
.scs-support .scs-hub-outro { margin: 1.5rem 0 0; }
.scs-support .scs-rich > :first-child { margin-top: 0; }
.scs-support .scs-rich > :last-child { margin-bottom: 0; }
.scs-support .scs-rich p { margin: 0 0 .7rem; }
.scs-support .scs-rich h3 { font-size: 1.05rem; margin: 1.1rem 0 .4rem; }
.scs-support .scs-rich h4 { font-size: .95rem; margin: 1rem 0 .35rem; }
.scs-support .scs-rich ul,
.scs-support .scs-rich ol { margin: .3rem 0 .7rem 1.2rem; padding: 0; }
.scs-support .scs-rich a { font-weight: 600; }