/**
 * FS Sample Order — front-end styles.
 *
 * Layout mirrors /support/sample-order/: four 35px colour bars per row, with the
 * checkbox and label printed ON TOP of the bar. Reference values taken from that
 * page's inline <style>:
 *   .image-container  height 35px, background-size 90% 35px, no-repeat
 *   .image-label      12px, padding-left 30px, colour set per item
 *   h2                #1F2252, 600, 24px      h3  #1F2252, 600, 18px
 *   .center-button    #D06537, white
 *
 * Every selector is scoped under .fs-sample-order — this ships to several sites
 * with different themes and must not style a bare element anywhere.
 *
 * THE ONE THING NOT TO BREAK: a swatch is a 215x35 colour STRIP, not a tile.
 * The ratio arrives as --fsso-swatch-ratio from the catalog. Forcing a square
 * crops every swatch to a sliver of its own middle.
 */

.fs-sample-order {
    --fsso-heading: #1F2252;
    --fsso-ink: #333;
    --fsso-muted: #767676;
    --fsso-line: #9B9B9B;
    --fsso-accent: #0081C3;
    --fsso-button: #D06537;
    --fsso-error: #B32D2E;
    --fsso-bar-h: 35px;
    --fsso-swatch-ratio: 215/35;

    color: var(--fsso-ink);
}

.fs-sample-order *,
.fs-sample-order *::before,
.fs-sample-order *::after {
    box-sizing: border-box;
}

.fs-sample-order .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- headings ----------------------------------------------------------- */

.fs-sample-order__title {
    font-size: 32px;
    margin: 0 0 28px;
}

.fs-sample-group__title,
.fs-sample-category__title--h2,
.fs-sample-order__h2 {
    color: var(--fsso-heading);
    font-weight: 600;
    font-size: 24px;
    /* 8px (Bootstrap h2) + ~21px (the reference page's <br> spacer) */
    margin: 0 0 29px;
    padding: 0;
    float: none;
    display: block;
    width: auto;
}

.fs-sample-category__title--h3 {
    color: var(--fsso-heading);
    font-weight: 600;
    font-size: 18px;
    margin: 0 0 25px;
    padding: 0;
    float: none;
    display: block;
    width: auto;
}

.fs-sample-group {
    margin: 0 0 34px;
}

/* ~21px, standing in for the <br> the reference page puts after each row. */
.fs-sample-category {
    margin: 0 0 21px;
}

.fs-sample-category fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.fs-sample-selectall {
    margin: -6px 0 18px;
    font-size: inherit; /* the reference page sets this line at body size */
    color: var(--fsso-ink);
}

/* "Order individually" — an h3-styled line under each Select all, as on the
   reference page. */
.fs-sample-category__subtitle {
    color: var(--fsso-heading);
    font-weight: 600;
    font-size: 18px;
    margin: 0 0 25px;
}

.fs-sample-selectall label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
}

.fs-sample-selectall input {
    margin: 0;
    accent-color: var(--fsso-accent);
}

/* --- the swatch bars ---------------------------------------------------- */

/* Reproduces Bootstrap `.row > .col-md-3` geometry exactly, because that is what
   the reference page uses and the difference is very visible:
     - negative side margins widen the track the way `.row` does (container +30px)
     - four equal columns with NO gap; the only gutter is each item's `0 5px`
       padding plus the swatch's own 10% inset, as on the reference page
   The previous version used a 30px grid gap AND a left-flush 90% bar, which made
   every bar 10% narrower with roughly double the gutter — bars looking scattered
   rather than gridded. */
.fs-sample-items {
    list-style: none;
    padding: 0;
    margin: 0 -15px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 0;
    row-gap: 25px; /* .laminate/.powder .image-container { margin-bottom: 25px } */
    text-align: left;
}

.fs-sample-item {
    position: relative;
    height: var(--fsso-bar-h);
    margin: 0;
    padding: 0 5px; /* .image-container { padding: 0 5px } */
    --fsso-item-color: white;
}

/* 35px from the item's left edge — the reference page's 5px container padding
   plus the label's 30px padding-left. At 6px it hugged the bar edge. */
.fs-sample-item > input[type="checkbox"] {
    position: absolute;
    top: 50%;
    left: 35px;
    transform: translateY(-50%);
    z-index: 2;
    margin: 0;
    accent-color: var(--fsso-accent);
    cursor: pointer;
}

.fs-sample-item label {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
    /* 35px checkbox + its 5px gap + ~13px box = text at ~53px, as on the reference */
    padding: 0 4px 0 53px;
    font-weight: 400;
}

/* 90% wide and CENTRED — `background-size: 90% 35px` painted with the class's
   `background-position: center`, which the page's inline style does not override.
   Centring is why the reference bars sit in an even 5% margin on both sides. */
.fs-sample-item__swatch {
    position: absolute;
    top: 0;
    left: 5%;
    z-index: 0;
    width: 90%;
    height: var(--fsso-bar-h);
    object-fit: fill;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    display: block;
}

.fs-sample-item__name {
    position: relative;
    z-index: 1;
    font-size: 12px;
    line-height: 1.2;
    color: var(--fsso-item-color);
    padding-top: 5px;
}

/* The reference page has no checked-state styling — the checkbox itself is the
   affordance. Focus styling stays for keyboard users. */

.fs-sample-item > input:focus-visible ~ label {
    outline: 3px solid var(--fsso-accent);
    outline-offset: 2px;
}

.fs-sample-item.is-unavailable {
    opacity: .45;
}

.fs-sample-item.is-unavailable label {
    cursor: not-allowed;
    outline: 1px dashed var(--fsso-error);
}

/* --- categories without artwork (the books) ----------------------------- */

/* The books are plain col-md-6 checkboxes on the reference page — no bar, so
   none of the .row negative-margin or bar-padding geometry above applies. */
.fs-sample-items--text {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 24px;
    margin: 0;
}

.fs-sample-items--text .fs-sample-item {
    height: auto;
    min-height: 24px;
    padding: 0;
}

.fs-sample-items--text .fs-sample-item > input[type="checkbox"] {
    left: 0;
}

.fs-sample-items--text .fs-sample-item label {
    position: static;
    padding-left: 22px;
}

.fs-sample-items--text .fs-sample-item__name {
    color: var(--fsso-ink);
    font-size: 14px;
    padding-top: 0;
}

/* --- the grey band + contact + shipping --------------------------------- */

/* The reference page's #step13 row: everything from the collateral checkboxes
   to the Submit button on a #FBFBFB band with 40px vertical padding. */
.fs-sample-order__panel {
    background-color: #FBFBFB;
    padding: 40px 15px;
    margin-top: 30px;
}

.fs-sample-order__panel .fs-sample-category {
    margin-bottom: 10px;
}

.fs-sample-order__contact {
    margin-top: 0;
}

.fs-sample-order__shipnote {
    margin: 10px 0 0;
    padding-left: 30px; /* the reference indents this line 30px */
}

.fs-sample-order__overnight {
    margin: 20px 0 0;
}

/* Six tracks so the reference page's col-md-12 / col-md-6 / col-md-4 all map
   cleanly: full = 6, default half = 3, third = 2. Gutter matches Bootstrap's 30px. */
.fs-sample-order__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0 30px;
}

.fs-sample-field {
    margin: 0;
    grid-column: span 3;
}

.fs-sample-field.is-full {
    grid-column: span 6;
}

.fs-sample-field.is-third {
    grid-column: span 2;
}

.fs-sample-input {
    width: 100%;
    height: var(--fsso-bar-h);
    margin: 10px 0;
    padding: 0 10px;
    /* The reference page's own rule is `border 1px solid #9B9B9B` — missing the
       colon, so it is dropped and the inputs render with the browser default.
       #767676 is that default, pinned so it does not vary by browser. */
    border: 1px solid #767676;
    border-radius: 0;
    background: #fff;
    font-size: 12px;
    color: var(--fsso-ink);
    line-height: normal;
}

.fs-sample-input::placeholder {
    color: #888;
}

.fs-sample-input:focus {
    border-color: var(--fsso-accent);
    outline: none;
}

select.fs-sample-input {
    appearance: auto;
}

/* --- actions ------------------------------------------------------------ */

/* Mirrors the reference page's .center block that holds the Turnstile widget. */
.fs-sample-order__turnstile {
    padding-top: 50px;
}

.fs-sample-order__actions {
    margin-top: 10px;
    text-align: center;
}

.fs-sample-order__submit {
    display: block;
    margin: 25px auto;
    background-color: var(--fsso-button);
    color: #fff;
    border: 0;
    padding: 5px 10px;
    font: inherit;
    font-size: 15px;
    min-width: 140px;
    cursor: pointer;
}

.fs-sample-order__submit:hover:not(:disabled) {
    filter: brightness(1.08);
}

.fs-sample-order__submit:disabled {
    opacity: .55;
    cursor: progress;
}

.fs-sample-order__count {
    margin: 0;
    font-size: 13px;
    color: var(--fsso-muted);
}

.fs-sample-order__count-n {
    font-weight: 700;
    color: var(--fsso-heading);
}

.fs-sample-order__status {
    margin: 0;
    font-size: 14px;
}

.fs-sample-order__status.is-error {
    color: var(--fsso-error);
    font-weight: 600;
}

.fs-sample-order__status.is-success {
    color: #1E7B34;
    font-weight: 600;
}

.fs-sample-notice {
    border-left: 4px solid var(--fsso-error);
    background: #FDF3F3;
    padding: 12px 16px;
    font-size: 14px;
}

/* --- narrow screens ----------------------------------------------------- */

/* Bootstrap's col-md- breakpoint: below this the reference page stacks to one
   per row. Two across is kinder on a phone without changing the desktop look. */
/* Bootstrap's md breakpoint is 768px, and below it col-md-3 becomes full width.
   The old 991px/2-column step meant a 1024px laptop saw two bars per row where
   the reference shows four. */
@media (max-width: 767.98px) {
    .fs-sample-items {
        grid-template-columns: 1fr;
        margin-left: 0;
        margin-right: 0;
    }

    .fs-sample-order__grid {
        grid-template-columns: 1fr;
    }

    .fs-sample-field,
    .fs-sample-field.is-full,
    .fs-sample-field.is-third {
        grid-column: span 1;
    }
}

@media (max-width: 540px) {
    .fs-sample-items {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .fs-sample-items--text {
        grid-template-columns: 1fr;
    }

    .fs-sample-order__title {
        font-size: 26px;
    }
}

/* Honeypot: present in the DOM for bots, invisible and unfocusable for people. */
.fs-sample-order__hp{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;}

/* Post-submit overlay: "Loading…" while sending, then the thank-you + countdown (matches the former theme page). */
.fs-sample-order__overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:99999;padding:20px;}
.fs-sample-order__overlay-box{color:#fff;font-size:24px;line-height:1.4;text-align:center;max-width:640px;}
.fs-sample-order__overlay-title{margin:0 0 8px;font-size:24px;color:#fff;}
.fs-sample-order__overlay-count{margin:0;font-size:18px;color:#fff;}