/* Würth Corporate Design CSS - Namespaced to .wuerth-wiper-widget to avoid website conflicts */
.wuerth-wiper-widget {
    --w-primary: #cc0000;          /* Würth Red */
    --w-primary-hover: #e30613;
    --w-text-main: #1d1d1f;        /* Near black for readability */
    --w-text-muted: #6e6e73;       /* Muted gray */
    --w-bg-main: #ffffff;
    --w-bg-light: #f5f5f7;         /* Light gray */
    --w-card-border: #d2d2d7;      /* Solid thin border color */
    --w-success: #00875a;          /* Green for affirmative status */
    --w-font-wuerth: 'Wuerth Global', 'Wuerth', Arial, sans-serif;
    --w-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    font-family: var(--w-font-wuerth);
    /* Inherit the host page's body font size so the widget text matches the
       surrounding page content. Floored at 16px so it never renders tiny even
       if the host shrinks its root font size (the CMS uses a small root, which
       is why rem-based sizing looked small). */
    font-size: max(1em, 16px);
    color: var(--w-text-main);
    background-color: var(--w-bg-main);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;

    max-width: 1200px;
    margin: 1.5rem auto;
    padding: 2rem;
    border-radius: 8px;
    box-sizing: border-box;
}

.wuerth-wiper-widget *,
.wuerth-wiper-widget *::before,
.wuerth-wiper-widget *::after {
    box-sizing: inherit;
}

/* Header Section */
.wuerth-wiper-widget .list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    border-bottom: 3px solid var(--w-primary);
    padding-bottom: 0.75rem;
}

.wuerth-wiper-widget .section-title {
    font-size: 1.75em;
    font-weight: 800;
    color: var(--w-text-main);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: -0.2px;
}

/* Info Subtitle */
.wuerth-wiper-widget .widget-subtitle {
    font-size: 0.95em;
    color: var(--w-text-muted);
    margin-top: -1.5rem;
    margin-bottom: 2rem;
}

/* Filter Controls Layout */
.wuerth-wiper-widget .filter-section {
    margin-bottom: 2.5rem;
    background: var(--w-bg-light);
    padding: 1.75rem;
    border-radius: 6px;
    border: 1px solid var(--w-card-border);
}

.wuerth-wiper-widget .filter-row {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.wuerth-wiper-widget .filter-group {
    flex: 1;
    min-width: 240px;
    display: flex;
    flex-direction: column;
}

.wuerth-wiper-widget .filter-group label {
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    font-size: 0.95em;
    color: var(--w-text-main);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.wuerth-wiper-widget .filter-group select {
    padding: 0.75rem 1rem;
    border: 1px solid var(--w-card-border);
    border-radius: 4px;
    font-family: var(--w-font-wuerth);
    font-size: 0.95em;
    background: #ffffff;
    color: var(--w-text-main);
    transition: var(--w-transition);
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
}

.wuerth-wiper-widget .filter-group select:focus {
    border-color: var(--w-primary);
    box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.15);
}

.wuerth-wiper-widget .filter-group select:disabled {
    background-color: #e5e5ea;
    border-color: #d2d2d7;
    color: #8e8e93;
    cursor: not-allowed;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Extra Filter Toggles */
.wuerth-wiper-widget .toggle-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.9em;
    color: var(--w-text-main);
}

.wuerth-wiper-widget .toggle-row input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--w-primary);
    cursor: pointer;
}

.wuerth-wiper-widget .toggle-row label {
    cursor: pointer;
    font-weight: 500;
}

/* Main Action Button */
.wuerth-wiper-widget .btn-primary {
    background-color: var(--w-primary);
    color: #ffffff;
    border: none;
    padding: 0.85rem 2rem;
    font-family: var(--w-font-wuerth);
    font-size: 0.95em;
    font-weight: 700;
    cursor: pointer;
    transition: var(--w-transition);
    border-radius: 4px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(204, 0, 0, 0.15);
}

.wuerth-wiper-widget .btn-primary:hover:not(:disabled) {
    background-color: var(--w-primary-hover);
    box-shadow: 0 4px 12px rgba(204, 0, 0, 0.3);
    transform: translateY(-1px);
}

.wuerth-wiper-widget .btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

.wuerth-wiper-widget .btn-primary:disabled {
    background-color: #d2d2d7;
    color: #8e8e93;
    box-shadow: none;
    cursor: not-allowed;
}

/* Results Layout */
.wuerth-wiper-widget .results-section {
    margin-top: 2rem;
    animation: wuerthFadeIn 0.35s ease forwards;
}

/* Vehicle Spec Bar */
.wuerth-wiper-widget .spec-bar {
    background: var(--w-bg-light);
    border: 1px solid var(--w-card-border);
    border-radius: 6px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: center;
}

.wuerth-wiper-widget .spec-bar .spec-label {
    font-size: 0.8em;
    font-weight: 700;
    color: var(--w-text-muted);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.wuerth-wiper-widget .spec-bar .spec-label i {
    color: var(--w-primary);
    margin-right: 0.3rem;
}

.wuerth-wiper-widget .spec-bar .spec-value {
    font-size: 1.1em;
    font-weight: 700;
}

.wuerth-wiper-widget .spec-bar .spec-value.highlight {
    color: var(--w-primary);
    font-weight: 800;
    font-size: 1.15em;
}

.wuerth-wiper-widget .recommendations-container {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.wuerth-wiper-widget .recommendations-container .result-group {
    flex: 1 1 340px;
}

/* Group sections for Front / Rear Wipers */
.wuerth-wiper-widget .result-group {
    margin-bottom: 2.5rem;
}

.wuerth-wiper-widget .result-group h3 {
    font-size: 1.25em;
    color: var(--w-text-main);
    margin-top: 0;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid var(--w-card-border);
    padding-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wuerth-wiper-widget .result-group h3 i {
    color: var(--w-primary);
}

/* Grid Layout */
.wuerth-wiper-widget .workshop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

/* Product Cards */
.wuerth-wiper-widget .workshop-card {
    background: #ffffff;
    border: 1px solid var(--w-card-border);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--w-transition);
    position: relative;
}

.wuerth-wiper-widget .workshop-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
    border-color: #8e8e93;
}

.wuerth-wiper-widget .workshop-image-wrapper {
    background: #ffffff;
    padding: 1.5rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220px;
    border-bottom: 1px solid var(--w-bg-light);
    position: relative;
}

.wuerth-wiper-widget .workshop-img {
    max-height: 90%;
    max-width: 90%;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.wuerth-wiper-widget .workshop-card:hover .workshop-img {
    transform: scale(1.04);
}

/* Status Badge / Size Tag */
.wuerth-wiper-widget .status-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--w-text-main);
    color: #ffffff;
    padding: 0.3rem 0.65rem;
    font-size: 0.75em;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Content Panel inside Cards */
.wuerth-wiper-widget .workshop-content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.wuerth-wiper-widget .workshop-name {
    font-size: 1em;
    font-weight: 700;
    color: var(--w-text-main);
    margin-top: 0;
    margin-bottom: 0.75rem;
    line-height: 1.4;
    min-height: 2.8em;
}

.wuerth-wiper-widget .workshop-details {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem 0;
    color: var(--w-text-muted);
    font-size: 0.85em;
}

.wuerth-wiper-widget .workshop-details li {
    margin-bottom: 0.4rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.wuerth-wiper-widget .workshop-details i {
    color: var(--w-primary);
    width: 16px;
    text-align: center;
    margin-top: 0.15rem;
}

.wuerth-wiper-widget .workshop-details strong {
    color: var(--w-text-main);
}

/* Fallback/Mockup Graphic for missing Images */
.wuerth-wiper-widget .wiper-placeholder-graphic {
    width: 120px;
    height: 120px;
    background: var(--w-bg-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c7c7cc;
    transition: var(--w-transition);
}

.wuerth-wiper-widget .workshop-card:hover .wiper-placeholder-graphic {
    color: var(--w-primary);
    background: rgba(204, 0, 0, 0.05);
    transform: scale(1.05);
}

/* Empty/Initial State */
.wuerth-wiper-widget .empty-state {
    text-align: center;
    color: var(--w-text-muted);
    padding: 4rem 2rem;
    background: var(--w-bg-light);
    border: 1px dashed var(--w-card-border);
    border-radius: 6px;
}

.wuerth-wiper-widget .empty-state i {
    color: #d2d2d7;
    margin-bottom: 1rem;
}

.wuerth-wiper-widget .empty-state h2 {
    font-size: 1.35em;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--w-text-main);
}

.wuerth-wiper-widget .empty-state p {
    margin: 0;
    font-size: 0.95em;
}

/* Alerts */
.wuerth-wiper-widget .alert-error {
    color: var(--w-primary);
    font-weight: 600;
    padding: 1rem 1.25rem;
    background: #ffebeb;
    border: 1px solid rgba(204, 0, 0, 0.2);
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9em;
}

/* Animations */
@keyframes wuerthFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Tweaks */
@media (max-width: 768px) {
    .wuerth-wiper-widget {
        padding: 1.25rem;
        margin: 0.5rem;
    }

    .wuerth-wiper-widget .filter-section {
        padding: 1.25rem;
    }

    .wuerth-wiper-widget .filter-group {
        min-width: 100%;
    }

    .wuerth-wiper-widget .workshop-grid {
        grid-template-columns: 1fr;
    }
}