/* H3X Contact Form — quote builder styles.
 *
 * Layered on top of frontend.css. Inherits the accent + neutral design
 * tokens defined on .h3xcf-form (--h3xcf-accent, --h3xcf-border,
 * --h3xcf-text, --h3xcf-radius, …) so the builder always matches the rest
 * of the form and the site's brand colour.
 *
 * Aimed at commercial customers: clean tabbed sections, product rows that
 * read like a tidy table on desktop and reflow to stacked cards on mobile,
 * thumbnails in the picker, and a calm reveal for the print/embroidery
 * requirement fields (one = full width, both = 50/50).
 */

.h3xcf-quote {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--h3xcf-border);
}

.h3xcf-quote__lead {
    margin: 0 0 1.25rem;
    color: var(--h3xcf-text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ---- Tabs ---------------------------------------------------------- */

.h3xcf-quote__tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid var(--h3xcf-border);
}

.h3xcf-quote__tab {
    position: relative;
    appearance: none;
    border: 0;
    background: none;
    margin: 0 0 -2px;
    padding: 0.7rem 1.1rem;
    font: inherit;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--h3xcf-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    border-radius: 6px 6px 0 0;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.h3xcf-quote__tab:hover {
    color: var(--h3xcf-text);
    background: color-mix(in srgb, var(--h3xcf-accent) 6%, transparent);
}

.h3xcf-quote__tab.is-active {
    color: var(--h3xcf-accent);
    border-bottom-color: var(--h3xcf-accent);
}

.h3xcf-quote__tab:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--h3xcf-accent) 25%, transparent);
}

/* ---- Panels -------------------------------------------------------- */

.h3xcf-quote__panel {
    display: none;
}

.h3xcf-quote__panel.is-active {
    display: block;
    animation: h3xcf-quote-fade 0.2s ease;
}

@keyframes h3xcf-quote-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.h3xcf-quote__rows {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

/* ---- Rows (shared card shell) ------------------------------------- */

.h3xcf-qrow {
    background: #ffffff;
    border: 1px solid var(--h3xcf-border);
    border-radius: var(--h3xcf-radius);
    box-shadow: 0 1px 2px rgba(20, 24, 33, 0.03);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.h3xcf-qrow:hover {
    border-color: var(--h3xcf-border-strong);
}

.h3xcf-qrow.is-selected {
    border-color: color-mix(in srgb, var(--h3xcf-accent) 45%, var(--h3xcf-border));
    box-shadow: 0 1px 2px rgba(20, 24, 33, 0.03),
                0 0 0 3px color-mix(in srgb, var(--h3xcf-accent) 8%, transparent);
}

/* Basic + advanced rows are both stacked blocks: the product picker sits
   on its own line so long titles can wrap, and the controls (qty +
   finishing + remove) drop neatly onto the next line. */
.h3xcf-qrow.is-basic,
.h3xcf-qrow.is-advanced {
    display: block;
    padding: 0.9rem 1rem;
}

.h3xcf-qrow__head {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.h3xcf-qrow__head .h3xcf-qsearch {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---- Product search (in-row) -------------------------------------- */

.h3xcf-qsearch {
    position: relative;
}

.h3xcf-qsearch__input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font: inherit;
    font-size: 0.92rem;
    color: var(--h3xcf-text);
    background: #ffffff;
    border: 1px solid var(--h3xcf-border-strong);
    border-radius: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.h3xcf-qsearch__input:focus {
    outline: 0;
    border-color: var(--h3xcf-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--h3xcf-accent) 18%, transparent);
}

.h3xcf-qsearch__results {
    position: absolute;
    z-index: 6;
    left: 0;
    right: 0;
    margin-top: 4px;
    max-height: 300px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid var(--h3xcf-border-strong);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(20, 24, 33, 0.14);
}

.h3xcf-qsearch__results[hidden],
.h3xcf-qsearch__selected[hidden] {
    display: none;
}

.h3xcf-qsearch__result {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-bottom: 1px solid var(--h3xcf-border);
    background: #ffffff;
    cursor: pointer;
    font: inherit;
    color: var(--h3xcf-text);
}

.h3xcf-qsearch__result:last-child {
    border-bottom: 0;
}

.h3xcf-qsearch__result:hover,
.h3xcf-qsearch__result.is-active {
    background: color-mix(in srgb, var(--h3xcf-accent) 7%, #ffffff);
}

.h3xcf-qsearch__thumb {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 6px;
    background: #f3f4f6;
    border: 1px solid var(--h3xcf-border);
}

.h3xcf-qsearch__meta {
    min-width: 0;
}

.h3xcf-qsearch__name {
    display: block;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.h3xcf-qsearch__sku {
    display: block;
    font-size: 0.8em;
    color: var(--h3xcf-text-muted);
}

.h3xcf-qsearch__empty {
    padding: 0.65rem 0.8rem;
    color: var(--h3xcf-text-muted);
    font-size: 0.9rem;
}

/* Selected product chip. Aligned to the top so a long, wrapping title
   keeps the thumbnail + "Change" link tidy rather than overflowing. */
.h3xcf-qsearch__selected {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.5rem 0.6rem;
    background: #fbfbfc;
    border: 1px solid var(--h3xcf-border);
    border-radius: 8px;
}

.h3xcf-qsearch__selected .h3xcf-qsearch__thumb {
    margin-top: 1px;
}

.h3xcf-qsearch__selected .h3xcf-qsearch__meta {
    flex: 1 1 auto;
    min-width: 0;
}

/* In the chip the title is free to wrap (the dropdown results still
   ellipsis, see above). */
.h3xcf-qsearch__selected .h3xcf-qsearch__name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
}

.h3xcf-qsearch__change {
    flex: 0 0 auto;
    margin-top: 1px;
}

.h3xcf-qsearch__change {
    flex: 0 0 auto;
    appearance: none;
    border: 0;
    background: none;
    color: var(--h3xcf-accent);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
}

.h3xcf-qsearch__change:hover {
    background: color-mix(in srgb, var(--h3xcf-accent) 8%, transparent);
}

/* ---- Variant selectors (advanced) --------------------------------- */

.h3xcf-qvariants {
    margin-top: 0.85rem;
    padding: 0.85rem;
    background: #fbfbfc;
    border: 1px solid var(--h3xcf-border);
    border-radius: 8px;
}

.h3xcf-qvariants[hidden] {
    display: none;
}

.h3xcf-qvariants__hint {
    margin: 0 0 0.6rem;
    font-size: 0.8rem;
    color: var(--h3xcf-text-muted);
}

.h3xcf-qvariants__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.h3xcf-qvariant {
    flex: 1 1 160px;
    min-width: 0;
}

.h3xcf-qvariant[hidden] {
    display: none;
}

.h3xcf-qvariant > span {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--h3xcf-text-muted);
    margin-bottom: 0.25rem;
}

.h3xcf-qvariant select {
    width: 100%;
    padding: 0.5rem 0.65rem;
    font: inherit;
    font-size: 0.9rem;
    color: var(--h3xcf-text);
    background: #ffffff;
    border: 1px solid var(--h3xcf-border-strong);
    border-radius: 7px;
}

.h3xcf-qvariant select:focus {
    outline: 0;
    border-color: var(--h3xcf-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--h3xcf-accent) 18%, transparent);
}

.h3xcf-qsizerun {
    margin-top: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    appearance: none;
    padding: 0.45rem 0.8rem;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--h3xcf-accent);
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--h3xcf-accent) 40%, var(--h3xcf-border));
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.h3xcf-qsizerun:hover {
    background: color-mix(in srgb, var(--h3xcf-accent) 8%, #ffffff);
    border-color: var(--h3xcf-accent);
}

.h3xcf-qsizerun[hidden] {
    display: none;
}

.h3xcf-qsizerun[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(1);
}

/* Tools row under the variant selects: size-run button + size-grid toggle. */
.h3xcf-qvariants__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: 0.75rem;
}

.h3xcf-qvariants__tools .h3xcf-qsizerun {
    margin-top: 0;
}

.h3xcf-qsizegrid-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--h3xcf-text);
    cursor: pointer;
    user-select: none;
}

.h3xcf-qsizegrid-toggle-label[hidden] {
    display: none;
}

.h3xcf-qsizegrid-toggle-label input {
    accent-color: var(--h3xcf-accent);
    width: 1.05em;
    height: 1.05em;
    margin: 0;
}

/* ---- Size grid ---------------------------------------------------- */

.h3xcf-qsizegrid {
    margin-top: 0.85rem;
    border: 1px solid var(--h3xcf-border);
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
    max-width: 340px;
}

.h3xcf-qsizegrid[hidden] {
    display: none;
}

.h3xcf-qsizegrid__head,
.h3xcf-qsizegrid__row {
    display: grid;
    grid-template-columns: 1fr 6rem;
    gap: 0.5rem;
    align-items: center;
    padding: 0.45rem 0.75rem;
}

.h3xcf-qsizegrid__head {
    background: #f8f9fb;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--h3xcf-text-muted);
}

.h3xcf-qsizegrid__row {
    border-top: 1px solid var(--h3xcf-border);
}

.h3xcf-qsizegrid__label {
    font-size: 0.9rem;
    font-weight: 600;
}

.h3xcf-qsizegrid__qty {
    width: 100%;
    padding: 0.4rem 0.45rem;
    font: inherit;
    font-size: 0.9rem;
    text-align: center;
    color: var(--h3xcf-text);
    border: 1px solid var(--h3xcf-border-strong);
    border-radius: 6px;
}

.h3xcf-qsizegrid__qty:focus {
    outline: 0;
    border-color: var(--h3xcf-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--h3xcf-accent) 18%, transparent);
}

/* ---- Row controls: qty + finishing -------------------------------- */

.h3xcf-qrow__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-top: 0.9rem;
}

.h3xcf-qqty {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--h3xcf-text-muted);
}

.h3xcf-qqty input {
    width: 4.75rem;
    padding: 0.5rem 0.55rem;
    font: inherit;
    font-size: 0.92rem;
    text-align: center;
    color: var(--h3xcf-text);
    border: 1px solid var(--h3xcf-border-strong);
    border-radius: 7px;
}

.h3xcf-qqty input:focus {
    outline: 0;
    border-color: var(--h3xcf-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--h3xcf-accent) 18%, transparent);
}

/* Base qty greyed out while the per-size grid is in use. */
.h3xcf-qqty.is-disabled {
    opacity: 0.45;
}

.h3xcf-qrow__qtyinput:disabled {
    background: #f3f4f6;
    cursor: not-allowed;
}

.h3xcf-qfinish {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.1rem;
}

.h3xcf-qfinish label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
}

.h3xcf-qfinish input {
    accent-color: var(--h3xcf-accent);
    width: 1.05em;
    height: 1.05em;
    margin: 0;
}

/* The remove button trails to the right of the controls line. */
.h3xcf-qrow__controls .h3xcf-qrow__remove {
    margin-left: auto;
}

/* ---- Requirement textareas (advanced) ----------------------------- */

.h3xcf-qreqs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 0.9rem;
}

.h3xcf-qreqs:not(:has(.h3xcf-qreq:not([hidden]))) {
    display: none;
    margin-top: 0;
}

.h3xcf-qreq {
    flex: 1 1 100%;
    min-width: 220px;
    animation: h3xcf-quote-fade 0.18s ease;
}

/* When both requirement fields are showing, split them 50/50. */
.h3xcf-qreqs.is-split .h3xcf-qreq {
    flex: 1 1 calc(50% - 0.5rem);
}

.h3xcf-qreq[hidden] {
    display: none;
}

.h3xcf-qreq > label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--h3xcf-text);
    margin-bottom: 0.3rem;
}

.h3xcf-qreq textarea {
    width: 100%;
    min-height: 5rem;
    padding: 0.6rem 0.7rem;
    font: inherit;
    font-size: 0.9rem;
    color: var(--h3xcf-text);
    background: #ffffff;
    border: 1px solid var(--h3xcf-border-strong);
    border-radius: 8px;
    resize: vertical;
}

.h3xcf-qreq textarea:focus {
    outline: 0;
    border-color: var(--h3xcf-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--h3xcf-accent) 18%, transparent);
}

/* ---- Remove buttons ------------------------------------------------ */

.h3xcf-qrow__remove {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    appearance: none;
    border: 1px solid var(--h3xcf-border);
    background: #ffffff;
    color: var(--h3xcf-text-muted);
    border-radius: 7px;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.h3xcf-qrow__remove:hover {
    color: #b91c1c;
    border-color: #f3c1c1;
    background: #fef2f2;
}

/* ---- Add product button ------------------------------------------- */

.h3xcf-quote__add {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.9rem;
    padding: 0.6rem 1.05rem;
    appearance: none;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--h3xcf-text);
    background: #ffffff;
    border: 1px dashed var(--h3xcf-border-strong);
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.h3xcf-quote__add:hover {
    color: var(--h3xcf-accent);
    border-color: var(--h3xcf-accent);
    background: color-mix(in srgb, var(--h3xcf-accent) 6%, #ffffff);
}

.h3xcf-quote__add span[aria-hidden="true"] {
    font-size: 1.1em;
    line-height: 0;
}

/* ---- WooCommerce-inactive notice ---------------------------------- */

.h3xcf-quote__disabled {
    padding: 0.85rem 1rem;
    background: #fff8ec;
    border: 1px solid #f5d9a8;
    color: #7a5407;
    border-radius: 8px;
    font-size: 0.92rem;
}

/* ---- Responsive --------------------------------------------------- */

@media (max-width: 640px) {
    .h3xcf-qrow__controls {
        gap: 0.75rem 1rem;
    }

    .h3xcf-qreqs.is-split .h3xcf-qreq {
        flex-basis: 100%;
    }

    .h3xcf-quote__add {
        width: 100%;
        justify-content: center;
    }
}