/*
 * Hitch Mate Fitment Finder — Snow Mate dark theme
 * Scoped to .hmm-finder so it will not alter the surrounding WordPress theme.
 */
.hmm-finder {
    --hmm-accent: #ff641f;
    --hmm-accent-alt: #ff871e;
    --hmm-accent-hover: #ff7a32;
    --hmm-accent-soft: rgba(255, 100, 31, .14);
    --hmm-border: rgba(255, 100, 31, .48);
    --hmm-border-soft: rgba(255, 255, 255, .13);
    --hmm-text: #ffffff;
    --hmm-text-soft: #d8d8d8;
    --hmm-muted: #a9a9a9;
    --hmm-bg: #050505;
    --hmm-surface: #0d0d0d;
    --hmm-surface-alt: #151515;

    position: relative;
    isolation: isolate;
    width: 100%;
    padding: clamp(22px, 3.2vw, 38px);
    overflow: hidden;
    border: 1px solid var(--hmm-border);
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% -12%, rgba(255, 102, 24, .20), transparent 48%),
        linear-gradient(145deg, #090909 0%, var(--hmm-bg) 55%, #000000 100%);
    color: var(--hmm-text);
    box-shadow:
        0 24px 70px rgba(0, 0, 0, .48),
        inset 0 1px 0 rgba(255, 255, 255, .035);
    box-sizing: border-box;
}

.hmm-finder::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, rgba(255, 255, 255, .035), transparent 32%);
}

.hmm-finder *,
.hmm-finder *::before,
.hmm-finder *::after {
    box-sizing: border-box;
}

.hmm-finder .is-hidden {
    display: none !important;
}

.hmm-title {
    margin: 0 0 24px;
    color: var(--hmm-text);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.025em;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
}

.hmm-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin-top: 13px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--hmm-accent), var(--hmm-accent-alt));
    box-shadow: 0 0 18px rgba(255, 100, 31, .38);
}

.hmm-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: end;
}

.hmm-field {
    min-width: 0;
}

.hmm-field label {
    display: block;
    margin: 0 0 8px;
    color: var(--hmm-text-soft);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.hmm-select {
    width: 100%;
    min-height: 45px;
    padding: 0 17px 0 10px;
    border: 1px solid var(--hmm-border-soft);
    border-radius: 11px;
    outline: 0;
    background-color: var(--hmm-surface-alt);
    color: var(--hmm-text);
    color-scheme: dark;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .035),
        0 8px 22px rgba(0, 0, 0, .20);
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease,
        transform .2s ease;
}

.hmm-select:hover:not(:disabled) {
    border-color: rgba(255, 100, 31, .65);
    background-color: #191919;
}

.hmm-select:focus {
    border-color: var(--hmm-accent);
    background-color: #181818;
    box-shadow:
        0 0 0 3px rgba(255, 100, 31, .18),
        0 10px 28px rgba(0, 0, 0, .32);
}

.hmm-select option {
    background: #111111;
    color: #ffffff;
}

.hmm-select:disabled {
    opacity: .48;
    cursor: not-allowed;
}

.hmm-results {
    display: grid;
    gap: 13px;
    margin-top: 24px;
}

.hmm-result-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(132px, auto);
    align-items: center;
    gap: 16px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid var(--hmm-border-soft);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255, 100, 31, .075), transparent 42%),
        var(--hmm-surface);
    color: var(--hmm-text);
    box-shadow:
        0 14px 34px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .025);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.hmm-result-card.has-product-image {
    grid-template-columns: 88px minmax(0, 1fr) minmax(132px, auto);
}

.hmm-result-card:hover {
    border-color: rgba(255, 100, 31, .55);
    transform: translateY(-2px);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, .38),
        0 0 0 1px rgba(255, 100, 31, .05);
}

.hmm-result-media {
    width: 88px;
    height: 88px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .025);
}

.hmm-result-image-link,
.hmm-result-image {
    display: block;
    width: 100%;
    height: 100%;
}

.hmm-result-image {
    object-fit: contain;
    padding: 5px;
    transition: transform .22s ease;
}

.hmm-result-card:hover .hmm-result-image {
    transform: scale(1.035);
}

.hmm-result-content {
    min-width: 0;
}

.hmm-result-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 15px;
}

.hmm-result-position {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 100, 31, .38);
    border-radius: 999px;
    background: var(--hmm-accent-soft);
    color: #ff9b68;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hmm-result-part {
    min-width: 0;
    color: var(--hmm-text-soft);
    font-size: 15px;
    overflow-wrap: anywhere;
}

.hmm-result-part strong {
    color: var(--hmm-text);
    font-weight: 800;
}

.hmm-result-notes {
    margin-top: 10px;
    color: var(--hmm-muted);
    font-size: 14px;
    line-height: 1.55;
}

.hmm-result-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    min-width: 132px;
}

.hmm-result-button,
.hmm-cart-button,
.hmm-finder .added_to_cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 43px;
    margin: 0;
    padding: 10px 17px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.hmm-result-button {
    border: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(135deg, var(--hmm-accent), var(--hmm-accent-alt));
    color: #ffffff !important;
    box-shadow: 0 10px 26px rgba(255, 100, 31, .22);
}

.hmm-cart-button {
    border: 1px solid rgba(255, 100, 31, .72);
    background: transparent;
    color: #ff955f !important;
    box-shadow: inset 0 0 0 1px rgba(255, 100, 31, .04);
}

.hmm-result-button:hover,
.hmm-result-button:focus {
    color: #ffffff !important;
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(255, 100, 31, .32);
}

.hmm-cart-button:hover,
.hmm-cart-button:focus {
    background: rgba(255, 100, 31, .13);
    color: #ffffff !important;
    transform: translateY(-2px);
}

.hmm-cart-button.loading {
    opacity: .72;
    pointer-events: none;
}

.hmm-cart-button.added {
    border-color: #78bf6b;
    color: #a6e49b !important;
}

.hmm-finder .added_to_cart {
    min-height: auto;
    padding: 4px 2px;
    color: #ffffff !important;
    font-size: 12px;
    text-decoration: underline !important;
}

.hmm-result-button:focus-visible,
.hmm-cart-button:focus-visible,
.hmm-result-image-link:focus-visible,
.hmm-reset:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

.hmm-link-missing {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid rgba(255, 135, 30, .32);
    border-radius: 9px;
    background: rgba(255, 135, 30, .09);
    color: #ffb37a;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

.hmm-no-result {
    padding: 17px;
    border: 1px solid rgba(255, 100, 31, .32);
    border-radius: 12px;
    background: rgba(255, 100, 31, .09);
    color: #ffd2b8;
}

.hmm-reset {
    margin-top: 16px;
    padding: 2px 0;
    border: 0;
    background: transparent !important;
    color: #ff8f56 !important;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    transition: color .18s ease, transform .18s ease;
}

.hmm-reset::before {
    content: "↺";
    display: inline-block;
    margin-right: 7px;
    transition: transform .25s ease;
}

.hmm-reset:hover {
    color: #ffffff !important;
}

.hmm-reset:hover::before {
    transform: rotate(-45deg);
}

.hmm-admin-message {
    padding: 13px 16px;
    border: 1px solid rgba(255, 100, 31, .35);
    border-left: 4px solid var(--hmm-accent);
    border-radius: 10px;
    background: #12100f;
    color: #ffe0cf;
}

/* Prevent common theme/Elementor rules from turning finder text dark. */
.hmm-finder p,
.hmm-finder span,
.hmm-finder div,
.hmm-finder label,
.hmm-finder strong {
    border-color: inherit;
}
.instrucrion_link{
    font-family: "Hanken Grotesk", Sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 14px !important;
    color: #FFFFFF;
    display: block;
    width: fit-content;
    margin-top: 20px;
}
.instrucrion_link:hover{
    color: #ff871e;
}
@media (max-width: 760px) {
    .hmm-finder {
        padding: 22px 18px;
        border-radius: 16px;
    }

    .hmm-fields {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .hmm-result-card,
    .hmm-result-card.has-product-image {
        grid-template-columns: 74px minmax(0, 1fr);
        align-items: start;
        gap: 13px;
        padding: 15px;
    }

    .hmm-result-card:not(.has-product-image) {
        grid-template-columns: 1fr;
    }

    .hmm-result-media {
        width: 74px;
        height: 74px;
    }

    .hmm-result-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        min-width: 0;
    }

    .hmm-result-actions > :only-child {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hmm-select,
    .hmm-result-card,
    .hmm-result-button,
    .hmm-cart-button,
    .hmm-result-image,
    .hmm-reset,
    .hmm-reset::before {
        transition: none;
    }
}