/* Mirna Travel -- Car Result Cards (mirna-car-results.js).
   Supplier-neutral card: media | details | price. Logical properties only,
   so Arabic RTL mirrors automatically. Desktop: 3 columns; <=900px: price
   moves under the details; <=600px: fully stacked. */

.mirna-car-results { margin-top: 24px; color: #17324d; }
.mirna-car-results[hidden] { display: none; }

.mirna-car-results__head { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 16px 0 14px; }
.mirna-car-results__head > :not(.mirna-car-results__bar) { align-self: flex-start; }
/* Header row: title at the start, compact Sort control at the end. */
.mirna-car-results__bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; }
.mirna-car-results__count { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; min-height: 36px; margin: 0; font-size: 1.15rem; font-weight: 800; color: #0f172a; }
.mirna-car-results__count:focus { outline: none; }

/* Compact Sort dropdown. The option list opens IN FLOW directly below
   the button (grid row 2), so it always opens downward and pushes the
   content down instead of overlapping the map or header. */
.mirna-car-sort { flex: 0 0 auto; display: grid; grid-template-areas: "label button" ". menu"; align-items: center; justify-items: end; }
.mirna-car-sort__label { grid-area: label; margin-inline-end: 8px; font-size: .8rem; font-weight: 700; color: #64748b; white-space: nowrap; }
.mirna-car-sort__button { grid-area: button; }
.mirna-car-sort__button {
	display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px;
	border: 1px solid #d7e2ee; border-radius: 10px; background: #fff; color: #17324d;
	font: inherit; font-size: .85rem; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.mirna-car-sort__button:hover { border-color: #bfdbfe; }
.mirna-car-sort__button:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.mirna-car-sort__button svg { flex: none; color: #64748b; transition: transform .15s ease; }
.mirna-car-sort__button[aria-expanded="true"] svg { transform: rotate(180deg); }
.mirna-car-sort__menu {
	grid-area: menu; position: static; min-width: 100%; box-sizing: border-box;
	margin: 6px 0 0; padding: 6px; list-style: none; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
	box-shadow: 0 14px 32px rgba(15, 23, 42, .14); outline: none;
}
.mirna-car-sort__menu[hidden] { display: none; }
.mirna-car-sort__menu li { padding: 8px 12px; border-radius: 8px; font-size: .85rem; font-weight: 600; color: #17324d; white-space: nowrap; cursor: pointer; }
.mirna-car-sort__menu li:hover, .mirna-car-sort__menu li.is-active { background: #eff6ff; }
.mirna-car-sort__menu li[aria-selected="true"] { color: #1d4ed8; font-weight: 800; }
@media (max-width: 480px) {
	.mirna-car-sort__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.mirna-car-results__count { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) { .mirna-car-sort__button svg { transition: none; } }
/* Desktop with the map column (>=1100px, see mirna-car-map.css: list =
   62% of the layout minus the 16px gap): the header row spans only the
   results column, so Sort sits above the cards, not above the map. The
   option list floats directly below the button (end-aligned, so it stays
   inside the results column) and never moves or resizes the map. */
@media (min-width: 1100px) {
	.mirna-car-results:has(.mirna-car-results__layout.has-map) .mirna-car-results__bar { width: calc(62% - 16px); }
	.mirna-car-results:has(.mirna-car-results__layout.has-map) .mirna-car-sort { position: relative; grid-template-areas: "label button"; }
	.mirna-car-results:has(.mirna-car-results__layout.has-map) .mirna-car-sort__menu { grid-area: auto; position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 30; margin: 0; }
}

/* Layout wrapper: list column only for now (a map column can be added). */
.mirna-car-results__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.mirna-car-results__list { display: grid; gap: 14px; min-width: 0; }

.mirna-car-card {
	display: grid; grid-template-columns: 240px minmax(0, 1fr) 210px; gap: 0;
	background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden;
	box-shadow: 0 6px 20px rgba(15, 23, 42, .06); transition: box-shadow .2s ease, border-color .2s ease;
}
.mirna-car-card:hover { border-color: #bfdbfe; box-shadow: 0 10px 28px rgba(15, 23, 42, .1); }

.mirna-car-card__media { position: relative; display: grid; place-items: center; min-height: 170px; padding: 36px 16px 16px; background: linear-gradient(180deg, #f8fafc, #eef4fb); }
.mirna-car-card__media img { display: block; width: 100%; max-width: 220px; height: 120px; object-fit: contain; }
.mirna-car-card__category { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; padding: 4px 10px; border-radius: 999px; background: #fff; color: #1565d8; font-size: .72rem; font-weight: 800; box-shadow: 0 1px 3px rgba(15, 23, 42, .1); }

.mirna-car-card__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 18px; }
.mirna-car-card__title { margin: 0; font-size: 1.12rem; font-weight: 800; line-height: 1.3; color: #0f172a; }
.mirna-car-card__title span { font-size: .82rem; font-weight: 600; color: #64748b; }

.mirna-car-card__specs, .mirna-car-card__policies { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.mirna-car-card__specs li, .mirna-car-card__policies li { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: #334155; }
.mirna-car-card__specs svg, .mirna-car-card__policies svg, .mirna-car-card__location svg { flex: none; color: #64748b; }
.mirna-car-card__policies { padding-top: 10px; border-top: 1px dashed #e2e8f0; }
.mirna-car-card__policies li.is-positive { color: #047857; font-weight: 700; }
.mirna-car-card__policies li.is-positive svg { color: #059669; }

.mirna-car-card__supplier { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; font-size: .85rem; }
.mirna-car-card__supplier strong { color: #0f172a; }
.mirna-car-card__rating { padding: 2px 8px; border-radius: 8px 8px 8px 2px; background: #1565d8; color: #fff; font-weight: 800; font-size: .8rem; }
.mirna-car-card__reviews { color: #64748b; font-size: .8rem; }
.mirna-car-card__location { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: .82rem; color: #475569; }

.mirna-car-card__price {
	display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 4px;
	padding: 16px 18px; border-inline-start: 1px solid #eef2f7; background: #fbfdff; text-align: end;
}
.mirna-car-card__price-label { font-size: .78rem; font-weight: 700; color: #64748b; }
.mirna-car-card__total { font-size: 1.45rem; font-weight: 800; color: #0f172a; line-height: 1.2; }
.mirna-car-card__per-day { font-size: .78rem; color: #64748b; }
.mirna-car-card__select {
	width: 100%; margin-top: 10px; min-height: 44px; padding: 10px 16px; border: 0; border-radius: 12px;
	background: linear-gradient(135deg, #2563eb, #0ea5e9); color: #fff; font: inherit; font-weight: 800; cursor: pointer;
	box-shadow: 0 8px 18px rgba(37, 99, 235, .25); transition: transform .15s ease, box-shadow .15s ease;
}
.mirna-car-card__select:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(37, 99, 235, .32); }
.mirna-car-card__select:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }

/* Loading skeleton */
.mirna-car-skeleton { display: grid; gap: 14px; margin-top: 16px; }
.mirna-car-skeleton__card { display: grid; grid-template-columns: 240px 1fr; gap: 16px; padding: 16px; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; }
.mirna-car-skeleton__card > div:first-child { height: 130px; border-radius: 12px; }
.mirna-car-skeleton__card > div:last-child { display: grid; align-content: center; gap: 10px; }
.mirna-car-skeleton__card span { display: block; height: 14px; border-radius: 7px; }
.mirna-car-skeleton__card span:nth-child(1) { width: 55%; height: 18px; }
.mirna-car-skeleton__card span:nth-child(3) { width: 35%; }
.mirna-car-skeleton__card > div:first-child, .mirna-car-skeleton__card span {
	background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 50%, #eef2f7 100%); background-size: 200% 100%; animation: mirna-car-shimmer 1.2s linear infinite;
}
@keyframes mirna-car-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
	.mirna-car-skeleton__card > div:first-child, .mirna-car-skeleton__card span { animation: none; }
	.mirna-car-card, .mirna-car-card__select { transition: none; }
}

/* Tablet: price row under the details */
@media (max-width: 900px) {
	.mirna-car-card { grid-template-columns: 200px minmax(0, 1fr); }
	.mirna-car-card__price {
		grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between;
		border-inline-start: 0; border-top: 1px solid #eef2f7; text-align: start;
	}
	.mirna-car-card__price-label { flex-basis: 100%; }
	.mirna-car-card__select { width: auto; min-width: 160px; margin-top: 0; margin-inline-start: auto; }
}

/* Phone: fully stacked */
@media (max-width: 600px) {
	.mirna-car-results__head { margin-top: 12px; }
	.mirna-car-card { grid-template-columns: minmax(0, 1fr); }
	.mirna-car-card__media { min-height: 0; padding: 38px 16px 10px; }
	.mirna-car-card__media img { height: 110px; }
	.mirna-car-card__body { padding: 14px 16px; }
	.mirna-car-card__price { padding: 14px 16px; }
	.mirna-car-card__total { font-size: 1.3rem; }
	.mirna-car-card__select { flex-basis: 100%; width: 100%; margin-inline-start: 0; }
	.mirna-car-skeleton__card { grid-template-columns: 1fr; }
}