/**
 * Inter-Sprint Tire Search Panel
 *
 * Built to render identically inside Elementor / page-builder containers
 * where the theme or Elementor's form widget styles aggressively cascade
 * into <select>/<button>. Specificity is intentionally raised with the
 * .isp-tsp-scope wrapper-mimicking chain and !important on the visual
 * properties that themes most often hijack (height, padding, background,
 * border-radius, box-shadow, font-family).
 *
 * Color palette matches the home-page mockup:
 *   blue    #0099d9   panel background
 *   white   #ffffff   selects
 *   orange  #f7941d   submit button
 *   text    #222      select foreground
 *   label   #ffffff   labels above middle selects
 */

.isp-tsp-scope {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

form.isp-tsp,
form.isp-tsp * {
    box-sizing: border-box !important;
}

form.isp-tsp {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 18px !important;
    background: #06457b !important;
    padding: 18px 20px !important;
    border-radius: 4px !important;
    font-family: inherit !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
}

form.isp-tsp .isp-tsp__left {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 170px !important;
    flex: 0 0 170px !important;
}

form.isp-tsp .isp-tsp__grid {
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(130px, 1fr)) !important;
    grid-template-rows: auto auto !important;
    gap: 6px 16px !important;
    align-content: center !important;
}

form.isp-tsp .isp-tsp__field {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

form.isp-tsp .isp-tsp__field label,
form.isp-tsp label {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin: 0 0 4px 2px !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    background: transparent !important;
    display: block !important;
}

form.isp-tsp select.isp-tsp__select,
form.isp-tsp .isp-tsp__select {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    background-color: #ffffff !important;
    color: #222222 !important;
    border: 1px solid #cfd8dc !important;
    border-radius: 3px !important;
    padding: 0 30px 0 10px !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-family: inherit !important;
    font-weight: 400 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23333' d='M0 0l5 6 5-6z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 10px 6px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: border-color .15s ease !important;
}

form.isp-tsp select.isp-tsp__select:hover {
    border-color: #90a4ae !important;
}

form.isp-tsp select.isp-tsp__select:focus {
    outline: none !important;
    border-color: #f7941d !important;
    box-shadow: 0 0 0 2px rgba(247, 148, 29, .25) !important;
}

form.isp-tsp button.isp-tsp__submit,
form.isp-tsp .isp-tsp__submit {
    flex: 0 0 auto !important;
    width: 96px !important;
    min-width: 96px !important;
    align-self: stretch !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: #f7941d !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 3px !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    transition: background .15s ease !important;
}

form.isp-tsp button.isp-tsp__submit:hover,
form.isp-tsp button.isp-tsp__submit:focus {
    background: #e08410 !important;
    color: #ffffff !important;
    outline: none !important;
}

form.isp-tsp .isp-tsp__submit-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
}

form.isp-tsp .isp-tsp__submit-icon svg {
    width: 28px !important;
    height: 28px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
}

form.isp-tsp .isp-tsp__submit-label {
    display: block !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

/* Tablet */
@media (max-width: 900px) {
    form.isp-tsp .isp-tsp__left {
        width: 100% !important;
        flex: 0 0 100% !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    form.isp-tsp .isp-tsp__left select.isp-tsp__select {
        flex: 1 1 calc(33.333% - 6px) !important;
        min-width: 140px !important;
    }
    form.isp-tsp .isp-tsp__grid {
        grid-template-columns: repeat(3, 1fr) !important;
        width: 100% !important;
    }
    form.isp-tsp button.isp-tsp__submit {
        width: 100% !important;
        min-height: 56px !important;
        flex-direction: row !important;
        gap: 10px !important;
    }
    form.isp-tsp .isp-tsp__submit-icon svg {
        width: 22px !important;
        height: 22px !important;
    }
}

/* Mobile */
@media (max-width: 560px) {
    form.isp-tsp {
        padding: 14px !important;
        gap: 12px !important;
    }
    form.isp-tsp .isp-tsp__left select.isp-tsp__select {
        flex: 1 1 100% !important;
    }
    form.isp-tsp .isp-tsp__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px 10px !important;
    }
}