/*
 * BSS Wholesale Inquiry - public form styles.
 *
 * Replaces the old contents/css/style.css, which was loaded only by the default view, hard-coded a
 * button colour, and referenced an image that was never deployed.
 *
 * This file loads in every theme, so it stays structural. Colours use CSS custom properties with a
 * literal fallback: NopFashion defines them on :root, other themes get the fallback. Anything a
 * theme wants to restyle is more specific in that theme's own stylesheet and wins.
 */

/* ---------- link widget ---------- */

/*
 * Fallback for the form links the widget drops into a zone. In :where() so it carries no
 * specificity - NopFashion styles this widget itself and keeps doing so; themes that do not would
 * otherwise render a bare, unpadded link jammed against the top of the page.
 */
:where(.wholesale-inquiry-links-widget) {
    padding: 10px 15px;
    text-align: center;
}

:where(.wholesale-inquiry-links-widget) .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 0;
    padding-inline-start: 0;
    list-style: none;
}

/* ---------- page columns ---------- */

/*
 * Replaces the Bootstrap "row gx-5 / col-lg-6" the NopFashion view used to hard-code. Bootstrap's
 * grid is not loaded by DefaultClean, so a col-* class there is inert and every field stacks -
 * plugin-owned CSS Grid gives both themes the same two-up layout.
 */
.wsi-page__cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 992px) {
    /* The form carries the work; the rich-text column is supporting copy. */
    .wsi-page__cols {
        grid-template-columns: 3fr 2fr;
        gap: 48px;
    }

    /* No rich-text column: the left column stays as it was, at the same width and in the same place. */
    .wsi-page__cols--single {
        grid-template-columns: minmax(0, 60%);
        justify-content: center;
    }
}

.wsi-page__form,
.wsi-page__aside {
    min-width: 0;
}

/* ---------- sections and the field grid ---------- */

.wsi-section {
    border: 0;
    padding: 0;
    margin: 0 0 24px;
    /* Load-bearing: a CSS Grid inside a <fieldset> overflows its track without this. */
    min-width: 0;
}

.wsi-section:last-child {
    margin-bottom: 0;
}

.wsi-section__title {
    float: none;
    width: auto;
    margin: 0 0 16px;
    padding: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    text-align: start;
    border-bottom: 1px solid var(--gray-g100, #e1e1e1);
}

.wsi-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

@media (min-width: 768px) {
    .wsi-grid {
        gap: 20px;
    }
}

/* Below the tablet breakpoint every field is full width. */
.wsi-col--3,
.wsi-col--4,
.wsi-col--6,
.wsi-col--12 {
    grid-column: span 12;
}

@media (min-width: 768px) {
    .wsi-col--3 { grid-column: span 3; }
    .wsi-col--4 { grid-column: span 4; }
    .wsi-col--6 { grid-column: span 6; }
}

/* Stops a long unbroken word from blowing out its grid track. */
.wsi-field {
    min-width: 0;
}

/*
 * The field wrapper carries the theme's .inputs class so it picks up that theme's form styling, but
 * some themes (DefaultClean among them) use .inputs for a centred, single-column, nowrap layout and
 * zero the font size as a spacing trick. Inside a grid cell those assumptions do not hold, so they
 * are undone here. NopFashion sets none of them, so nothing changes there.
 *
 * font-size: 1em resolves against the *inherited* size, which restores whatever the theme's body
 * size is - unlike a literal value, which would impose one.
 */
:where(.wholesale-inquiry-page) .wsi-field {
    font-size: 1em;
    white-space: normal;
    text-align: start;
}

:where(.wholesale-inquiry-page) .wsi-field__label {
    display: block;
    width: 100%;
    margin-bottom: 6px;
    text-align: start;
}

/*
 * Inline, so the required asterisk that follows sits beside the label rather than dropping to its
 * own line. Some themes make .inputs label a full-width block, which pushes the marker down.
 * This also keeps a checkbox or radio option label next to its control.
 */
:where(.wholesale-inquiry-page) .wsi-field label {
    display: inline;
    width: auto;
    text-align: start;
}

/* A field fills its grid cell; a theme's fixed form width (DefaultClean uses 400px) would overflow
   a half-width column and leave a third of the row empty. */
:where(.wholesale-inquiry-page) .wsi-field input[type="text"],
:where(.wholesale-inquiry-page) .wsi-field input[type="email"],
:where(.wholesale-inquiry-page) .wsi-field input[type="tel"],
:where(.wholesale-inquiry-page) .wsi-field input[type="url"],
:where(.wholesale-inquiry-page) .wsi-field input[type="number"],
:where(.wholesale-inquiry-page) .wsi-field input[type="date"],
:where(.wholesale-inquiry-page) .wsi-field select,
:where(.wholesale-inquiry-page) .wsi-field textarea {
    width: 100%;
    max-width: 100%;
}

/* The hidden attribute has to win. Author rules beat the browser's own [hidden] rule regardless of
   specificity, so anything here that sets display would otherwise stay on screen while hidden -
   which is how "Submitting..." was visible before a submit had started. */
.wholesale-inquiry-page [hidden] {
    display: none !important;
}

/* The grid gap already spaces fields from one another, so the theme's own .inputs margin would
   double it. The last field keeps its margin, which is what separates the group from whatever
   follows it. */
:where(.wholesale-inquiry-page) .form-fields .inputs:not(:last-child) {
    margin-bottom: 0;
}

:where(.wholesale-inquiry-page) .form-fields {
    margin-bottom: 0;
}

/* ---------- page ---------- */

:where(.wholesale-inquiry-page) .fieldset {
    width: 100%;
}

:where(.wholesale-inquiry-page) .inputs {
    text-align: start;
}

:where(.wholesale-inquiry-page) .dropdown-list {
    width: 100%;
}

/* Neither DefaultClean nor NopFashion defines .hint globally. */
:where(.wholesale-inquiry-page) .hint {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    color: var(--gray-g400, #545454);
}

:where(.wholesale-inquiry-page) .option-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    list-style: none;
    padding-inline-start: 0;
}

/* ---------- file upload ---------- */

/* Previously an inline <style> block duplicated in both DisplayForm views. */
.filepond--root {
    margin-bottom: 1rem;
    cursor: pointer;
}

.filepond--credits {
    display: none;
}

/* ---------- product picker ---------- */

:where(.wholesale-inquiry-page) .product-search-input-area {
    display: block;
}

:where(.wholesale-inquiry-page) .selected-products-list {
    margin: 16px 0;
}

:where(.wholesale-inquiry-page) .selected-products-table {
    width: 100%;
}

/*
 * Sizing wrapped in :where() so it contributes zero specificity: this is the fallback for themes
 * that do not style the picker, and any theme rule - such as NopFashion's 120px picture column -
 * wins without needing !important.
 */
:where(.wholesale-inquiry-page .selected-products-table td.picture) img {
    width: 50px;
}

/* Square regardless of the source image, and of whatever width a theme gives the column. */
:where(.wholesale-inquiry-page) .selected-products-table td.picture img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/*
 * The remove control belongs at the far edge of the row: the columns before it take only the width
 * they need, so this one absorbs the slack and its button sits hard against the right edge.
 */
:where(.wholesale-inquiry-page) .selected-products-table td.remove,
:where(.wholesale-inquiry-page) .selected-products-table th:last-child {
    text-align: end;
}


:where(.wholesale-inquiry-page) .selected-products-table td.picture{
    width: 10%;
    white-space: nowrap;
}
:where(.wholesale-inquiry-page) .selected-products-table td.quantity {
    width: 20%;
    white-space: nowrap;
}

:where(.wholesale-inquiry-page) .selected-products-table td.product-name {
    width: auto;
}


:where(.wholesale-inquiry-page .selected-products-table) input.product-quantity {
    width: 70px;
}

:where(.wholesale-inquiry-page) .remove-selected-product {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color .3s ease;
}

:where(.wholesale-inquiry-page) .remove-selected-product:hover {
    color: var(--error, #f03e3e);
}

/* ---------- search box: busy indicator ---------- */

.wholesale-inquiry-page .wsi-search-field {
    position: relative;
    display: block;
}

.wholesale-inquiry-page .wsi-search-spinner {
    display: none;
    position: absolute;
    inset-inline-end: 12px;
    inset-block-start: 50%;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    margin-block-start: -8px;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    opacity: .5;
    pointer-events: none;
    animation: wsi-spin .6s linear infinite;
}

.wholesale-inquiry-page .product-search-term.ui-autocomplete-loading + .wsi-search-spinner {
    display: block;
}

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

@media (prefers-reduced-motion: reduce) {
    .wholesale-inquiry-page .wsi-search-spinner {
        animation-duration: 2.4s;
    }
}

/* jQuery UI autocomplete rows */
.wsi-autocomplete__thumb {
    width: 32px;
    margin-inline-end: 8px;
}

.wsi-autocomplete__empty {
    padding: 15px;
    cursor: default;
    opacity: .75;
}

/* ---------- validation ---------- */

:where(.wholesale-inquiry-page) .product-search-input-area.input-validation-error .product-search-term,
.wsi-field--invalid .product-search-term {
    border-color: var(--error, #f03e3e);
}

.wsi-field .input-validation-error {
    border-color: var(--error, #f03e3e);
}

.wsi-field__error.field-validation-error {
    display: block;
    margin-top: 4px;
    color: var(--error, #f03e3e);
}

.wsi-field__error.field-validation-valid {
    display: none;
}

/* ---------- wizard ---------- */

.wsi-steps {
    margin: 0;
    padding-inline-start: 0;
    list-style: none;
}

.wsi-step:not(:last-child) {
    margin-bottom: 16px;
}

/* Keeps a step's heading clear of the top of the window whenever the browser scrolls to it on its
   own - focus, an anchor, or scrollIntoView. Matches SCROLL_OFFSET in the script. */
.wsi-step,
.wsi-step__title,
.wsi-field {
    scroll-margin-top: 100px;
}

/* A wizard shows one step at a time, heading included - the progress bar above is what tells the
   customer where they are. Leaving the other headings on screen reads as a broken page.
   `.wsi-steps` only exists in wizard mode, so single-page forms are unaffected. */
.wsi-steps > .wsi-step:not(.active) {
    display: none;
}

/* Both are needed: [hidden] so assistive technology skips the content, the class so no theme rule
   can accidentally reveal a step by setting display on the body. */
.wsi-step:not(.active) .wsi-step__body,
.wsi-step__body[hidden] {
    display: none;
}

.wsi-step__title {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    margin: 0 0 12px;
    border-radius: 6px;
    background: var(--bg-g1, #f7f7f7);
}

/*
 * Step entrance.
 *
 * Driven by a class the script adds and then removes, rather than by .active:
 *   - .active is already present when you return to a step, and a CSS animation will not replay
 *     while its selector keeps matching;
 *   - the class is removed once the motion ends, so no transform is left on the step. A lingering
 *     transform would make the step a containing block for fixed-position descendants;
 *   - the direction can differ, so Back settles down from above while Continue rises from below.
 *
 * The heading and the body move together with a small stagger, which reads as the step arriving as
 * one thing. Animating the heading alone left the fields below appearing out of nowhere.
 */
.wsi-step--enter-forward .wsi-step__title,
.wsi-step--enter-back .wsi-step__title,
.wsi-step--enter-forward .wsi-step__body,
.wsi-step--enter-back .wsi-step__body {
    /* backwards, not both: the start frame applies only during the delay, so nothing is left
       holding the element at opacity 0 if the animation is ever cut short. */
    animation-duration: 280ms;
    animation-timing-function: cubic-bezier(.22, .61, .36, 1);
    animation-fill-mode: backwards;
}

.wsi-step--enter-forward .wsi-step__body,
.wsi-step--enter-back .wsi-step__body {
    animation-delay: 60ms;
}

.wsi-step--enter-forward .wsi-step__title,
.wsi-step--enter-forward .wsi-step__body {
    animation-name: wsi-step-enter-forward;
}

.wsi-step--enter-back .wsi-step__title,
.wsi-step--enter-back .wsi-step__body {
    animation-name: wsi-step-enter-back;
}

@keyframes wsi-step-enter-forward {
    from {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes wsi-step-enter-back {
    from {
        opacity: 0;
        transform: translate3d(0, -14px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* The script skips the animation entirely here; this is belt-and-braces for a preference that
   changes after the page has loaded. */
@media (prefers-reduced-motion: reduce) {
    .wsi-step--enter-forward .wsi-step__title,
    .wsi-step--enter-back .wsi-step__title,
    .wsi-step--enter-forward .wsi-step__body,
    .wsi-step--enter-back .wsi-step__body {
        animation: none;
    }
}

.wsi-step__title .number,
.wsi-step__title .title {
    min-height: 40px;
    margin: 0;
    padding: 12px 15px;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
}

.wsi-step__title .number {
    width: 42px;
    text-align: center;
    background: var(--gray-g100, #e1e1e1);
}

.wsi-step__title .title {
    outline: none;
}

.wsi-step__description {
    margin: 0 0 16px;
    color: var(--gray-g400, #545454);
}

/* ---------- progress ---------- */

/*
 * Laid out like the default theme's checkout progress: a circular marker with the step title
 * underneath, on a light band across the top. NopFashion replaces this with its own horizontal
 * arrangement through its stylesheet and its override of the progress partial.
 */
.wsi-progress--stacked {
    margin: 0 0 30px;
    padding: 15px 0;
    text-align: center;
    background-color: var(--bg-g1, #f6f6f6);
}

.wsi-progress--stacked ul {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 10px 20px;
    margin: 0;
    padding-inline-start: 0;
    list-style: none;
}

.wsi-progress__link {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    font-size: 14px;
    color: var(--gray-g400, #777);
    cursor: default;
}

.wsi-progress--stacked li.active-step .wsi-progress__link {
    cursor: pointer;
}

.wsi-progress--stacked li.inactive-step .wsi-progress__link {
    opacity: .3;
}

.wsi-progress__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 auto 12px;
    border: 1px solid #bbb;
    border-radius: 50%;
    background: #fff;
    font-size: 15px;
    line-height: 1;
}

.wsi-progress__num-check {
    display: none;
}

.wsi-progress--stacked li.current-step .wsi-progress__link {
    font-weight: 600;
    color: var(--text-clr, #303030);
}

.wsi-progress--stacked li.current-step .wsi-progress__num {
    border-color: var(--primary, #4ab2f1);
    background: var(--primary, #4ab2f1);
    color: #fff;
}

.wsi-progress--stacked li.done-step .wsi-progress__num {
    border-color: var(--green, #31a56d);
    background: var(--green, #31a56d);
    color: #fff;
}

.wsi-progress--stacked li.done-step .wsi-progress__num-text {
    display: none;
}

.wsi-progress--stacked li.done-step .wsi-progress__num-check {
    display: inline;
}

.wsi-progress__label {
    display: block;
}

/* ---------- button fallback ---------- */

/*
 * Wrapped in :where() so it contributes no specificity: this is only for themes that leave .button-1
 * and .button-2 unstyled outside their own pages (DefaultClean styles them per page - .contact-page
 * .button-1 and so on - so an inquiry form there had raw browser buttons). Any theme rule, however
 * weak, overrides all of this.
 */
:where(.wholesale-inquiry-page, .inquiry-submitted-page) .button-1,
:where(.wholesale-inquiry-page, .inquiry-submitted-page) .button-2 {
    display: inline-block;
    min-width: 140px;
    padding: 10px 30px;
    border: 1px solid transparent;
    border-radius: 3px;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
}

:where(.wholesale-inquiry-page, .inquiry-submitted-page) .button-1 {
    background-color: var(--primary, #4ab2f1);
    color: #fff;
}

:where(.wholesale-inquiry-page, .inquiry-submitted-page) .button-2 {
    background-color: #fff;
    border-color: var(--gray-g100, #ccc);
    color: inherit;
}

/* ---------- navigation and busy state ---------- */

.wsi-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--gray-g100, #e1e1e1);
}

/* Single page: one button, centred under the form. */
.wsi-nav--single {
    justify-content: center;
}

/* Wizard: Back on the left, Continue/Submit pushed to the right by the spacer. */
.wsi-nav--wizard {
    justify-content: space-between;
}

.wsi-nav__spacer {
    flex: 1 1 auto;
}

.wsi-nav__wait {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--gray-g400, #545454);
}

.wsi-nav__back {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: inherit;
}

/* pointer-events rather than the disabled attribute: reCAPTCHA v3 re-triggers a click on the submit
   button once its token resolves, and a disabled button would swallow it. */
.wsi-form--submitting {
    pointer-events: none;
    opacity: .7;
}

.wsi-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: wsi-spin .7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .wsi-spinner { animation-duration: 0s; }
}

/* ---------- draft banner and review ---------- */

.wsi-draft-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    text-align: start;
    border: 1px solid var(--gray-g100, #e1e1e1);
    border-radius: 6px;
    background: var(--bg-g1, #f7f7f7);
}

.wsi-draft-banner__msg {
    flex: 1 1 200px;
}

.wsi-review__group {
    padding: 16px 20px;
    margin-bottom: 16px;
    text-align: start;
    border: 1px solid var(--gray-g100, #e1e1e1);
    border-radius: 6px;
}

.wsi-review__group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.wsi-review__group-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.wsi-review__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px 16px;
    margin: 0;
}

@media (min-width: 768px) {
    .wsi-review__list {
        grid-template-columns: minmax(140px, 240px) 1fr;
    }
}

.wsi-review__list dt {
    font-weight: 500;
    color: var(--gray-g400, #545454);
}

.wsi-review__list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* ---------- thank-you page ---------- */

/*
 * Centring is repeated on the children on purpose. NopFashion's reset sets `text-align: start` on
 * the universal selector, so every element carries its own value and nothing inherits alignment
 * from an ancestor - centring only the wrapper leaves the heading and message left-aligned.
 */
.wsi-success,
.wsi-success__title,
.wsi-success__message {
    text-align: center;
}

.wsi-success {
    max-width: 560px;
    margin: 0 auto;
    padding: 40px 24px;
}

.wsi-success__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--green, #31a56d);
    color: #fff;
}

.wsi-success__title {
    margin: 20px 0 8px;
}

.wsi-success__message {
    margin: 0 0 24px;
    color: var(--gray-g400, #545454);
}

.wsi-success__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* ---------- accessibility ---------- */

.wsi-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}