/*
 * The widget's own styles - only for the few elements it adds that the themes never had.
 *
 * Everything the widget reuses (the dropzone, the file rows, the sidebar card, the buttons) keeps the
 * theme's own classes and is styled by the theme, so a brand's colours and spacing carry over with no
 * work here. What is left is the upload STATUS on each row, which had nothing to style because the
 * theme never uploaded anything.
 *
 * Colours come from the theme's custom properties, with a literal fallback for the one case they are
 * missing: certified-us defines a different set, and an unreadable status line is worse than an
 * off-brand one.
 */

.tc-upload-status {
    font-size: 13px;
    color: var(--color-text-light, #999);
    flex-shrink: 0;
    margin-left: 8px;
    white-space: nowrap;
}

/* A page count is the answer the customer is waiting for, so it is not greyed out like the file size. */
.tc-upload-status.is-counted {
    color: var(--color-text-dark, #03031a);
    font-weight: 500;
}

.tc-upload-status.is-failed {
    color: #c62828;
    white-space: normal;
}

/* The name can be long and the status must stay readable, so the name gives way first. */
.upload-file-item .upload-file-name {
    min-width: 0;
}

/* ------------------------------------------------------------------ the email field */

.tc-email-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 12px 14px;
    border: 1px solid var(--color-border, #eaeaea);
    border-radius: 6px;
    font-family: inherit;
    font-size: 17px; /* input text as on the homepage - David 2026-10-07 */
    color: var(--color-text-dark, #03031a);
    background: var(--color-white, #fff);
}

.tc-email-input:focus {
    outline: none;
    border-color: var(--color-primary, #1a63e2);
}

.tc-email-error,
.tc-order-error {
    margin: 8px 0 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: #c62828;
}

/* One line under the email field on why we ask (David's design review 2026-10-07). */
.tc-email-help {
    margin: 6px 0 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-text-gray, #434343);
}

/* Calculate looks inactive until a file is uploaded and the email is valid. It stays clickable, so a
   click can still say what is missing; the hint under it says it before anyone has to click. */
.tc-inactive,
.tc-inactive:hover {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

/* Step 1 while it runs (C10): a spinner in place of the arrow, and the button cannot be pressed again. */
.tc-busy,
.tc-busy:disabled {
    cursor: progress;
    opacity: 1;
}

.tc-busy .btn-arrow {
    display: none;
}

.tc-busy::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 10px;
    vertical-align: middle;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: tc-spin 0.7s linear infinite;
}

@keyframes tc-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .tc-busy::after { animation-duration: 2s; }
}

/* Step 1: a field Start found empty (W2) - red border, message under it (.tc-start-error). */
.tc-invalid,
.tc-invalid:focus,
.tc-invalid:hover {
    border-color: #c62828 !important;
    box-shadow: 0 0 0 1px #c62828;
}

.tc-start-error {
    margin: 6px 0 0 0;
}

/* A message under one language must not move its neighbour: the language rows are grids, which centre
   (EU) or stretch (US footer) their cells. With no message both cells are the same height either way. */
.lang-pair-row > .form-field-wrap,
.footer-form-row > .form-group {
    align-self: start;
}

/* The document type list (C13): a ticked type no longer turns the whole row solid blue - the "flash" -
   but light blue with the check mark, and the line on top says several can be chosen. */
/* .multiselect-dropdown in front: this file loads BEFORE the theme's stylesheet, so a rule here
   needs more weight than the theme's to win. */
.multiselect-dropdown .multiselect-option,
.multiselect-dropdown .multiselect-option:hover {
    transition: none;
}

.multiselect-dropdown .multiselect-option.selected,
.multiselect-dropdown .multiselect-option.selected:hover {
    background-color: #e8effc;
    color: #0f3d91;
}

.multiselect-dropdown .multiselect-option.selected::after {
    color: var(--color-primary, #1a63e2);
}

.tc-multi-hint {
    padding: 8px 16px 6px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-text-gray, #434343);
    border-bottom: 1px solid #eef0f3;
}

.footer-form .tc-multi-hint {
    color: rgba(255, 255, 255, 0.8);
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

/* Call me back on the EU form (BE-EN9): the theme's select look, as a text field. */
.tc-callback-field {
    margin-top: 18px;
    margin-bottom: 0;
}

.form-field-wrap .tc-callback-input {
    background-image: none;
    padding-right: 14px;
    cursor: text;
    color: var(--color-text-dark, #1e293b);
}

/* Upload step, phones (C17): the info icon stays on the first line when the text wraps. */
@media (max-width: 767px) {
    .upload-dropzone .upload-accepted {
        align-items: flex-start;
    }

    .upload-dropzone .upload-accepted-icon {
        margin-top: 3px;
    }

    .upload-dropzone .upload-drag-text {
        text-wrap: balance;
    }
}

/* Widget title on phones (W20): no word left alone on the second line. */
.form-card-title {
    text-wrap: balance;
}

/* Privacy line under the contact and manual quote buttons, and the link under the contact card (W16). */
.tc-privacy-line {
    margin: 12px 0 0 0;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
    color: var(--color-text-gray, #434343);
}

.tc-privacy-line a {
    color: inherit;
    text-decoration: underline;
}

.tc-contact-cta {
    margin: 20px 0 0 0;
    text-align: center;
    font-size: 16px;
}

.tc-contact-cta a {
    color: var(--color-primary, #1a63e2);
    font-weight: 500;
    text-decoration: none;
}

.tc-contact-cta a:hover,
.tc-contact-cta a:focus-visible {
    text-decoration: underline;
}

/* A contact field the widget found empty or wrong: red border next to its message. */
.contact-form .contact-input[aria-invalid="true"] {
    border-color: #c62828;
}

/* The e-mail field of the upload step (EU and US) with a wrong address (R4). */
.tc-email-input[aria-invalid="true"],
.tc-gs-input[aria-invalid="true"] {
    border-color: #c62828 !important;
}

.tc-ready-hint {
    min-height: 1.4em;   /* C9a: the line keeps its height when the hint is hidden */
    margin: 8px 0 0 0;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    color: var(--color-text-gray, #434343);
}

/* ------------------------------------------------------------------ the waiting screen */

/* The card is the positioning context, so the overlay covers the price and the button while leaving
   the uploaded documents visible beside it (contract 3.4). */
.upload-sidebar-card {
    position: relative;
}

.tc-waiting {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.94);
    z-index: 2;
}

.tc-waiting-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid var(--color-border, #eaeaea);
    border-top-color: var(--color-primary, #1a63e2);
    border-radius: 50%;
    animation: tc-spin 0.8s linear infinite;
}

@keyframes tc-spin {
    to { transform: rotate(360deg); }
}

/* Respecting the setting rather than ignoring it: the wait still reads as a wait without the motion. */
@media (prefers-reduced-motion: reduce) {
    .tc-waiting-spinner { animation-duration: 3s; }
}

.tc-waiting-text {
    margin: 0;
    text-align: center;
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-text-dark, #03031a);
}

/* ------------------------------------------------------------------ the manual quote form */

/* It stands in for the quote form on the hero card and for the card's contents on the upload page, so
   it carries no background or padding of its own - whichever card it lands in supplies those. */
.tc-manual-form {
    display: block;
}

.tc-field {
    margin-top: 16px;
}

.tc-field-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.3;
    color: var(--color-text-gray, #434343);
}

.tc-field-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--color-border, #eaeaea);
    border-radius: 6px;
    font-family: inherit;
    font-size: 17px; /* input text as on the homepage - David 2026-10-07 */
    line-height: 1.4;
    color: var(--color-text-dark, #03031a);
    background: var(--color-white, #fff);
}

textarea.tc-field-input {
    min-height: 88px;
    resize: vertical;
}

.tc-field-input:focus {
    outline: none;
    border-color: var(--color-primary, #1a63e2);
}

.tc-field-error {
    margin: 10px 0 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: #c62828;
}

.tc-manual-form button[type="submit"] {
    margin-top: 20px;
}

/* Errors on the theme's own contact fields sit under the field, inside its wrapper. */
.tc-contact-error {
    margin: 6px 0 0 0;
}

/* One confirmation for the manual quote, the contact form and Call me Back (R12, David 2026-10-15):
   pale green box, green check mark, title, text. Dark green text on #ecfdf5 is over 7:1. */
.tc-confirm {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 20px;
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    background: #ecfdf5;
    color: #065f46;
    text-align: center;
}

/* Focus is moved here for screen readers; the ring around it looked like a selection (R12). */
.tc-confirm:focus {
    outline: none;
}

.tc-confirm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #047857;
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.tc-confirm-title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: #065f46;
}

.tc-confirm-text {
    margin: 0;
    max-width: 480px;
    font-size: 15px;
    line-height: 1.6;
    color: #065f46;
}

/* ------------------------------------------------------------------ the manual quote step */

/* The EU upload page turned into the manual quote step (David 2026-10-07/08). Left: the details form,
   in the upload step's bordered card. Right: the theme's summary card. On desktop both cards share
   a height - the sidebar wrapper steps out of the grid (display: contents) so the summary card and
   the form card sit in the same row, with the trust badge on a row of its own under the summary. */
.tc-step-card {
    box-sizing: border-box;
    height: 100%;
    padding: 28px 24px;
    background: var(--color-white, #fff);
    border: 1px solid #e0e0e0;
    border-radius: 12px;
}

.tc-step-card .tc-field:first-of-type {
    margin-top: 0;
}

@media (min-width: 992px) {
    .upload-inner.tc-manual-step {
        align-items: stretch;
        row-gap: 0; /* the badge keeps its own margin, as under the upload step's card */
    }

    .tc-manual-step .upload-sidebar {
        display: contents;
    }

    .tc-manual-step .upload-main {
        grid-column: 1;
        grid-row: 1;
    }

    .tc-manual-step .tc-manual-summary {
        grid-column: 2;
        grid-row: 1;
    }

    .tc-manual-step .upload-trust-badge {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
    }
}

.tc-files-ok {
    color: #047857;
    font-weight: 600;
}

/* Manual quote step on a laptop (1366 x 768): the button sat 28 px below the fold. Tighter spacing in the
   summary card brings it into view without scrolling (design feedback 2026-10-07). Desktop only. */
@media (min-width: 992px) {
    .tc-manual-step .tc-manual-summary .upload-sidebar-title {
        margin-bottom: 16px;
    }

    .tc-manual-step .tc-manual-summary .upload-sidebar-section {
        margin-bottom: 14px;
    }

    .tc-manual-step .tc-manual-summary .tc-next-steps li {
        margin-bottom: 6px;
    }
}

/* Reviews under the manual quote step, on phones: one swipeable row instead of three stacked cards
   (design feedback 2026-10-07). The next card peeks in, so the row reads as swipeable. Only here - the
   homepage keeps its own layout. */
@media (max-width: 767px) {
    .tc-manual-reviews .testimonials-grid {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 8px;
    }

    .tc-manual-reviews .testimonials-grid::-webkit-scrollbar {
        display: none;
    }

    .tc-manual-reviews .testimonial-card {
        flex: 0 0 85%;
        scroll-snap-align: start;
    }
}

.tc-next-steps {
    list-style: none;
    margin: 4px 0 0 0;
    padding: 0;
    counter-reset: tc-step;
}

.tc-next-steps li {
    position: relative;
    margin: 0 0 10px 0;
    padding-left: 32px;
    font-size: 15px;
    line-height: 22px;
    color: var(--color-text-dark, #03031a);
    counter-increment: tc-step;
}

.tc-next-steps li::before {
    content: counter(tc-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-primary, #1a63e2);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
}

.tc-manual-summary button[type="submit"] {
    margin-top: 8px;
}

/* ------------------------------------------------------------------ call me back */

/* Sits where the button was, inside the quote form's card, so it inherits the card's own width and
   padding. Shown only where the button is - the theme hides that above the mobile breakpoint. */
.tc-callback {
    margin-top: 8px;
}

.tc-callback .tc-field {
    margin-top: 8px;
}

.tc-callback button {
    margin-top: 12px;
}

.tc-outcome-text {
    margin: 12px 0 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-gray, #434343);
}

/* ------------------------------------------------------------------ the US brand */

/* Step 2's form card holds the waiting screen, as the sidebar card does on the EU brands. */
.gs-form-card {
    position: relative;
}

/* The email field, in the theme's own floating-label look (.gs-select-wrap select), without the arrow. */
.tc-gs-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 8.5px 17px;
    border: 1px solid var(--color-neutral-0, #002429);
    border-radius: 8px;
    background: var(--color-neutral-1, #fbf8f5);
    font-family: inherit;
    font-size: 13.6px;
    color: var(--color-secondary, #004852);
    transition: border-color 0.2s;
}

.tc-gs-input:focus {
    outline: none;
    border-color: var(--color-secondary, #004852);
}

.gs-file-item .tc-upload-status {
    margin-left: 12px;
}

.gs-form-card .tc-manual-form .upload-sidebar-title,
.gs-form-card .tc-outcome .upload-sidebar-title,
.footer-form-card .tc-manual-form .upload-sidebar-title,
.footer-form-card .tc-outcome .upload-sidebar-title {
    margin: 0 0 8px 0;
    font-size: 22px;
    line-height: 1.3;
}

/* The US theme keeps its own, smaller input text: the homepage values are the EU theme's. */
.gs-form-card .tc-field-input,
.footer-form-card .tc-field-input {
    font-size: 15px;
}

/* The footer card is dark teal with white text: the grey used on light cards would not be readable.
   The form is left-aligned inside a block the theme centres. */
.footer-form-card .tc-manual-form,
.footer-form-card .tc-outcome {
    text-align: left;
}

.footer-form-card .tc-field-label,
.footer-form-card .tc-outcome-text {
    color: rgba(255, 255, 255, 0.85);
}

.footer-form-card .tc-field-error,
.footer-form-card .tc-order-error,
.footer-form-card .tc-email-error {
    color: #ffb4a8;
}

.footer-form-card .tc-invalid,
.footer-form-card .tc-invalid:focus,
.footer-form-card .tc-invalid:hover {
    border-color: #ffb4a8 !important;
    box-shadow: 0 0 0 1px #ffb4a8;
}

/* The footer form borders a wrapper (.form-group) and lays the languages out in a grid, so the message
   cannot take a line of its own: it hangs under the box, and the box's margin grows to make room for it
   (the next field's label overlaps 8px of the usual 20px). */
.footer-form .form-group.tc-invalid {
    margin-bottom: 40px;
}

.footer-form .form-group .tc-start-error {
    position: absolute;
    top: 100%;
    left: 2px;
    margin: 5px 0 0 0;
    font-size: 12px;
    line-height: 1.3;
    text-align: left;
    white-space: nowrap;
}

.footer-form-card .tc-email-help,
.footer-form-card .tc-ready-hint {
    color: rgba(255, 255, 255, 0.85);
}

/* ------------------------------------------------------------------ R10: the file list (David 2026-10-15) */

/* A very long file name stretched the upload column, the page scrolled sideways at every width and at
   1280 px the summary card was pushed off-screen (V7): grid and flex children may not shrink below their
   content by default, so the name never reached its ellipsis. Everything between the page and the name
   may shrink now; the name gives way first. */
body .upload-inner {
    grid-template-columns: minmax(0, 1fr) 360px;
}
body .upload-main,
body .upload-file-list,
body .upload-file-item {
    min-width: 0;
}
body .upload-file-item .upload-file-info {
    flex: 1 1 auto;
    min-width: 0;
}
body .upload-file-item .upload-file-name {
    flex: 0 1 auto;
    min-width: 3.5em; /* at 320 px "Uploading..." left one letter of the name */
}

/* Phones: the file size gives its room to the name; the page count stays. */
@media (max-width: 420px) {
    body .upload-file-item .upload-file-size {
        display: none;
    }
}

/* A file that cannot be read (V8): the name stays, the red message goes on its own line under it. */
body .upload-file-item.tc-upload-failed .upload-file-info {
    flex-wrap: wrap;
    row-gap: 2px;
}

/* The name stays beside its icon on the first line (a wrapping row places items at their full width). */
body .upload-file-item.tc-upload-failed .upload-file-name {
    max-width: calc(100% - 100px);
}
body .upload-file-item.tc-upload-failed .tc-upload-status {
    flex-basis: 100%;
    margin-left: 30px;
    text-align: left;
}

/* The remove button: at least 44 x 44 px to tap (V16), the cross itself unchanged. */
body .upload-file-item .upload-file-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: -10px -10px -10px 4px;
}

@media (max-width: 991px) {
    body .upload-inner {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ------------------------------------------------------------------ R11: manual quote step (David 2026-10-15) */

/* On a 1054 x 701 laptop the "Request a quote" button sat ~150 px below the fold (V9). Desktop only:
   a shorter hero under the title, and the four summary rows as label - value on one line. The card is
   about as tall as the form beside it, so making it sticky would not have moved it. */
@media (min-width: 992px) {
    body.tc-manual-page .upload-hero {
        padding-bottom: 64px;
    }

    body.tc-manual-page .upload-hero .upload-subtitle {
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }

    .tc-manual-step .tc-manual-summary .upload-sidebar-section:not(.tc-next-section) {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 16px;
        align-items: baseline;
        margin-bottom: 10px;
    }

    .tc-manual-step .tc-manual-summary .upload-sidebar-section:not(.tc-next-section) > .upload-sidebar-label {
        grid-column: 1;
        grid-row: 1 / span 10;
        margin: 0;
    }

    .tc-manual-step .tc-manual-summary .upload-sidebar-section:not(.tc-next-section) > :not(.upload-sidebar-label) {
        grid-column: 2;
        justify-self: end;
        text-align: right;
        margin: 0;
    }
}

/* Phones: the subtitle kept 15 px from the screen edge and a large empty band sat under it (V10). */
@media (max-width: 767px) {
    body.tc-manual-page .upload-hero {
        padding-bottom: 40px;
    }

    body.tc-manual-page .upload-hero .upload-subtitle {
        padding: 0 12px;
    }
}

/* ------------------------------------------------------------------ R12: errors and labels (David 2026-10-15) */

/* Red border on every field with an error (V22): the manual quote form and Call me Back kept blue. */
.tc-field-input[aria-invalid="true"],
.tc-field-input[aria-invalid="true"]:focus,
.tc-callback-input[aria-invalid="true"],
.tc-callback-input[aria-invalid="true"]:focus {
    border-color: #c62828 !important;
}

/* The manual quote step's labels in the field border, as on the contact form and the quote form (V23). */
.tc-manual-step .tc-field {
    position: relative;
    margin-top: 22px;
}

.tc-manual-step .tc-field-label {
    position: absolute;
    left: 12px;
    top: 0;
    transform: translateY(-50%);
    margin: 0;
    padding: 0 6px;
    font-size: 12px;
    line-height: 1.2;
    color: #999;
    background: var(--color-white, #fff);
    pointer-events: none;
    z-index: 1;
}

.tc-manual-step .tc-field-input {
    padding: 18px 14px 12px;
    border: 1px solid #d5d5d5;
    border-radius: 10px;
}

.tc-manual-step .tc-field-error {
    margin-top: 6px;
}

/* Call me Back's confirmation inside the quote form card: a little room above it. */
form.order-form .tc-confirm {
    margin-top: 16px;
    padding: 18px 16px;
}