/* .container's card (background/shadow/radius) comes from css/base.css,
   loaded here via <link href="../main.css"> — matches bol.php/imo.php.
   .shipping-form-container/.preview-container split the row the same way
   css/packingslip.css's do: the preview's real content is a fixed-size
   scaled page, so it gives up width first under a squeeze.
   This used to be a plain wrapper div sitting *inside* a separate
   .form-container (which carried these sizing rules) — that extra wrapper
   was removed, so .shipping-form-container is now the direct flex child
   of .container and needs the sizing itself. It never picks up
   css/components/form.css's old ".form-container { margin: 2rem auto; }"
   bug (see css/bol.css/css/create/imo.css's identical fix) since that
   shared rule targets a different class name than this one. */
.shipping-form-container {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}

.preview-container {
    flex: 1 2 0;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    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);
}

.preview-container .action-buttons-container {
    width: 100%;
    margin-bottom: 12px;
}

.preview-container .button-group {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.preview-scroll-container {
    /* min(0.75, ...) keeps today's desktop/tablet look exactly as-is
       (this only ever shrinks below 0.75, never grows past it) while
       continuously scaling down on narrow viewports instead of clipping —
       90vw approximates this panel's own width once the layout stacks to
       a single column on mobile. */
    --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;
}

.shipping-request-preview {
    width: 8.5in;
    height: 11in;
    background-color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: relative;
    margin: 0 auto;
    flex-shrink: 0;
    /* var(--preview-scale), set on .preview-scroll-container, shrinks
       continuously with viewport width instead of a fixed 0.75 — at mobile
       widths this 816px-wide box (times 0.75 = 612px) was wider than the
       whole preview panel, and .preview-scroll-container's overflow:hidden
       was silently clipping the right side with no way to scroll to it. */
    transform: scale(var(--preview-scale, 0.75));
    transform-origin: top center;
}

.shipping-request-preview .preview-content {
    padding: 0.3in;
    height: 100%;
    box-sizing: border-box;
    color: black;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.4;
    overflow: hidden;
}

.preview-section-title {
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 6px;
    border-bottom: 1px solid #999;
    padding-bottom: 3px;
    overflow-wrap: break-word;
}

.preview-line {
    margin-bottom: 5px;
    overflow-wrap: break-word;
}

.preview-checkbox {
    white-space: nowrap;
}

.form-title-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.form-title-row h2 {
    flex: 1;
    text-align: center;
    margin: 0;
}

/* Matches css/packingslip.css's/css/bol.css's logo-selection-container +
   logo-preview exactly — same themed neu inset panel, same fixed-width
   dropdown so js/neu-dropdown.js's .neu-dropdown wrapper (width:100% by
   default) doesn't stretch to fill this flex row. */
.logo-selection-container {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.logo-preview {
    width: 160px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    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);
    border-radius: var(--neu-radius-sm);
}

.logo-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.logo-selection-container .neu-dropdown {
    flex: 0 0 180px;
    width: 180px;
}

#logoSelect {
    flex: 0 0 180px;
}

/* Two-column layout for Shipper/Recipient Info */
.form-row-2col {
    display: flex;
    gap: 32px;
    margin-bottom: 18px;
}
.form-row-2col .form-col {
    flex: 1 1 0;
    min-width: 0;
    max-width: 50%;
    box-sizing: border-box;
}

/* screen-scoped: a printed Letter page is ~816px in CSS px, which falls
   under this breakpoint too — without "screen", the form would stack into
   a single column (using more paper) every time it printed. */
@media screen and (max-width: 900px) {
    .form-row-2col {
        flex-direction: column;
        gap: 0;
    }
    .form-row-2col .form-col {
        max-width: 100%;
        margin-bottom: 18px;
    }
}

/* Shipping Request Form Styles */
/* Was hardcoded to a dark glassmorphism look (#1a1a2a inputs, white text)
   that pre-dates the neumorphic redesign — rewritten to the same neu-*
   token language every other form on the site now uses. */

.shipping-request-form {
    background: linear-gradient(145deg, var(--neu-bg-primary), var(--neu-bg-secondary));
    border-radius: var(--neu-radius);
    border: none;
    box-shadow: 8px 8px 16px var(--neu-shadow-dark), -8px -8px 16px var(--neu-shadow-light);
    padding: 32px 24px;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.shipping-request-form fieldset {
    border: 1px solid var(--neu-border);
    border-radius: var(--neu-radius-sm);
    margin-bottom: 0;
    padding: 18px 16px 12px 16px;
    background: var(--neu-bg-secondary);
}

.shipping-request-form legend {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--neu-primary);
    padding: 0 8px;
    letter-spacing: 1px;
}

.shipping-request-form label {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Matches every other tool page's label size (css/create/placard.css's
       .form-group label). Fixed px, not rem — other pages in this sweep
       turned out to have unreliable rem sizing (an undefined --h3-size on
       packing slip's page, a 62.5% root font-size reset on BOL's), so px
       avoids that whole class of bug here too even though this page
       didn't show either problem when checked directly. */
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--neu-text);
}

.shipping-request-form input[type="text"],
.shipping-request-form input[type="email"],
.shipping-request-form input[type="date"] {
    flex: 1 1 200px;
    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);
    color: var(--neu-text);
    padding: 6px 10px;
    /* line-height pinned in px so the box's total height is unchanged from
       the previous 16px/normal-line-height result. */
    font-size: 17px;
    line-height: 21px;
    margin-left: 8px;
    margin-right: 8px;
    outline: none;
    transition: box-shadow 0.2s;
}

.shipping-request-form input[type="text"]:focus,
.shipping-request-form input[type="email"]:focus,
.shipping-request-form input[type="date"]:focus {
    box-shadow: inset 2px 2px 4px var(--neu-shadow-dark), inset -2px -2px 4px var(--neu-shadow-light), 0 0 0 2px var(--neu-primary);
}

/* Shipper Information's Date field (js/neu-date-picker.js, data-neu-date-picker
   on the input): each <label> here is itself a flex row ("Date:" text +
   input, see .shipping-request-form label above), and the bare
   input[type="date"] rule above gives the input flex:1 1 200px to fill
   whatever space that row leaves. Wrapping it moves the input one level
   deeper, so the WRAPPER now needs to take over that same flex role for
   the row to size/align the same way it did before — otherwise the
   wrapper (css/neu-components.css's generic width:100%, meant for a
   standalone .form-group) would just shrink to its own content instead of
   sharing the row with the label text the way every other field's input
   still does. */
.shipping-request-form label .date-input-with-picker {
    flex: 1 1 200px;
    width: auto;
    /* Flex items default to min-width:auto (their content's own minimum),
       not 0 — without this, the wrapper refused to shrink below that
       auto-computed minimum and overflowed past the label row's actual
       available width instead of stopping at it, the same reason the
       input itself needs min-width:0 in the generic rule. */
    min-width: 0;
    /* Every other field's bare input has its own margin-right:8px (shared
       rule above), which is what stops its visible right edge 8px short
       of the label row's true boundary rather than flush with it — moved
       here (off the input, onto the wrapper) so the whole input+button
       group stops at that same visible edge other fields already use,
       instead of the button extending 8px further right than they do. */
    margin-right: 8px;
}
/* Left on the input's own margin-right would double up with the wrapper's
   gap between it and the button; the input's left margin is untouched — it
   still separates it from the "Date:" label text before it. */
.shipping-request-form label .date-input-with-picker input[type="date"] {
    margin-right: 0;
}

/* Sizing/appearance now come from the shared input[type="checkbox"]
   rule in css/neu-components.css (matches the reference neumorphic
   design) — this used to just tint the plain OS checkbox via
   accent-color, which doesn't restyle its actual shape/appearance the
   way that rule's appearance:none + drawn checkmark does. */
.shipping-request-form input[type="checkbox"] {
    margin-right: 6px;
}

.shipping-request-form .form-actions {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    align-items: center;
    margin-top: 8px;
}

/* Responsive Design */
@media screen and (max-width: 900px) {
    .shipping-request-form {
        max-width: 98vw;
        padding: 18px 4vw;
    }

    .container {
        flex-direction: column;
    }

    .shipping-form-container,
    .preview-container {
        max-width: 100%;
    }
}
@media screen and (max-width: 600px) {
    .form-title-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .shipping-request-form fieldset {
        padding: 10px 4px 8px 4px;
    }
    .shipping-request-form label {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    /* input[type="text"/"email"/"date"]'s base rule sets `flex: 1 1 200px`
       to hold a fixed WIDTH alongside its label text in the normal
       flex-direction: row layout — flex-basis sizes along the main axis,
       so once the label above switches to flex-direction: column, that
       same 200px became a forced HEIGHT instead of a width, blowing every
       field up to ~200px tall. Same bug class as bol.css's logo dropdown. */
    .shipping-request-form input[type="text"],
    .shipping-request-form input[type="email"],
    .shipping-request-form input[type="date"] {
        flex: 0 0 auto;
        width: 100%;
    }
    /* Same bug, same fix, for the Date field's wrapper (js/neu-date-picker.js) —
       it didn't exist when the fix above was written, so it wasn't
       covered: .shipping-request-form label .date-input-with-picker's own
       flex:1 1 200px (added for the row layout) became a forced
       ~200px HEIGHT once the label above switches to flex-direction:
       column, blowing up both the input and the button (which reads its
       size off the input's own rendered height) to 200px square. */
    .shipping-request-form label .date-input-with-picker {
        flex: 0 0 auto;
        width: 100%;
    }
    .shipping-request-form .form-actions {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
}

/* Print — used to print the raw on-screen form directly (styled to look
   printable via this block). Replaced with the same generated-preview
   pattern as bol.php/packingslip.php/imo.php: the live preview panel is
   the thing that gets printed now, not the form itself, so this targets
   .shipping-request-preview instead. Same robust reset as those pages'
   print blocks — visibility:hidden preserves hidden elements' layout
   space, so every ancestor needs its own box model zeroed, and the
   preview page is taken fully out of flow via position:absolute. */
@media print {
    @page {
        margin: 0;
        size: letter;
    }

    body * {
        visibility: hidden;
    }

    .shipping-request-preview,
    .shipping-request-preview * {
        visibility: visible;
    }

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

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

    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;
    }

    .shipping-request-preview {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        margin: 0;
        padding: 0;
        border: none;
        box-shadow: none;
        width: 100%;
        height: 100%;
        transform: none;
    }

    .shipping-request-preview .preview-content {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        padding: 0.3in;
        font-size: 1rem;
        overflow: visible;
    }
}

/* Save/Load/Clear/Print row — .preview-container .button-group already
   wraps, but at the desktop .btn padding, 2-per-row still looked cramped
   on a narrow phone. Smaller buttons here so the wrapped rows look
   proportionate. This page had no other mobile media query before this. */
@media (max-width: 480px) {
    .preview-container .button-group {
        gap: 6px;
    }

    .preview-container .button-group .btn {
        padding: 8px 14px;
        font-size: 0.8rem;
        gap: 6px;
    }
}