/* Variables for main colors and dimensions */
.findmypart-container {
    --primary-color: #084e93;
    --primary-color-light: #0a6abf;
    --primary-color-dark: #063f7d;
    --secondary-color: #f4f4f4;
    --secondary-color-dark: #e0e0e0;
    --text-light: #ffffff;
    --text-dark: #000000;
    --border-radius: 8px;
    --input-height: 44px;
    --spacing-standard: 20px;
    --spacing-small: 10px;
    --font-size-standard: 18px;
    --font-size-small: 14px;
}

/* Grid layout */
.findmypart-container.grid {
    display: grid;
}

.findmypart-container.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.findmypart-container.gap-1 {
    gap: 1rem;
}

.findmypart-container.lg\:grid-cols-3 {
    @media (width >=64rem) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.findmypart-section-saved.lg\:col-span-1 {
    @media (width >=64rem) {
        grid-column: span 1 / span 1;
    }
}

.findmypart-section-search.lg\:col-span-2 {
    @media (width >=64rem) {
        grid-column: span 2 / span 2;
    }
}

/* Shared section styles */
.findmypart-section {
    padding: var(--spacing-standard);
}

.findmypart-section h3 {
    font-size: var(--font-size-standard)!important;
    margin-bottom: var(--spacing-standard);
}

/* Search section */
.findmypart-section-search {
    background-color: var(--primary-color);
    color: var(--text-light)!important;
}

.findmypart-section-search h3 {
    color: var(--text-light)!important;
}

/* Saved section */
.findmypart-section-saved {
    border: 1px solid var(--primary-color);
    color: var(--text-light);
}

.findmypart-section-saved-header {
    display: flex;
    justify-content: space-between;
}

.findmypart-section-saved h3 {
    color: var(--primary-color);
}

.findmypart-section-saved-header-action {
    font-size: var(--font-size-small);
}

.findmypart-section-saved-header-action a {
    color: var(--primary-color);
    text-decoration: none;
}

/* Form styles */
.findmypart-form-search .grid,
.findmypart-form-saved.grid {
    display: grid;
}

.findmypart-form-search .grid-cols-1,
.findmypart-form-saved.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.findmypart-form-search .gap-1,
.findmypart-form-saved.gap-1 {
    gap: var(--spacing-small);
}

.findmypart-form-search .sm\:grid-cols-2 {
    @media (width >=40rem) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.findmypart-form-search .md\:grid-cols-3 {
    @media (width >=48rem) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.findmypart-form-search-select {
    margin-bottom: var(--spacing-small);
}

/* Shared selection styles */
.findmypart-form-search .choices,
.findmypart-section-saved .choices {
    align-items: center;
    display: flex;
    height: var(--input-height);
    margin-bottom: 0 !important;
    min-height: var(--input-height);
    width: 100%;
}

.findmypart-form-search .choices {
    border: none;
}

.findmypart-section-saved .choices {
    border: 1px solid var(--secondary-color-dark);
}

/* Selection display styles */
.findmypart-form-search .choices__inner,
.findmypart-form-saved .choices__inner {
    align-items: center;
    background-color: var(--text-light);
    color: var(--text-dark);
    display: flex;
    font-size: var(--font-size-small);
    min-height: var(--input-height);
    overflow: hidden;
    padding-right: 30px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Displayed selection styles */
.findmypart-form-search .choices__list--single,
.findmypart-form-saved .choices__list--single {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

/* Dropdown menu styles */
.findmypart-form-search .choices__list--dropdown,
.findmypart-form-search .choices__list[aria-expanded],
.findmypart-form-saved .choices__list--dropdown,
.findmypart-form-saved .choices__list[aria-expanded] {
    background-color: var(--text-light);
    color: var(--text-dark);
    margin-top: 4px;
    position: absolute;
    z-index: 9999 !important;
}

/* Button styles */
.findmypart-form-search button,
.findmypart-section-saved button {
    align-items: center;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    display: flex;
    font-size: var(--font-size-small);
    font-weight: bold;
    height: var(--input-height);
    justify-content: center;
    padding: var(--spacing-small) var(--spacing-standard);
    text-transform: uppercase;
    transition: background-color 0.3s ease;
    width: 100%;
}

/* Specific button colors */
.findmypart-form-search button {
    background-color: var(--primary-color-light);
}

.findmypart-form-search button:hover {
    background-color: var(--primary-color-dark);
}

.findmypart-section-saved button {
    background-color: var(--primary-color);
}

.findmypart-section-saved button:hover {
    background-color: var(--primary-color-dark);
}

/* sweetalert2 styles */
.findmypart-toast.swal2-toast.swal2-show {
    animation-name: none !important;
    transform: none !important;
}

/* Table styles */
.findmypart-compat-table table {
    background: #fff;
    border-collapse: collapse;
    border: 1px solid var(--secondary-color-dark);
    margin-top: 1em;
    overflow: hidden;
    width: 100%;
}

.findmypart-compat-table th,
.findmypart-compat-table td {
    border: 1px solid var(--secondary-color-dark);
    padding: var(--spacing-small);
}

.findmypart-compat-table th {
    background-color: var(--primary-color);
    color: var(--text-light);
    text-align: center;
}

.findmypart-compat-table td.brand-col,
.findmypart-compat-table td.serie-col {
    text-align: center;
    vertical-align: middle;
}

.findmypart-type {
    display: inline-block;
    margin-right: 1.2em;
}

.findmypart-compat-table th:nth-child(1),
.findmypart-compat-table td:nth-child(1) {
    width: 25%;
}

.findmypart-compat-table th:nth-child(2),
.findmypart-compat-table td:nth-child(2) {
    width: 25%;
}

.findmypart-compat-table th:nth-child(3),
.findmypart-compat-table td:nth-child(3) {
    width: 50%;
}