/* QuickTieCableSelector styles. These used to be an inline <style> block inside the
   component, re-sent with every instance on every page. Linked once in each
   app's head (Portal, Nebula, MainWebsite), last, so they keep the precedence
   the inline block had over the app's other stylesheets. */

.qtc-root {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.25rem;
}

/* ---------- Selection panels ---------- */
.qtc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .qtc-grid { grid-template-columns: 1fr 1fr; }
}

.qtc-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--quicktie-emphasis-bg, #fff);
    border: 1px solid var(--quicktie-border-color, #dee2e6);
    border-radius: 0.9rem;
}

.qtc-label {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--quicktie-secondary-color, #6c757d);
}

.qtc-figure {
    display: grid;
    place-items: center;
    min-height: 170px;
    padding: 0.5rem;
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--quicktie-body-color, #000) 3%, transparent);
}

.qtc-figure img {
    max-height: 220px;
    max-width: 100%;
    object-fit: contain;
}

.qtc-figure-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--quicktie-secondary-color, #6c757d);
    font-size: 0.8rem;
    font-weight: 600;
}

.qtc-figure-placeholder i { font-size: 1.8rem; opacity: 0.6; }

.qtc-fade-in { animation: qtcFadeIn 220ms ease-out; }

@keyframes qtcFadeIn {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

/* ---------- Option chips ---------- */
.qtc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: auto;
}

.qtc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--quicktie-border-color, #dee2e6);
    border-radius: 999px;
    background: var(--quicktie-body-bg, #fff);
    color: var(--quicktie-body-color, #212529);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
    white-space: nowrap;
}

.qtc-chip:hover {
    border-color: color-mix(in srgb, var(--qt-accent, #14b8a6) 45%, transparent);
    color: var(--qt-accent-strong, #0d9488);
}

.qtc-chip.active {
    background: color-mix(in srgb, var(--qt-accent, #14b8a6) 12%, transparent);
    border-color: var(--qt-accent, #14b8a6);
    color: var(--qt-accent-strong, #0d9488);
    font-weight: 700;
}

/* Color chips carry their cable color instead of the accent */
.qtc-chip .swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--chip-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--chip-color) 25%, transparent);
    flex: none;
}

.qtc-chip-color:hover {
    border-color: color-mix(in srgb, var(--chip-color) 55%, transparent);
    color: var(--chip-color);
}

.qtc-chip-color.active {
    background: color-mix(in srgb, var(--chip-color) 12%, transparent);
    border-color: var(--chip-color);
    color: var(--chip-color);
}

/* ---------- Measurement ---------- */
.qtc-hint {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.83rem;
    color: var(--quicktie-secondary-color, #6c757d);
    text-align: center;
}

.qtc-hint i { color: var(--qt-accent, #14b8a6); }

.qtc-dims {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.qtc-dim {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.qtc-dim label {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--quicktie-secondary-color, #6c757d);
    margin: 0;
}

.qtc-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--quicktie-border-color, #dee2e6);
    border-radius: 999px;
    background: var(--quicktie-body-bg, #fff);
    overflow: hidden;
}

.qtc-step {
    width: 2.4rem;
    height: 2.4rem;
    border: 0;
    background: transparent;
    color: var(--quicktie-secondary-color, #6c757d);
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.qtc-step:hover:not(:disabled) {
    background: color-mix(in srgb, var(--qt-accent, #14b8a6) 10%, transparent);
    color: var(--qt-accent-strong, #0d9488);
}

.qtc-step:disabled { opacity: 0.35; cursor: not-allowed; }

.qtc-stepper input {
    width: 4.25rem;
    border: 0;
    outline: 0;
    background: transparent;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--quicktie-emphasis-color, #212529);
    font-variant-numeric: tabular-nums;
}

.qtc-root input[type="number"]::-webkit-inner-spin-button,
.qtc-root input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qtc-root input[type="number"] { -moz-appearance: textfield; }

/* ---------- SKU result ---------- */
.qtc-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.15rem;
    border: 1px solid color-mix(in srgb, var(--sku-color, #0d9488) 35%, var(--quicktie-border-color, #dee2e6));
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--sku-color, #0d9488) 6%, var(--quicktie-emphasis-bg, #fff));
}

.qtc-result-label {
    display: block;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--quicktie-secondary-color, #6c757d);
    margin-bottom: 0.15rem;
}

.qtc-result-sku {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--sku-color, #0d9488);
    font-variant-numeric: tabular-nums;
}

.qtc-result-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
}

.qtc-result-oal {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--quicktie-emphasis-color, #212529);
    font-variant-numeric: tabular-nums;
}

.qtc-result-sku.empty {
    color: var(--quicktie-secondary-color, #6c757d);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: normal;
}

.qtc-result-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--sku-color, #0d9488);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--sku-color, #0d9488) 20%, transparent);
    flex: none;
}

.qtc-flash { animation: qtcSkuPulse 0.45s ease-out; }

@keyframes qtcSkuPulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sku-color, #0d9488) 80%, transparent); }
    40% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--sku-color, #0d9488) 15%, transparent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}