/* ==========================================================================
   DriveLink Shop - TyreSystem Shortcode Styles
   Stylt die Ausgabe von [dls_tyre_search] (Plugin: drivelink-tyresystem-connector).
   Greift NICHT in die Funktionalitaet ein - nur visuelle Anpassung.
   Selektoren sind moeglichst breit, damit Plugin-Updates nicht brechen.
   ========================================================================== */

/* Wrapper variants the plugin might use */
.dls-tyre-search,
.dls-tyresearch,
.dls-tyresystem,
.dls-ts-search,
.tyresystem-search,
.tyresystem,
.dls_tyre_search {
	display: block;
	color: var(--dls-text);
	font-family: var(--font-body);
}

/* ===== Filter / Form ===== */
.dls-tyre-search form,
.dls-tyresearch form,
.tyresystem-search form,
.tyresystem form,
.dls-tyre-search .filters,
.dls-tyresearch .filters,
.tyresystem .filters,
.dls-ts-filterbox,
.dls-tyre-search-filter {
	display: grid;
	gap: 0.85rem;
	grid-template-columns: 1fr;
	padding: 1.2rem;
	border-radius: var(--dls-radius-lg);
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--dls-border);
	box-shadow: var(--dls-shadow-sm);
}

@media (min-width: 600px) {
	.dls-tyre-search form,
	.dls-tyresearch form,
	.tyresystem-search form,
	.tyresystem form,
	.dls-tyre-search .filters,
	.dls-tyresearch .filters,
	.tyresystem .filters,
	.dls-ts-filterbox,
	.dls-tyre-search-filter {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 920px) {
	.dls-tyre-search form,
	.dls-tyresearch form,
	.tyresystem-search form,
	.tyresystem form,
	.dls-tyre-search .filters,
	.dls-tyresearch .filters,
	.tyresystem .filters,
	.dls-ts-filterbox,
	.dls-tyre-search-filter {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* labels + inputs in shortcode output */
.dls-tyre-search label,
.dls-tyresearch label,
.tyresystem label,
.dls-ts-filterbox label {
	display: grid;
	gap: 0.4rem;
	color: var(--dls-text);
	font-weight: 700;
	font-size: 0.86rem;
	letter-spacing: 0.02em;
}

.dls-tyre-search select,
.dls-tyre-search input,
.dls-tyresearch select,
.dls-tyresearch input,
.tyresystem select,
.tyresystem input,
.dls-ts-filterbox select,
.dls-ts-filterbox input {
	width: 100%;
	padding: 0.78rem 0.95rem;
	border: 1px solid rgba(31, 43, 53, 0.14);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.95);
	color: var(--dls-text);
	font-size: 0.96rem;
	transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.dls-tyre-search select:focus,
.dls-tyre-search input:focus,
.dls-tyresearch select:focus,
.dls-tyresearch input:focus,
.tyresystem select:focus,
.tyresystem input:focus,
.dls-ts-filterbox select:focus,
.dls-ts-filterbox input:focus {
	outline: none;
	border-color: rgba(215, 25, 32, 0.36);
	box-shadow: 0 0 0 4px rgba(215, 25, 32, 0.08);
	background: #fff;
}

/* submit / search buttons */
.dls-tyre-search button,
.dls-tyre-search input[type="submit"],
.dls-tyresearch button,
.dls-tyresearch input[type="submit"],
.tyresystem button,
.tyresystem input[type="submit"],
.dls-ts-filterbox button,
.dls-ts-search-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.4rem;
	min-height: 46px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--dls-primary), var(--dls-primary-dark));
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.01em;
	box-shadow: 0 14px 28px rgba(215, 25, 32, 0.18);
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.dls-tyre-search button:hover,
.dls-tyre-search input[type="submit"]:hover,
.dls-tyresearch button:hover,
.dls-tyresearch input[type="submit"]:hover,
.tyresystem button:hover,
.tyresystem input[type="submit"]:hover,
.dls-ts-filterbox button:hover,
.dls-ts-search-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 18px 36px rgba(215, 25, 32, 0.24);
}

/* full-width submit on mobile */
@media (max-width: 599px) {
	.dls-tyre-search button[type="submit"],
	.dls-tyre-search input[type="submit"],
	.dls-tyresearch button[type="submit"],
	.dls-tyresearch input[type="submit"],
	.tyresystem button[type="submit"],
	.tyresystem input[type="submit"] {
		width: 100%;
	}
}

/* ===== Result list / cards ===== */
.dls-tyre-results,
.dls-tyresearch-results,
.dls-tyre-search-results,
.tyresystem-results,
.dls-ts-results {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	margin-top: 1.4rem;
}

@media (min-width: 700px) {
	.dls-tyre-results,
	.dls-tyresearch-results,
	.dls-tyre-search-results,
	.tyresystem-results,
	.dls-ts-results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1120px) {
	.dls-tyre-results,
	.dls-tyresearch-results,
	.dls-tyre-search-results,
	.tyresystem-results,
	.dls-ts-results {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* tyre result card */
.dls-tyre-result,
.dls-tyre-card,
.dls-tyresearch-card,
.tyresystem-result,
.tyresystem-product,
.dls-ts-result {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.8rem;
	padding: 1.2rem;
	border-radius: var(--dls-radius-lg);
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid var(--dls-border);
	box-shadow: var(--dls-shadow-sm);
	transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.dls-tyre-result:hover,
.dls-tyre-card:hover,
.dls-tyresearch-card:hover,
.tyresystem-result:hover,
.tyresystem-product:hover,
.dls-ts-result:hover {
	transform: translateY(-2px);
	border-color: rgba(215, 25, 32, 0.24);
	box-shadow: var(--dls-shadow-md);
}

/* card image */
.dls-tyre-result img,
.dls-tyre-card img,
.dls-tyresearch-card img,
.tyresystem-result img,
.tyresystem-product img,
.dls-ts-result img {
	width: 100%;
	max-height: 180px;
	object-fit: contain;
	background: var(--dls-bg-soft);
	border-radius: var(--dls-radius-md);
	padding: 0.4rem;
}

/* title */
.dls-tyre-result h2, .dls-tyre-result h3,
.dls-tyre-card h2, .dls-tyre-card h3,
.dls-tyresearch-card h2, .dls-tyresearch-card h3,
.tyresystem-result h2, .tyresystem-result h3,
.tyresystem-product h2, .tyresystem-product h3,
.dls-ts-result h2, .dls-ts-result h3,
.dls-ts-result-title {
	font-family: var(--font-heading);
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--dls-text);
	margin: 0;
}

/* meta line (size, season, etc.) */
.dls-tyre-result .meta,
.dls-tyre-card .meta,
.dls-tyresearch-card .meta,
.tyresystem-result .meta,
.tyresystem-product .meta,
.dls-ts-result .meta,
.dls-ts-result-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	color: var(--dls-text-soft);
	font-size: 0.86rem;
}

.dls-tyre-result .meta span,
.dls-tyre-card .meta span,
.dls-tyresearch-card .meta span,
.tyresystem-result .meta span,
.tyresystem-product .meta span,
.dls-ts-result .meta span,
.dls-ts-result-meta span {
	padding: 0.18rem 0.55rem;
	background: rgba(31, 43, 53, 0.06);
	border-radius: 999px;
	font-weight: 700;
	color: var(--dls-text);
}

/* price - prominent */
.dls-tyre-result .price,
.dls-tyre-card .price,
.dls-tyresearch-card .price,
.tyresystem-result .price,
.tyresystem-product .price,
.dls-ts-result .price,
.dls-ts-price,
.dls-tyre-result strong.price,
.dls-tyre-result .amount {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	color: var(--dls-primary);
	font-family: var(--font-heading);
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.dls-tyre-result .price-note,
.dls-tyre-card .price-note,
.tyresystem-result .price-note,
.dls-ts-result .price-note {
	color: var(--dls-muted);
	font-size: 0.8rem;
	font-weight: 600;
}

/* CTAs inside the card */
.dls-tyre-result a.button,
.dls-tyre-result button,
.dls-tyre-card a.button,
.dls-tyre-card button,
.dls-tyresearch-card a.button,
.dls-tyresearch-card button,
.tyresystem-result a.button,
.tyresystem-result button,
.tyresystem-product a.button,
.tyresystem-product button,
.dls-ts-result a.button,
.dls-ts-result button,
.dls-ts-add-to-cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	padding: 0.78rem 1.2rem;
	min-height: 44px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--dls-primary), var(--dls-primary-dark));
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.01em;
	box-shadow: 0 14px 26px rgba(215, 25, 32, 0.16);
	cursor: pointer;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.dls-tyre-result a.button:hover,
.dls-tyre-card a.button:hover,
.dls-tyresearch-card a.button:hover,
.tyresystem-result a.button:hover,
.tyresystem-product a.button:hover,
.dls-ts-result a.button:hover,
.dls-ts-add-to-cart:hover {
	transform: translateY(-1px);
	box-shadow: 0 20px 36px rgba(215, 25, 32, 0.22);
}

/* labels / pills (season, fuel-class, wet, noise) */
.dls-ts-label,
.dls-tyre-result .label,
.dls-tyre-card .label,
.tyresystem-result .label,
.tyresystem-label,
.dls-ts-result .label {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.18rem 0.55rem;
	border-radius: 999px;
	background: rgba(215, 25, 32, 0.08);
	color: var(--dls-primary);
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* loading / empty states */
.dls-tyre-search .loading,
.dls-tyresearch .loading,
.tyresystem .loading,
.dls-ts-loading {
	padding: 1.4rem;
	text-align: center;
	border-radius: var(--dls-radius-md);
	background: rgba(255, 255, 255, 0.7);
	border: 1px dashed var(--dls-border-strong);
	color: var(--dls-text-soft);
	font-weight: 700;
}

.dls-tyre-search .empty,
.dls-tyresearch .empty,
.tyresystem .empty,
.dls-ts-empty {
	padding: 1.6rem;
	text-align: center;
	border-radius: var(--dls-radius-md);
	background: rgba(215, 25, 32, 0.04);
	border: 1px solid rgba(215, 25, 32, 0.14);
	color: var(--dls-text);
}

/* generic table fallback for older plugin output */
.dls-tyre-search table,
.dls-tyresearch table,
.tyresystem table,
.dls-ts-results table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--dls-border);
	border-radius: var(--dls-radius-lg);
	overflow: hidden;
	box-shadow: var(--dls-shadow-sm);
}

.dls-tyre-search table th,
.dls-tyre-search table td,
.dls-tyresearch table th,
.dls-tyresearch table td,
.tyresystem table th,
.tyresystem table td,
.dls-ts-results table th,
.dls-ts-results table td {
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--dls-border);
	text-align: left;
	color: var(--dls-text);
}

.dls-tyre-search table th,
.dls-tyresearch table th,
.tyresystem table th,
.dls-ts-results table th {
	background: rgba(255, 255, 255, 0.6);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.78rem;
}

.dls-tyre-search table tr:last-child td,
.dls-tyresearch table tr:last-child td,
.tyresystem table tr:last-child td,
.dls-ts-results table tr:last-child td {
	border-bottom: 0;
}