/*
 * Staff Uniforms order form styling.
 * Only ever enqueued on pages containing [staff_uniforms_order_form], so
 * nothing here can affect any other page's appearance.
 */

:root {
    --su-color-primary: #1e88e5;
    --su-color-primary-dark: #1565c0;
    --su-color-primary-tint: #e8f2fd;
    --su-color-success: #1a7f37;
    --su-color-success-tint: #edfaef;
    --su-color-danger: #b32d2e;
    --su-color-danger-tint: #fbeaea;
    --su-color-warning: #b95c00;
    --su-color-warning-tint: #fcf0e4;
    --su-color-text: #1d2327;
    --su-color-text-muted: #646970;
    --su-color-border: #dcdcde;
    --su-color-bg-card: #ffffff;
    --su-color-bg-page: #f3f4f6;
    --su-radius: 12px;
    --su-radius-sm: 8px;
    --su-shadow: 0 1px 3px rgba(0, 0, 0, .07), 0 1px 2px rgba(0, 0, 0, .05);
    --su-shadow-hover: 0 8px 20px rgba(0, 0, 0, .12);
    --su-space-1: 8px;
    --su-space-2: 12px;
    --su-space-3: 16px;
    --su-space-4: 24px;
    --su-space-5: 32px;
}

/************************\
      #GENERAL RULES
\************************/

#staff-uniforms-app * {
    margin: 0;
    box-sizing: border-box;
}

#staff-uniforms-app {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--su-color-text);
    font-size: 16px;
    line-height: 1.5;
}

#staff-uniforms-app a {
    text-decoration: none;
    color: var(--su-color-primary);
}

#staff-uniforms-app h1 { font-size: 1.9rem; }
#staff-uniforms-app h2 { font-size: 1.4rem; }
#staff-uniforms-app h3 { font-size: 1rem; line-height: 1.3; }
#staff-uniforms-app h4 { font-size: .9rem; }

#staff-uniforms-app button {
    cursor: pointer;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: var(--su-radius-sm);
    font-size: 1rem;
    font-weight: 600;
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

#staff-uniforms-app button:hover {
    transform: translateY(-1px);
    box-shadow: var(--su-shadow-hover);
}

#staff-uniforms-app button:active {
    transform: translateY(0);
}

#staff-uniforms-app input[type=text],
#staff-uniforms-app input[type=email],
#staff-uniforms-app input[type=number] {
    width: 100%;
    padding: 12px 14px;
    margin: 6px 0 4px;
    display: block;
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-sm);
    font-size: 1rem;
    background: #fff;
    transition: border-color .12s ease, box-shadow .12s ease;
}

#staff-uniforms-app input:focus,
#staff-uniforms-app select:focus {
    outline: none;
    border-color: var(--su-color-primary);
    box-shadow: 0 0 0 3px var(--su-color-primary-tint);
}

#staff-uniforms-app img {
    max-width: 100%;
    display: block;
}

#staff-uniforms-app select {
    font-size: .95rem;
    background: #fff;
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-sm);
    padding: 8px 10px;
    width: 100%;
}

#staff-uniforms-app .screen-reader-text,
#staff-uniforms-app .invisible-radio {
    /* per https://a11yproject.com/posts/how-to-hide-content/ - the actual
       radio input stays in the DOM (so its label-click/keyboard behavior
       keeps working) but is visually hidden behind the card it controls. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

#staff-uniforms-app th {
    text-transform: capitalize;
    font-weight: 600;
}

/************************\
       #MAIN LAYOUT
\************************/

/*
 * Block themes (e.g. twentytwentyfive) wrap shortcode output in an
 * `.entry-content.is-layout-constrained` element, which caps every direct
 * child's width at the theme's --wp--style--global--content-size (often
 * ~620-650px) with no class on our side to opt out (that's what the
 * alignwide/alignfull classes are for on block-editor content, which our
 * shortcode output doesn't have). Overridden here for our own app root.
 */
#staff-uniforms-app {
    max-width: var(--wp--style--global--wide-size, 1200px) !important;
    margin: var(--su-space-4) auto !important;
    background: var(--su-color-bg-page);
    border-radius: var(--su-radius);
    padding: var(--su-space-4);

    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas:
        "header header"
        "main   cart"
        "controls cart";
    gap: var(--su-space-4);
    align-items: start;
}

.form-header {
    grid-area: header;
}

.main-section,
#intro {
    grid-area: main;
    min-width: 0;
}

.step-controls {
    grid-area: controls;
}

.shopping-cart {
    grid-area: cart;
    position: sticky;
    top: var(--su-space-4);
    align-self: start;
    max-height: calc(100vh - var(--su-space-4) * 2);
    overflow-y: auto;
}

@media (max-width: 900px) {
    #staff-uniforms-app {
        /* minmax(0, 1fr), not bare 1fr: a bare 1fr track still won't shrink
           below the largest minimum content size of whatever's inside it -
           same root cause as a flex item's implicit min-width:auto - and
           the chevron step indicator's unwrappable text was forcing that
           floor wider than the viewport, overflowing the whole page. */
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "header"
            "main"
            "cart"
            "controls";
        padding: var(--su-space-3);
        gap: var(--su-space-3);
    }

    /* Sticky/scrolling the cart only makes sense with a side-by-side layout -
       on a single mobile column it just sits inline between the product grid
       and the step buttons, in normal document flow. */
    .shopping-cart {
        position: static;
        max-height: none;
    }
}

/*----------\
   #Header
\----------*/

.form-header {
    display: flex;
    flex-direction: column;
    gap: var(--su-space-2);
}

.header__step-indicator {
    display: flex;
    list-style: none;
    padding: 0;
}

.header__step-indicator li {
    position: relative;
    flex: 1;
    /* Flex items default to min-width:auto, which (combined with
       white-space:nowrap below) means their "shrunk" size floors out at
       the full unwrapped text width - flex-shrink can't go below that.
       With 5 items and full labels like "1. Required Apparel", that adds
       up to wider than most phone screens, forcing the whole strip (and
       the page along with it) to overflow horizontally instead of
       actually truncating. min-width: 0 removes that floor so the
       overflow/ellipsis rules below can actually take effect. */
    min-width: 0;
    font-size: .8rem;
    font-weight: 600;
    text-align: center;
    color: #fff;
    background: #c2c5cb;
    padding: 14px 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Chevron shape: notch cut into the left edge, point on the right -
       each step "points at" the next one. clip-path (not the old
       position:absolute + hardcoded left:X% layout) so this works at any
       number of steps/widths without per-step magic numbers. */
    clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%);
}

.header__step-indicator li:first-child {
    clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
}

.header__step-indicator li:last-child {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10% 50%);
}

.header__step-indicator li:not(:first-child) {
    margin-left: -16px;
}

/* Earlier steps stack above later ones so each one's point visibly
   overlaps the next one's notch, reading as one connected arrow strip
   instead of separate tiles with gaps between them. */
.header__step-indicator li:nth-child(1) { z-index: 5; }
.header__step-indicator li:nth-child(2) { z-index: 4; }
.header__step-indicator li:nth-child(3) { z-index: 3; }
.header__step-indicator li:nth-child(4) { z-index: 2; }
.header__step-indicator li:nth-child(5) { z-index: 1; }

.header__step-indicator li.current-step {
    background-color: var(--su-color-primary);
}

.selection-instructions {
    font-weight: 600;
    font-size: 1rem;
    color: var(--su-color-text);
    min-height: 1.5em;
}

.step-current-label {
    display: none;
}

/* Below 600px there just isn't room for 5 readable chevron labels side by
   side - shrinking the font/padding further only gets to single letters
   before ellipsis. Instead of fighting for space, switch to small plain
   numbered dots (no chevron shape, no label text) plus a full text line
   underneath spelling out the current step - the same information, laid
   out for the space actually available. */
@media (max-width: 600px) {
    .header__step-indicator {
        justify-content: center;
        gap: 10px;
        counter-reset: step;
    }

    .header__step-indicator li {
        counter-increment: step;
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        padding: 0;
        margin-left: 0;
        border-radius: 50%;
        clip-path: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .8rem;
    }

    .header__step-indicator li::before {
        content: counter(step);
    }

    .header__step-indicator .step-number,
    .header__step-indicator .step-label {
        display: none;
    }

    .step-current-label {
        display: block;
        text-align: center;
        font-size: .85rem;
        color: var(--su-color-text);
    }

    .step-current-label strong {
        color: var(--su-color-primary-dark);
    }
}

/*--------------\
  #Product Grid
\--------------*/

.main-section--product-inventory {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--su-space-3);
}

#intro {
    display: block;
}

.form-wrapper {
    grid-column: 1 / -1;
    background: #fff;
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius);
    padding: var(--su-space-3);
    margin-bottom: var(--su-space-3);
    box-shadow: var(--su-shadow);
}

.form-wrapper__title {
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--su-color-primary-dark);
    margin-bottom: var(--su-space-2);
    padding-bottom: var(--su-space-1);
    border-bottom: 2px solid var(--su-color-primary-tint);
}

.radio-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--su-space-3);
    align-items: stretch;
    background: transparent;
    margin: 0;
}

.product,
.radio-product {
    display: flex;
    flex-direction: column;
    background-color: var(--su-color-bg-card);
    border: 2px solid transparent;
    border-radius: var(--su-radius);
    box-shadow: var(--su-shadow);
    overflow: hidden;
    margin: 0;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    cursor: pointer;
    height: 100%;
}

.product:hover,
.radio-product:hover {
    transform: translateY(-3px);
    box-shadow: var(--su-shadow-hover);
}

.product.selected,
.radio-product.selected {
    border-color: var(--su-color-primary);
    background-color: var(--su-color-primary-tint);
}

/* Inside a .form-wrapper group card (Required Apparel), give the cards a
   plain border instead of their own shadow - the cards already have the
   wrapper's shadow for depth, so a second shadow underneath just muddies
   the grouping rather than reinforcing it. */
.form-wrapper .radio-product {
    background-color: var(--su-color-bg-page);
    box-shadow: none;
}

.form-wrapper .radio-product:hover {
    box-shadow: none;
    border-color: var(--su-color-border);
}

.form-wrapper .radio-product.selected {
    border-color: var(--su-color-primary);
    background-color: var(--su-color-primary-tint);
}

.product__img-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--su-space-2);
    text-align: center;
}

.product__img-wrapper img {
    aspect-ratio: 1;
    object-fit: contain;
    margin-bottom: var(--su-space-1);
}

.product h3,
.radio-product h3 {
    font-size: .9rem;
    line-height: 1.3;
    margin-bottom: var(--su-space-1);
}

.product .price {
    width: auto;
    align-self: center;
    text-align: center;
    background-color: var(--su-color-success-tint);
    color: var(--su-color-success);
    font-weight: 700;
    font-size: .85rem;
    padding: 4px 12px;
    border-radius: 999px;
    margin-top: auto;
}

.select-row {
    display: flex;
    gap: var(--su-space-1);
    padding: 0 var(--su-space-2) var(--su-space-2);
}

.select-row .select-wrapper {
    flex: 1;
    min-width: 0;
    padding: 0;
}

/*----------\
  #Checkout
\----------*/

.main-section--checkout {
    display: block;
    background: var(--su-color-bg-card);
    border-radius: var(--su-radius);
    box-shadow: var(--su-shadow);
    padding: var(--su-space-4);
}

.main-section--checkout h2 {
    margin-bottom: var(--su-space-3);
}

.grid-container--50-50 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--su-space-2);
}

.main-section--checkout__cc-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--su-space-2);
    margin-top: var(--su-space-3);
}

.main-section--checkout__field--50-50 {
    width: 100%;
    max-width: 420px;
}

.main-section--checkout__field {
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.main-section--checkout__field label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: var(--su-color-text-muted);
    margin-bottom: 2px;
}

.required-asterisk {
    color: var(--su-color-danger);
    font-weight: bold;
}

/* Collect.js mounts an iframe inside these - give them the same height as
   a normal text input (see input[type=text] above, which renders at 44px)
   so the card fields line up with the rest of the form. height is
   deliberately a fixed pixel value (not min-height/auto) because the
   iframe rule below sizes itself to 100% of this container - a percentage
   height only resolves against an explicit parent height, so without it
   the iframe can end up zero-height and silently refuse focus and typing,
   which looks like a broken field rather than a sizing bug (the same
   failure bunkmail's Collect.js fields hit). No border/background here -
   the iframe's own input (styled via customCss in app.js's
   configureCollectJs()) provides the visible field surface, so a second
   border/background on this wrapper would just double up on it. */
#ccnumber,
#ccexp,
#cvv {
    border: 1px solid var(--su-color-border);
    border-radius: var(--su-radius-sm);
    background: #fff;
    height: 44px;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
}

#ccnumber iframe,
#ccexp iframe,
#cvv iframe {
    border: none !important;
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.checkout-alert-error {
    border: 1px solid var(--su-color-danger-tint);
    border-radius: var(--su-radius-sm);
    background-color: var(--su-color-danger-tint);
    color: var(--su-color-danger);
    padding: var(--su-space-3);
    margin-bottom: var(--su-space-3);
}

.checkout-alert-error p {
    font-weight: 700;
    margin-bottom: var(--su-space-1);
}

.checkout-alert-error li {
    display: block;
}

@media (max-width: 600px) {
    .grid-container--50-50,
    .main-section--checkout__cc-fields {
        grid-template-columns: 1fr;
    }
}

/*---------------\
  #Step Controls
\---------------*/

.step-controls {
    display: flex;
    gap: var(--su-space-2);
    padding: 0;
}

.step-controls__button--back,
.step-controls__button--next,
.step-controls__button--checkout {
    flex: 1;
}

.step-controls__button--back {
    background-color: #6b7280;
}

.step-controls__button--next {
    background-color: var(--su-color-primary);
}

.step-controls__button--checkout {
    background-color: var(--su-color-success);
}

@media (max-width: 600px) {
    .step-controls {
        flex-direction: column;
    }
}

/*---------------\
  #Shopping Cart
\---------------*/

.shopping-cart {
    background: var(--su-color-bg-card);
    border-radius: var(--su-radius);
    box-shadow: var(--su-shadow);
    padding: var(--su-space-3);
}

.shopping-cart h2 {
    font-size: 1.1rem;
}

.shopping-cart hr {
    border: none;
    border-top: 1px solid var(--su-color-border);
    margin: var(--su-space-2) 0;
}

.shopping-cart__table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}

.shopping-cart__table th {
    text-align: left;
    font-weight: 600;
    color: var(--su-color-text-muted);
    padding: 4px 6px;
    font-size: .75rem;
    text-transform: uppercase;
}

.shopping-cart__table td {
    padding: 6px 6px;
    border-bottom: 1px solid #f0f0f1;
}

.shopping-cart__section-header {
    background-color: var(--su-color-text);
    color: #fff;
}

.shopping-cart__section-header td {
    border-bottom: none;
    font-weight: 600;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.shopping-cart__total-row {
    border-top: 2px solid var(--su-color-text);
    font-weight: 700;
}

.shopping-cart__total-label {
    text-align: right;
    padding-right: var(--su-space-2);
}

/************************\
        #INTRO PAGE
\************************/

#intro {
    font-size: 1.05rem;
    line-height: 1.6;
    background: linear-gradient(135deg, var(--su-color-primary), var(--su-color-primary-dark));
    color: #fff;
    border-radius: var(--su-radius);
    padding: var(--su-space-5) var(--su-space-4);
}

#intro fieldset {
    border: none;
}

#intro legend {
    width: 100%;
}

#intro h1 {
    padding-left: 15px;
    padding-bottom: 5px;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    text-transform: uppercase;
    margin-bottom: var(--su-space-4);
    letter-spacing: 2px;
    font-weight: 700;
}

#intro label {
    display: flex;
    align-items: center;
    margin-bottom: var(--su-space-3);
    cursor: pointer;
}

#intro label > input {
    display: none;
}

#intro label > i {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    margin-right: var(--su-space-2);
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: inset 0 0 0 4px var(--su-color-primary-dark);
    transition: 0.2s;
}

#intro label > span {
    display: inline-block;
    padding-bottom: 3px;
    border-bottom: 2px dotted rgba(255, 255, 255, .6);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: .95rem;
    color: #fff;
}

#intro label > input:checked + i {
    background: #fff;
}

.emphasize {
    font-weight: bold;
    color: var(--su-color-danger);
}

/* Wrapper for the full-width page template (StaffUniforms\Public\PageTemplate).
   The theme's default page wrapper squashes the multi-step form; this lets it
   span the viewport while the form's own inner .container caps line length. */
.su-order-form-page {
    width: 100%;
    padding: 2rem 1rem;
}

/* Hide the order form until Vue has compiled it, so the raw template (error box,
   not-yet-evaluated v-if sections, {{ }} placeholders) doesn't flash on load.
   Vue strips the v-cloak attribute once #staff-uniforms-app is mounted. */
[v-cloak] {
    display: none !important;
}