/*
    assets/css/forms-shop.css

    The contact form, on ozroofracks.shop's input language. Added 2026-08-20.

    .shop's form controls (.finder select, .address-suggestions, the checkout
    fields) are all the same thing: 48px tall, white, a 1px #cedae3 border,
    8px radius, --ink text, and a blue focus ring. main.css instead uses a
    borderless #f5f5f5 fill at 44px with a 10px radius -- a different idiom
    entirely, and the last obviously non-.shop surface left on the homepage.

    SCOPED TO #contact ON PURPOSE. Form controls appear in the cart, the
    customer panel, the admin panel and the product grid's quantity boxes. A
    global `input, select, textarea` rule would reach all of them at once,
    including a live checkout, which is not a change to make blind in the same
    pass as a homepage restyle. The cart deserves its own pass with its own
    verification.

    Two places it must NOT reach, and does not:
      - #customerPanel / #cartPanel. Scoping alone keeps them out.
      - admin/, which loads its own Bootstrap 5.3.3 and never loads this file.
*/

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact input[type="number"],
#contact select,
#contact textarea {
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid #cedae3;
    border-radius: 8px;
    background: var(--white);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 15px;
}

#contact textarea {
    min-height: 140px;
    padding: 14px;
    line-height: 1.6;
}

#contact input:focus,
#contact select:focus,
#contact textarea:focus {
    border-color: var(--blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(8, 119, 201, .14);
}

#contact ::placeholder {
    color: var(--muted);
    opacity: 1;
}

/* .shop's label: small, uppercase, wide-tracked -- an accent, not a heading */
#contact label {
    display: block;
    margin: 0 0 7px;
    color: var(--muted);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

/* .shop's .button-primary */
#contact button,
#contact input[type="submit"],
#contact .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    padding: 0 24px;
    border: 0;
    border-radius: 8px;
    background-color: var(--blue);
    color: var(--white);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 800;
    text-transform: none;
    transition: background-color .2s ease, transform .2s ease;
}

#contact button:hover,
#contact input[type="submit"]:hover,
#contact .button:hover {
    background-color: #1591e6;
    transform: translateY(-1px);
}

/* ==================================================================
   The VPA upload panel
   ================================================================== */

/*
uploads/upload-form.php renders a slide-over on every page (from
template/footer.php) and it was the last panel still on the old paint: a
plain white sheet, a red circle-X in the corner, square inputs and a green
dropzone.

It is the same KIND of thing as the Fitment Assistant drawer -- a task panel
that slides in from the right -- so it gets the same treatment: ink head,
token fields, a blue dropzone that responds. Deliberately matched to that
drawer rather than invented, because Ozzy's "Bye Ozzy, instead I will upload
a photo" hands straight over to this panel and the handoff should not look
like a change of site.

NOT TOUCHED: #customerPanel and #cartPanel keep their current look, as
instructed. Nothing here can reach them -- every rule is under #uploadPanel
or #uploadPanelOverlay.
*/

#uploadPanelOverlay {
    background: rgba(11, 27, 42, .55);
}

/*
PREFIXED WITH body ON PURPOSE. upload-form.php carries its own <style> and
renders from the footer, so its rules come LATER in the document than this
file. At equal specificity the later one wins, and a bare #uploadPanel here
lost every property that block also sets -- width, padding, box-shadow. One
element selector in front outranks it without resorting to !important.

The dropzone rules below need no such help: they are #uploadPanel #dropzone,
two ids against that block's one.
*/
body #uploadPanel {
    width: 430px;
    padding: 0;
    color: var(--ink);
    box-shadow: -18px 0 48px rgba(11, 27, 42, .22);
}

/*
THE HEADING BECOMES A BAR. It was an <h2> floating in the panel's top
padding with the close button overlapping it. Now it is the drawer head the
assistant uses, and the panel's own padding moved onto the content below so
the bar can run edge to edge.
*/
#uploadPanel #photo-content {
    padding: 0 20px 28px;
}

#uploadPanel #photo-content > h2 {
    margin: 0 -20px 20px;
    padding: 20px 58px 18px 20px;
    background: var(--ink);
    border-bottom: 2px solid var(--blue);
    color: var(--white);
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.02em;
    text-transform: none;
}

body #uploadPanel .upload-panel-close {
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--white);
    font-size: 15px;
    transition: background-color .18s ease;
}

body #uploadPanel .upload-panel-close:hover {
    background: rgba(255, 255, 255, .22);
    color: var(--white);
}

/* ------------------------------------------------------------- fields */

#uploadPanel #photo-content label {
    margin-top: 16px;
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
}

#uploadPanel #photo-content > form > small,
#uploadPanel #photo-content small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.5;
}

#uploadPanel input[type="text"],
#uploadPanel input[type="tel"],
#uploadPanel input[type="search"],
#uploadPanel select {
    min-height: 44px;
    padding: 0 13px;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 14px;
}

#uploadPanel input[type="text"]:focus,
#uploadPanel input[type="tel"]:focus,
#uploadPanel input[type="search"]:focus,
#uploadPanel select:focus {
    outline: 3px solid var(--focus);
    outline-offset: 1px;
    border-color: var(--blue);
}

#uploadPanel #photo-content .phone-row select {
    max-width: 42%;
}

/* --------------------------------------------------------- the dropzone */

/*
Green on hover was the odd one out -- nothing else on the restyled site uses
it for "active". Blue, and a dashed token hairline at rest.
*/
#uploadPanel #dropzone {
    margin-top: 12px;
    padding: 30px 20px;
    border: 2px dashed var(--line);
    border-radius: 14px;
    background: var(--surface);
}

#uploadPanel #dropzone:hover {
    border-color: var(--blue);
    background: var(--sky);
}

#uploadPanel #dropzone.dragover {
    border-color: var(--blue);
    background: var(--sky);
}

#uploadPanel .dropzone-icon {
    font-size: 26px;
    line-height: 1;
}

#uploadPanel .dropzone-text {
    color: var(--muted);
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.6;
}

#uploadPanel #dropzone:hover .dropzone-text {
    color: var(--ink);
}

#uploadPanel #dropzone.dragover .dropzone-icon {
    color: var(--blue);
}

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

#uploadPanel button[type="submit"],
#uploadPanel #photo-content .button {
    min-height: 46px;
    padding: 0 20px;
    border: 0;
    border-radius: 8px;
    background: var(--blue);
    color: var(--white);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 800;
    text-transform: none;
    transition: background-color .18s ease;
}

#uploadPanel button[type="submit"]:hover,
#uploadPanel #photo-content .button:hover {
    background: #1591e6;
    color: var(--white);
}

#uploadPanel #loading {
    margin-top: 12px;
    color: var(--muted);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
}

#uploadPanel #preview img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--line);
}

@media screen and (max-width: 480px) {
    #uploadPanel {
        width: 100vw;
        max-width: 100vw;
    }
}

/* ==================================================================
   Customer panel: what we already know
   ================================================================== */

/*
The address and vehicle on file, under the login form. They were two <h3>s
the same size as "Customer Login" over one line of value each, presented
three different ways -- globe emoji and bold on one, a plain link on the
other, and a red circle-X that wrapped to its own line on the first and sat
inline on the second.

One card, a labelled row each, clear control in the same place on both.

The login form and the panel chrome around this are deliberately untouched.
*/
.customer-context {
    margin-top: 22px;
    padding: 4px 0 0;
    border-top: 1px solid var(--line);
}

.customer-context-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 2px 10px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.customer-context-row:last-child {
    border-bottom: 0;
}

.customer-context-label {
    grid-column: 1 / -1;
    font-family: var(--font-display);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.customer-context-value {
    min-width: 0;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.customer-context-value.is-empty {
    color: var(--muted);
    font-weight: 400;
    font-size: 13px;
}

.customer-context-value a {
    color: var(--ink);
    text-decoration: none;
}

.customer-context-value a:hover {
    color: var(--blue);
    text-decoration: underline;
}

/*
The clear control keeps its red -- it discards something -- but it is a
quiet 13px glyph aligned with the value rather than a loud circle floating
on its own line.
*/
.customer-context-clear {
    align-self: center;
    color: #c0392b;
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
}

.customer-context-clear:hover {
    color: #8f2519;
}