/* Purpose: Style the WooCommerce [woocommerce_order_tracking] page to match the theme
   (Jost/Cormorant type, brand colours, form fields + gold button — same language as the
   contact/quote forms). Loaded only on the Order Tracking page. */

/* ---- Hero (navy band, reuses the site's hero language without an image) ---- */
.ot-hero { background: var(--color-primary); color: var(--color-on-navy); }
.ot-hero__inner { padding-block: var(--space-16); }
.ot-hero__crumb { font-family: var(--font-body); font-size: 13px; color: var(--color-on-navy-muted); margin-bottom: var(--space-5); }
.ot-hero__crumb a { color: var(--color-on-navy-muted); text-decoration: none; }
.ot-hero__crumb a:hover { color: var(--color-gold-light); }
.ot-hero__crumb-sep { margin: 0 8px; }
.ot-hero__crumb-current { color: var(--color-on-navy); }
.ot-hero__eyebrow {
    display: inline-flex; align-items: center; gap: var(--space-3);
    font-family: var(--font-body); font-size: 13px; font-weight: var(--weight-medium);
    text-transform: uppercase; letter-spacing: 0; color: var(--color-gold-light); margin-bottom: var(--space-3);
}
.ot-hero__eyebrow-rule { width: 32px; height: 1px; background: var(--color-gold); display: inline-block; }
.ot-hero__title { font-family: var(--font-display); font-size: clamp(2.4rem, 4vw, 3.5rem); font-weight: var(--weight-medium); line-height: 1.1; margin: 0; color: var(--color-on-navy); }
.ot-hero__sub { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--color-on-navy-muted); max-width: 560px; margin: var(--space-4) 0 0; }

/* ---- Track section: form + help panel ---- */
.ot-track { background: var(--color-bg-alt); }
.ot-track__inner {
    padding-block: var(--space-20);
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--space-10);
    align-items: start;
}

/* Track-order form — card matching the site's form styling. */
.woocommerce-form-track-order {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ---- Help panel ---- */
.ot-help { display: flex; flex-direction: column; gap: var(--space-6); }
.ot-help__title { font-family: var(--font-display); font-size: 1.75rem; font-weight: var(--weight-medium); margin: 0 0 var(--space-2); color: var(--color-text); }
.ot-help__item { display: flex; gap: var(--space-4); align-items: flex-start; }
.ot-help__icon {
    flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-gold-12); color: var(--color-gold); border-radius: var(--radius-full);
}
.ot-help__icon svg { width: 20px; height: 20px; }
.ot-help__label { font-family: var(--font-body); font-size: 15px; font-weight: var(--weight-semibold); text-transform: none; color: var(--color-primary); margin: 0 0 4px; }
.ot-help__text { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--color-text-muted); margin: 0; }
.ot-help__link { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-gold); }
.ot-help__link:hover { color: var(--color-gold); }

/* Intro copy above the fields. */
.woocommerce-form-track-order > p:first-child {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-text-muted);
    margin: 0;
}

/* Rows — WooCommerce floats these 47% + first/last; force full width, stacked. */
.page-id-14932 .woocommerce-form-track-order .form-row,
.page-id-14932 .woocommerce-form-track-order .form-row-first,
.page-id-14932 .woocommerce-form-track-order .form-row-last {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
    max-width: none;
    margin: 0;
    float: none;
    padding: 0;
    clear: both;
}

.woocommerce-form-track-order label {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: 14px;
    text-transform: uppercase;
    color: var(--color-text);
}

/* High specificity to beat WooCommerce's `.woocommerce form .form-row input.input-text`. */
.page-id-14932 .woocommerce-form-track-order .form-row input.input-text {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text);
    background: #fafaf6;
    border: 1px solid #e2e4e3;
    border-radius: 0;
    padding: 12px;
    width: 100%;
    box-shadow: none;
    transition: border-color var(--duration-base) var(--ease-out);
}
.page-id-14932 .woocommerce-form-track-order .form-row input.input-text::placeholder { color: #757575; }
.page-id-14932 .woocommerce-form-track-order .form-row input.input-text:focus,
.page-id-14932 .woocommerce-form-track-order .form-row input.input-text:focus-visible { outline: none; border-color: var(--color-gold); box-shadow: none; }

/* Track button — primary gold CTA. High specificity to beat WooCommerce's default
   .woocommerce button.button grey styling. */
.page-id-14932 .woocommerce-form-track-order button.button,
.page-id-14932 .woocommerce-form-track-order .button {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1.4;
    color: var(--color-primary);
    background-color: var(--color-gold);
    border: none;
    border-radius: 0;
    padding: 14px 12px;
    width: 100%;
    margin: 0;
    cursor: pointer;
    transition: background-color var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out);
}
.page-id-14932 .woocommerce-form-track-order button.button:hover,
.page-id-14932 .woocommerce-form-track-order button.button:focus-visible { background-color: var(--color-gold-light); color: var(--color-primary); }
.page-id-14932 .woocommerce-form-track-order button.button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.page-id-14932 .woocommerce-form-track-order button.button:active { transform: translateY(1px); }

/* WooCommerce notices (e.g. "order could not be found") — themed. */
.page-id-14932 .woocommerce-info,
.page-id-14932 .woocommerce-error,
.page-id-14932 .woocommerce-message {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    background: #fafaf6;
    border-top: 3px solid var(--color-gold);
    color: var(--color-text);
    padding: var(--space-4);
    margin: 0 0 var(--space-5);
    list-style: none;
}
.page-id-14932 .woocommerce-error { border-top-color: var(--color-error); }

/* Order result (after a successful lookup) — inherit theme type. */
.page-id-14932 .woocommerce-order-overview,
.page-id-14932 .order_details {
    font-family: var(--font-body);
    color: var(--color-text);
}
.page-id-14932 .woocommerce-order-overview strong,
.page-id-14932 .order_details strong { color: var(--color-primary); }

/* Responsive. */
@media (max-width: 900px) {
    .ot-track__inner { grid-template-columns: 1fr; gap: var(--space-8); padding-block: var(--space-12); }
    .ot-hero__inner { padding-block: var(--space-12); }
}
@media (max-width: 560px) {
    .woocommerce-form-track-order { padding: var(--space-6); }
}