/* Track Order — /track-order/
   -------------------------------------------------------------------------
   `[woocommerce_order_tracking]`, the target of the order emails' "View my
   order" button (inc/order-email.php). Loaded only on that page.

   Inputs, labels and the submit button already come from OceanWP and the
   Customizer, exactly as on the My Account login form, so they are left
   alone. This only gives the form the login form's card and puts the two
   fields on one row: Woo floats .form-row-first / -last at 47% and clears
   with a <div class="clear">; a grid replaces the floats.

   OceanWP's woo stylesheet is enqueued after this file, so every selector
   here is one class deeper than the rule it replaces.

   Sizes are in px: the site's root font size is 10px. */

.woocommerce form.woocommerce-form-track-order {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 20px;
    max-width: 720px;
    margin: 0 0 40px;
    border: 2px solid var(--color-border);
    padding: 20px;
}

.woocommerce form.woocommerce-form-track-order > p,
.woocommerce form.woocommerce-form-track-order > .clear {
    grid-column: 1 / -1;
}

.woocommerce form.woocommerce-form-track-order > p:first-child {
    margin: 0 0 20px;
    color: var(--color-text-body);
}

.woocommerce form.woocommerce-form-track-order .form-row {
    float: none;
    width: auto;
    margin: 0 0 16px;
    padding: 0;
}

.woocommerce form.woocommerce-form-track-order .form-row-first {
    grid-column: 1;
}

.woocommerce form.woocommerce-form-track-order .form-row-last {
    grid-column: 2;
}

.woocommerce form.woocommerce-form-track-order > .clear {
    display: none;
}

.woocommerce form.woocommerce-form-track-order .form-row:last-of-type {
    margin: 4px 0 0;
}

/* The result: "Order #N was placed on … and is currently …". Woo wraps each
   fact in <mark>; the browser's highlighter yellow is not a palette colour. */
.woocommerce .order-info mark {
    background: none;
    color: var(--color-text-dark);
    font-weight: 700;
}

@media (max-width: 768px) {
    .woocommerce form.woocommerce-form-track-order {
        grid-template-columns: minmax(0, 1fr);
    }

    .woocommerce form.woocommerce-form-track-order .form-row-first,
    .woocommerce form.woocommerce-form-track-order .form-row-last {
        grid-column: 1;
    }
}