/* =======================================This section is for the form labels and headers */
/* Form | Live Preview side by side — same split as the IMO, BOL, Shipping
   Request, and Packing Slip pages (.form-container + .preview-container as
   flex siblings of .container, css/base.css's sitewide flex-row). */
.form-container {
    flex: 1;
    width: 100%;
    max-width: 50%;
    min-width: 0;
    margin: 0;
    padding: 30px;
    background: linear-gradient(145deg, var(--neu-bg-primary), var(--neu-bg-secondary));
    box-shadow: 8px 8px 16px var(--neu-shadow-dark), -8px -8px 16px var(--neu-shadow-light);
    border-radius: var(--neu-radius);
}

.form-container h1, .print-container h1 {
    text-align: center;
    margin-bottom: 30px;
    font-size: var(--h2-size);
    color: var(--text-color);
}

.form-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.form-group label {
    display: block;
    /* Slightly larger than the sitewide --h5-size (1rem) default — scoped
       to this page's own .form-group rule rather than bumping the shared
       variable, which other tool pages (opticrma.css, rma.css, dash.css)
       also rely on. Fixed px, not rem: this page's production render
       turned out to have a 62.5% root font-size (1rem = 10px, not the
       usual 16px), so 1.125rem was silently rendering as 11.25px there —
       every other tool page was since matched to this rule's intended
       size, not to what it actually computed to live, so this is the one
       that needed to catch up rather than the other way around. */
    font-size: 14px;
    font-weight: bold;
    font-family: "Poppins";
    margin-bottom: 8px;
    color: var(--text-color);
}

/* select is deliberately excluded from the border/background/box-shadow
   declarations below (kept only for input/textarea) — a shorthand
   `background:` here would win over, and silently strip, the gradient +
   custom dropdown-arrow SVG that css/neu-components.css's own dedicated
   `select { background-image: ... }` rule adds (this class selector
   outranks that bare-element one). select still gets the shared sizing/
   typography further down. input[type="color"] is excluded from all three
   rules below for the same reason .banner-swatch/.banner-custom-color
   exist at all — it's a small circular swatch button, not a text field,
   and `.form-group input`'s class+type selector would otherwise outrank
   their plain class rules on width/border-radius/box-shadow.
   input[type="checkbox"] is excluded for the same reason — it needs to
   stay a small square, not stretch to width:100%, so css/neu-components.css's
   shared checkbox styling (appearance:none + drawn checkmark) can size it
   in em instead. */
.form-group input:not([type="color"]):not([type="checkbox"]),
.form-group textarea {
    border: none;
    border-radius: var(--neu-radius-sm);
    background: linear-gradient(145deg, var(--neu-bg-secondary), var(--neu-bg-primary));
    box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light);
}

.form-group input:not([type="color"]):not([type="checkbox"]),
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 16px;
    color: var(--text-color);
    /* line-height pinned in px so the box's total height (padding +
       line-height) is unchanged from the previous 14px/normal-line-height
       result — only the glyphs get bigger. */
    font-size: 16px;
    line-height: 21px;
    font-family: "Poppins", Arial, sans-serif;
    transition: box-shadow 0.3s ease;
    box-sizing: border-box;
}

.form-group input:not([type="color"]):not([type="checkbox"]):focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light), 0 0 0 2px var(--neu-primary);
}

.form-group textarea {
    height: 260px;
    min-height: 260px;
    max-height: 260px;
    resize: none;
}

/* .info-tooltip / .info-tooltip-text (the info icon next to "Banner
   (optional):") moved to css/neu-components.css — it's a generic
   CSS-only tooltip component, not specific to this page, and rma.php
   needed the same thing for its photo-upload warning. Loaded globally via
   main.css, so no include change needed here. */

/* Banner color controls — swatches are the primary interface (styled as
   small neu-raised circular buttons, same raised/pressed visual language
   as the delete badges elsewhere on the site), with a native
   <input type="color"> as the last swatch in the row, the "Custom..."
   escape hatch for colors none of the nine presets cover. The swatch's
   own fill color is content, not chrome, so it's the one place literal
   hex colors belong (set inline per-button) rather than themed via the
   neu tokens. */
.banner-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.banner-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--neu-shadow-dark);
    padding: 0;
    cursor: pointer;
    box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light);
    transition: box-shadow 0.2s ease;
}

.banner-swatch:hover {
    box-shadow: 4px 4px 8px var(--neu-shadow-dark), -4px -4px 8px var(--neu-shadow-light);
}

/* Same active-state treatment as .neu-dropdown-option.active — inset
   shadow plus a themed ring so the selected swatch is unambiguous
   regardless of its own fill color. */
.banner-swatch.active {
    box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light), 0 0 0 2px var(--neu-primary);
}

/* Also carries the .banner-swatch class, so in principle it should just
   inherit their circular size/shadow/active-ring styling — but
   css/components/inputs.css has its own sitewide, unguarded
   `.form-group input { border: none; box-shadow: inset ...; }` (class+type
   specificity, same as .form-group's own excluded rules above) that also
   matches a bare `.banner-swatch` on an <input> and wins the tie depending
   on stylesheet load order. Redeclaring size/border/shadow/active state
   here under the .banner-group ancestor (3 classes at most) outranks that
   regardless of load order, without having to touch the shared global
   file for one page-specific control. The native color-input chrome still
   needs resetting on top of that so the picker fills the circle
   edge-to-edge instead of showing its default inset swatch-in-a-box look —
   can't be restyled further than this, the accepted, deliberate limitation
   noted in the feature plan. */
.banner-group .banner-custom-color {
    position: relative;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--neu-shadow-dark);
    border-radius: 50%;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light);
    cursor: pointer;
}

/* A horizontal line through the swatch, always on top of whatever color
   is currently picked — the "Custom..." control's own fill mirrors the
   selected color (so the native picker opens near it, and so it reads as
   "selected" like any other swatch when it's the active source), but that
   made it visually indistinguishable from a plain preset when the two
   happened to match. The line marks this one as the custom-picker slot
   regardless of its current color. */
.banner-group .banner-custom-color::after {
    content: '';
    position: absolute;
    left: 5px;
    right: 5px;
    top: 50%;
    height: 2px;
    background: white;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
    border-radius: 1px;
    transform: translateY(-50%);
    pointer-events: none;
}

.banner-group .banner-custom-color:hover {
    box-shadow: 4px 4px 8px var(--neu-shadow-dark), -4px -4px 8px var(--neu-shadow-light);
}

.banner-group .banner-custom-color.active {
    box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light), 0 0 0 2px var(--neu-primary);
}

.banner-custom-color::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 50%;
}

.banner-custom-color::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

.banner-custom-color::-moz-color-swatch {
    border: none;
    border-radius: 50%;
}

/* js/neu-color-picker.js's visible trigger button, standing in for the
   native <input type="color"> (hidden, but still the real value/id) —
   inherits .banner-swatch/.banner-custom-color's circular size/shadow/
   line-through styling above via shared classes, so only its own "custom
   color is currently selected" ring needs a rule here. Deliberately a
   separate class from .banner-swatch.active rather than reusing it: this
   page's getSelectedBannerColor()/extraFields() identify the active
   custom swatch by *element identity*
   (document.querySelector('.banner-swatch.active') === the real hidden
   input), and a second element also carrying .active would turn that
   into a coin flip between the two. */
.neu-color-picker-active {
    box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light), 0 0 0 2px var(--neu-primary);
}

/* Pallet-vs-Box count-type selector — custom ARIA radio buttons (button +
   role="radio", styled circle + inner dot toggled via .active), matching
   the neumorphic radio pattern from the reference design rather than native
   <input type="radio">. Sized in em off .count-type-option's own font-size
   so the circle tracks the size of its adjacent label text instead of a
   fixed pixel size. */
.count-type-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 8px;
}

.count-type-option {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Matches .form-group label's own size/weight below (14px, bold) —
       these radio labels stand in for that label on this field, so they
       need to read the same as "Logical Location:", "Send To Location:",
       etc., not smaller/lighter body text. Fixed px, not rem: this page's
       production render has a 62.5% root font-size (1rem = 10px, not the
       usual 16px), so 1.125rem was silently rendering at 11.25px there —
       same bug .form-group label itself just got fixed for. .count-type-
       radio below is sized in em off this value, so fixing it here also
       fixes the radio circle's size to match. */
    font-size: 14px;
}

.count-type-radio {
    /* <button> doesn't inherit font-size from its parent by default (the
       browser UA stylesheet gives it its own ~13.3px control font) — without
       this, the 1em width below sizes off that fixed UA value instead of
       .count-type-option's actual 16px, so the circle stops tracking the
       text size it's meant to match. */
    font: inherit;
    width: 1em;
    height: 1em;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--neu-bg-secondary), var(--neu-bg-primary));
    box-shadow: inset 2px 2px 4px var(--neu-shadow-dark), inset -2px -2px 4px var(--neu-shadow-light);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.count-type-radio:focus-visible {
    outline: 2px solid var(--neu-primary);
    outline-offset: 2px;
}

.count-type-radio-dot {
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--neu-primary-bright), var(--neu-primary));
    opacity: 0;
    transition: opacity 0.15s ease;
}

.count-type-radio.active .count-type-radio-dot {
    opacity: 1;
}

.count-type-radio-text {
    font-family: "Poppins", Arial, sans-serif;
    font-weight: bold;
    color: var(--text-color);
    cursor: pointer;
    user-select: none;
}

/* ATTN To / Send To Location visibility toggle — sits inline with that
   field's own label, on the label row above the input (not the input row
   itself). Matches the reference design's toggle switch (pill track +
   sliding circular thumb, track fills with the primary gradient once on)
   at the same 1.125rem basis as .count-type-option above, so it renders
   at the same physical size as the Pallet/Box Count radio buttons
   regardless of what font-size the surrounding label happens to use. */
.field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.field-label-row label {
    margin-bottom: 0;
}

.neu-toggle {
    /* font: inherit must come first — it's a shorthand, so declaring it
       after font-size would reset font-size back to the inherited value
       instead of the explicit 1.125rem below. It's still needed at all
       because <button> doesn't inherit font-size from its parent by
       default (same UA-stylesheet quirk noted on .count-type-radio
       above). */
    font: inherit;
    font-size: 1.125rem;
    width: 1.75em;
    height: 1em;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: linear-gradient(145deg, var(--neu-bg-secondary), var(--neu-bg-primary));
    box-shadow: inset 2px 2px 4px var(--neu-shadow-dark), inset -2px -2px 4px var(--neu-shadow-light);
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.neu-toggle:focus-visible {
    outline: 2px solid var(--neu-primary);
    outline-offset: 2px;
}

.neu-toggle.active {
    background: linear-gradient(135deg, var(--neu-primary-bright), var(--neu-primary));
    box-shadow: 2px 2px 4px var(--neu-shadow-dark), -2px -2px 4px var(--neu-shadow-light);
}

.neu-toggle-thumb {
    position: absolute;
    top: 0.125em;
    left: 0.125em;
    width: 0.75em;
    height: 0.75em;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--neu-bg-primary), var(--neu-bg-secondary));
    box-shadow: 1px 1px 3px var(--neu-shadow-dark), -1px -1px 2px var(--neu-shadow-light);
    transition: left 0.2s ease;
}

.neu-toggle.active .neu-toggle-thumb {
    left: calc(100% - 0.125em - 0.75em);
}

/* The pallet/box count label in the live preview & print footers ("Pallet
   Count" / "Box Count", swapped by JS to match the radio above) is its own
   <span> so JS can retarget its text — without this override it would
   inherit the bold weight .live-preview-footer span / .print-footer span
   give every other value span, when only the label prefix should stay
   plain like it always has. */
.live-preview-footer .footer-label,
.print-footer .footer-label {
    font-weight: normal;
}

/* Special styling for the font size and bold checkbox row */
.form-group[style*="display: flex"] {
    flex-direction: row;
    align-items: flex-end;
    gap: 20px;
}

.form-group[style*="display: flex"] > div {
    flex: 1;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}

.checkbox-group label {
    margin-bottom: 0;
    font-size: 14px;
}

/* Sizing/appearance now come from the shared input[type="checkbox"]
   rule in css/neu-components.css (matches the reference neumorphic
   design) — this used to force the plain OS checkbox to width:auto +
   transform:scale(1.2), which would have fought that rule's em-based
   sizing. */

/* Two Column Layout */
.form-row {
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
}

.form-column {
    flex: 1;
}

.form-column .form-group {
    margin-bottom: 20px;
}

/* Two Column Layout (entry fields only — live preview is now
   .preview-container, a sibling of .form-container rather than a 3rd
   column here). */
.form-row-two {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.form-column-two {
    flex: 1;
}

.form-column-two .form-group {
    margin-bottom: 20px;
}

/* Live Preview card — same treatment as .form-container, sized to match
   it via the shared flex:1/max-width:50% split above. */
.preview-container {
    flex: 1;
    width: 100%;
    max-width: 50%;
    min-width: 0;
    margin: 0;
    padding: 20px;
    background: linear-gradient(145deg, var(--neu-bg-primary), var(--neu-bg-secondary));
    box-shadow: 8px 8px 16px var(--neu-shadow-dark), -8px -8px 16px var(--neu-shadow-light);
    border-radius: var(--neu-radius);
    display: flex;
    flex-direction: column;
}

/* Special styling for font settings group */
.font-settings-group {
    background: linear-gradient(145deg, var(--neu-bg-secondary), var(--neu-bg-primary));
    box-shadow: inset 2px 2px 4px var(--neu-shadow-dark), inset -2px -2px 4px var(--neu-shadow-light);
    border: none;
    border-radius: var(--neu-radius-sm);
    padding: 15px;
}

.font-settings-group .checkbox-group {
    margin-top: 0;
    justify-content: flex-start;
}

/* Live Preview — same .preview-scroll-container / .<tool>-preview
   structure and sizing as css/bol.css / css/create/imo.css, instead of the
   old fixed-612x792px box inside its own extra labeled card. The "paper"
   is now 8.5in x 11in (816x1056px @96dpi, the CSS-standard resolution
   those pages use — the old 612x792 box was actually 72dpi PostScript
   points, a different, smaller convention), scaled responsively via
   --preview-scale instead of a fixed factor. */
.preview-scroll-container {
    /* min(0.75, ...) default, refined by js/placard-user.js's
       applyResponsivePlacardScale() (same fix qr.js/bol.js/packingslip.js
       already use) — the CSS approximation here treats the scroll
       container's width as 90vw, which is wrong once .preview-container's
       own padding, this element's own padding, and the outer .container's
       padding are subtracted; the JS override measures the real available
       width instead. */
    --preview-scale: min(0.75, calc(90vw / 816px));
    width: 100%;
    height: calc(1056px * var(--preview-scale) + 30px);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 15px;
}

.placard-preview {
    width: 8.5in;
    height: 11in;
    background-color: white;
    color: black;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: relative;
    margin: 0 auto;
    flex-shrink: 0;
    transform: scale(var(--preview-scale, 0.75));
    transform-origin: top center;
    padding: 0.5in;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Optional colored banner bar, printed and shown above the Task/LPN/PO
   line. Hidden (display:none, set inline in the markup) whenever there's
   no banner text — fully optional, doesn't affect placards that don't use
   it. Sits inside the already-scaled .live-preview-content/.placard-preview
   tree, so it scales down on screen and back up for print automatically,
   same as every other element in that container. */
.live-preview-banner {
    width: 100%;
    text-align: center;
    padding: 8px 0;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 28px;
    color: white;
    flex-shrink: 0;
    /* Browsers strip background colors when printing unless the page opts
       in — without this the banner would show correctly on screen but
       print as a blank white bar. Scoped to just the banner so it doesn't
       change print behavior for anything else on the page. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.live-preview-header {
    text-align: center;
    margin-bottom: 0px;
    flex-shrink: 0;
}

.live-preview-header h2 {
    font-size: 64px;
    margin: 0;
    color: black;
    font-weight: bold;
    line-height: 1.0;
}

.live-preview-qr {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 170px;
    height: 170px;
    margin: 0 auto;
    background: white;
    font-size: 12px;
    color: #666;
}

.live-preview-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    /* Top reduced from the old 20px (then 6px) — still left a visible gap
       between the Task/LPN/PO heading and the QR code right below it.
       Bottom padding unchanged (space around the description text before
       the footer). */
    padding: 0 0 20px;
    overflow: hidden;
    min-height: 0;
}

.live-preview-body p {
    font-size: 32px;
    line-height: 1.2;
    color: black;
    margin: 10px 0;
    word-wrap: break-word;
    max-width: 98%;
}

/* Allow dynamic width adjustment for description */
#live-preview-description {
    max-width: var(--dynamic-max-width, 98%) !important;
}

.live-preview-footer {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid #ddd;
    font-family: "Poppins";
    font-size: 24px;
    line-height: 1.0;
    color: black;
    text-align: center;
    flex-shrink: 0;
}

.live-preview-footer p {
    margin: 8px 0;
    line-height: 1.0;
    color: black;
    font-size: 24px;
}

.live-preview-footer span {
    font-weight: bold;
    color: black;
}

/* =======================================Style the hidden print content */
.print-container {
    position: absolute;
    left: -9999px;
    top: -9999px;
    visibility: hidden;
    opacity: 0;
}

.print-content {
    width: 8.5in;
    height: 11in;
    padding: 0.5in;
    background-color: white;
    color: black;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    position: relative;
}

.print-header {
    margin-bottom: 20px;
    flex-shrink: 0;
}

.print-body {
    flex: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 20px;
}

.print-footer {
    text-align: center;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid #ddd;
    font-family: "Poppins";
    font-size: 24px;
    line-height: 1.0;
    flex-shrink: 0;
}

.print-footer p {
    margin: 10px 0;
    line-height: 1.0;
}

.print-footer span {
    font-weight: bold;
}

.print-content h2 {
    font-size: 48px;
    margin-bottom: 20px;
    margin-top: 0;
    text-align: center;
    font-weight: bold;
    line-height: 1.2;
} 

/* Add these specific color overrides */
.print-content h2,
.print-content p,
.print-content span,
.print-body,
.print-footer,
.print-header {
    color: black !important;
}

.print-content .print-description {
    color: black;
}

/* QR Code Styling */
#qr-code {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 128px !important;
    height: 128px !important;
    margin: 20px auto !important;
    background: white !important;
    position: relative !important;
}

#qr-code img, #qr-code canvas {
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
    height: auto !important;
    width: auto !important;
    visibility: visible !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Hide duplicate QR elements if they appear */
#qr-code img:not(:first-child),
#qr-code canvas:not(:first-child),
#qr-code > div:not(:first-child) {
    display: none !important;
}

/* Description Text Styling */
#print-description {
    font-size: inherit;
    line-height: 1.2;
    margin: 10px auto;
    max-width: 98%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    text-align: center;
}

/* =======================================Style the previous print preview */
.previous_container {
    flex: 0 0 45%;
    padding: 15px;
    background: linear-gradient(145deg, var(--neu-bg-primary), var(--neu-bg-secondary));
    box-shadow: 8px 8px 16px var(--neu-shadow-dark), -8px -8px 16px var(--neu-shadow-light);
    border-radius: var(--neu-radius);
    overflow: hidden;
    min-height: 50px;
}

.previous_container h2 {
    text-align: center;
    color: var(--text-color);
    margin-bottom: 20px;
    font-size: var(--h2-size);
}

.previous-preview {
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
}

.preview-scale {
    transform: scale(0.35); /* Reduce scale */
    transform-origin: top center;
    margin: -20% -32%; /* Adjust margins */
    background: white;
    min-height: 1056px; /* 11 inches at 96dpi */
    width: 776px; /* 8.5 inches at 96dpi */
    padding: 20px;
    position: relative; /* Add position relative */
}

.print-content.preview-scale {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative; /* Add position relative */
    height: 100%;
    margin: 0;
    padding: 0.5in;
}

.print-header h2 {
    font-size: 48px;
    margin: 10px 0;
    text-align: center;
    color: black;
    font-weight: bold;
}

.print-content.preview-scale .print-header {
    margin-top: 0;
}

.print-content.preview-scale .print-header {
    margin-top: 0;
    position: relative; /* Add position relative */
}

.print-content.preview-scale #previous-qr-code {
    margin: 10px auto;
    display: flex;
    justify-content: center;
}

/* =======================================Style the button container */
.button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 0;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

/* Print/Clear buttons — sit above .preview-scroll-container at the top of
   .preview-container, matching IMO/BOL/Shipping Request/Packing Slip.
   Sized via the shared .btn default (css/neu-components.css) with no
   override here, same as those pages. */
.column-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
}


/*-------------------- Media Queries For Printing --------------------*/

/* Consolidated into one block matching css/bol.css's / css/create/imo.css's
   print technique exactly (this used to be two separate @media print
   blocks using two different, partly-conflicting techniques — a leftover
   from before the preview was restructured to match those pages; the
   simpler visibility-based approach below is the one actually proven
   across BOL and IMO already). */
@media print {
    @page {
        size: letter;
        margin: 0;
    }

    /* Hide notifications completely during print */
    #global-notification-container,
    .global-notification,
    .notification-container,
    .toast,
    .alert,
    .error-message,
    .success-message,
    .warning-message,
    .info-message {
        display: none !important;
        visibility: hidden !important;
    }

    /* Hide everything except the placard preview */
    body * {
        visibility: hidden;
    }

    .placard-preview,
    .placard-preview * {
        visibility: visible;
    }

    .header, .footer, .form-container {
        display: none !important;
    }

    .container {
        padding: 0;
        margin: 0;
    }

    /* Reset all containers */
    body, html, .content, .preview-container, .preview-scroll-container {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Position the placard preview to fill the page */
    .placard-preview {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0.5in !important;
        box-shadow: none !important;
        transform: none !important;
        page-break-after: always !important;
    }

    /* Scaled correctly on screen via .placard-preview's transform, but
       needs its own print-scaled values here like every other child of
       .live-preview-content — the whole subtree is forced back to real,
       unscaled letter-page dimensions for print (see the file-level note
       in placard-feature.md on the two divergent screen/print CSS paths). */
    .live-preview-banner {
        width: 100% !important;
        text-align: center !important;
        padding: 8px 0 !important;
        margin-bottom: 20px !important;
        font-weight: bold !important;
        font-size: 28pt !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .live-preview-header h2 {
        font-size: 48pt !important;
        /* Was 20px, then 8px — combined with .live-preview-body's own top
           padding and the QR's own top margin (neither reset for print),
           that still stacked into a bigger gap on the printed page than
           intended. */
        margin-bottom: 2px !important;
        text-align: center !important;
        font-weight: bold !important;
    }

    .live-preview-qr {
        width: 140px !important;
        height: 140px !important;
        margin: 2px auto !important;
        flex-shrink: 0 !important;
    }

    .live-preview-qr img,
    .live-preview-qr canvas {
        width: 100% !important;
        height: 100% !important;
    }

    .live-preview-body p {
        line-height: 1.4 !important;
        margin-bottom: 20px !important;
        text-align: center !important;
        /* Don't override font-size/font-weight here — #live-preview-description
           below controls those with the user's actual selected values. */
    }

    /* The live preview's own font-size is scaled down for on-screen display
       (js/placard-user.js) — print uses the actual user-selected value via
       these custom properties instead. */
    #live-preview-description {
        font-size: var(--user-font-size, 24px) !important;
        font-weight: var(--user-font-weight, normal) !important;
        line-height: 1.4 !important;
        text-align: center !important;
        word-wrap: break-word !important;
        max-width: 98% !important;
        margin: 10px auto !important;
    }

    .live-preview-footer p {
        font-size: var(--user-footer-font-size, 36px) !important;
        margin-bottom: 8px !important;
        line-height: 1.2 !important;
    }
}

/* Stack .form-container and .preview-container vertically once the
   50/50 split gets too tight for the fields to stay readable. "screen"
   scoped deliberately — a printed Letter page is ~816px in CSS px, which
   falls under this breakpoint too, so an unscoped max-width query would
   have made the live preview stack full-width every time it printed
   (same class of bug documented in css/create/shipping-request.css's own
   900px breakpoint, which this matches for consistency). */
@media screen and (max-width: 900px) {
    .container {
        flex-direction: column;
    }

    .form-container,
    .preview-container {
        max-width: 100%;
    }

    .preview-container {
        margin-top: 20px;
    }
}

/* =======================================Form Mobile Responsive Design */
@media (max-width: 768px) {
    .form-container {
        margin: 0 10px;
        padding: 20px;
    }
    
    .form-group[style*="display: flex"] {
        flex-direction: column;
        gap: 15px;
    }
    
    .form-group[style*="display: flex"] > div {
        flex: none;
    }
    
    .checkbox-group {
        margin-top: 10px;
        justify-content: center;
    }
    
    /* Stack form columns on mobile */
    .form-row {
        flex-direction: column;
        gap: 0;
    }
    
    .form-column {
        flex: none;
    }
    
    /* Stack the two field columns on mobile */
    .form-row-two {
        flex-direction: column;
        gap: 0;
    }

    .form-column-two {
        flex: none;
    }
    
    .button {
        flex-direction: column;
        gap: 15px;
    }
    
    .button .btn {
        width: 100%;
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .form-container {
        margin: 0 5px;
        padding: 15px;
    }
    
    .form-container h1 {
        font-size: var(--h3-size);
        margin-bottom: 20px;
    }
    
    .form-group {
        margin-bottom: 15px;
    }
    
    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: 10px 12px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .button {
        margin-top: 20px;
        padding-top: 15px;
    }

    /* Save/Load/Clear/Print row — .column-buttons was missing flex-wrap
       entirely (fixed above), so on a narrow phone these 4 buttons at the
       desktop .btn padding either overflowed or squeezed together instead
       of wrapping cleanly. Wrapping now works; this shrinks the buttons
       themselves too so 2-per-row looks proportionate rather than each
       one nearly filling the screen width. */
    .column-buttons {
        gap: 6px;
    }

    .column-buttons .btn {
        padding: 8px 14px;
        font-size: 0.8rem;
        gap: 6px;
    }
}