/* SearchEV EV Compare - Elementor "EV Compare Cards" widget */

.sevcc-cc { --cc-cols: 3; --cc-gap: 20px; position: relative; font-family: var(--sevcc-font, inherit); box-sizing: border-box; width: 100%; }
.sevcc-cc *, .sevcc-cc *::before, .sevcc-cc *::after { box-sizing: border-box; }
.sevcc-cc-empty { padding: 24px; border: 1px dashed #b9b9c0; border-radius: 8px; text-align: center; color: #6b6f76; font-size: 14px; }

/* ---- Tabs ---- */
.sevcc-cc .sevcc-cc-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; }
.sevcc-cc button.sevcc-cc-tab { appearance: none; cursor: pointer; border: 1px solid #d9d9de; background: #fff; color: #1b1d21; padding: 8px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.2; text-transform: none; letter-spacing: 0; box-shadow: none; transition: background .15s, color .15s, border-color .15s; }
.sevcc-cc button.sevcc-cc-tab:hover, .sevcc-cc button.sevcc-cc-tab.is-active { background: #ff4d1c; border-color: #ff4d1c; color: #fff; }

/* ---- Track: carousel ---- */
.sevcc-cc-stage { position: relative; }
.sevcc-cc--carousel .sevcc-cc-track { display: flex; gap: var(--cc-gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 2px 8px; margin: -4px -2px -8px; }
.sevcc-cc--carousel .sevcc-cc-track::-webkit-scrollbar { display: none; }
.sevcc-cc--carousel .sevcc-cc-card { flex: 0 0 calc((100% - (var(--cc-cols) - 1) * var(--cc-gap)) / var(--cc-cols)); min-width: 0; scroll-snap-align: start; }

/* ---- Track: grid ---- */
.sevcc-cc--grid .sevcc-cc-track { display: grid; grid-template-columns: repeat(var(--cc-cols), minmax(0, 1fr)); gap: var(--cc-gap); }

/* ---- Card ---- */
.sevcc-cc .sevcc-cc-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e6e6e6; border-radius: 8px; overflow: hidden; transition: box-shadow .18s, transform .18s; }
.sevcc-cc .sevcc-cc-card.is-hidden { display: none; }
.sevcc-cc .sevcc-cc-card:hover { box-shadow: 0 10px 26px rgba(17, 17, 17, .10); }

.sevcc-cc a.sevcc-cc-media { position: relative; display: flex; align-items: center; height: 160px; background: #e3e3e5; text-decoration: none; }
.sevcc-cc .sevcc-cc-img { flex: 1 1 50%; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; padding: 14px 6px; }
.sevcc-cc .sevcc-cc-img img { width: 100%; height: 100%; object-fit: contain; display: block; max-width: none; border-radius: 0; margin: 0; }
.sevcc-cc .sevcc-cc-img .sevcc-ph { width: 78%; height: auto; }
.sevcc-cc .sevcc-cc-vs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 46px; height: 46px; border-radius: 50%; background: #23272f; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; letter-spacing: .02em; }

.sevcc-cc .sevcc-cc-body { display: flex; flex-direction: column; flex: 1; padding: 16px 20px 20px; gap: 16px; }
.sevcc-cc .sevcc-cc-cat { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #ff4d1c; }
.sevcc-cc .sevcc-cc-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.sevcc-cc .sevcc-cc-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sevcc-cc .sevcc-cc-make { font-size: 14px; color: #6b6f76; line-height: 1.3; }
.sevcc-cc .sevcc-cc-name { font-size: 18px; font-weight: 700; color: #1b1d21; line-height: 1.25; overflow-wrap: anywhere; }
.sevcc-cc .sevcc-cc-price { font-size: 15px; color: #1b1d21; line-height: 1.35; }

.sevcc-cc a.sevcc-cc-btn { margin-top: auto; display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; padding: 13px 14px; border: 1px solid #ff4d1c; border-radius: 8px; background: #fff; color: #ff4d1c; font-size: 17px; font-weight: 600; line-height: 1.2; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.sevcc-cc a.sevcc-cc-btn:hover { background: #ff4d1c; color: #fff; }

/* ---- Arrows ---- */
.sevcc-cc button.sevcc-cc-arrow { position: absolute; top: 80px; z-index: 5; transform: translateY(-50%); width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #1b1d21; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); transition: opacity .15s, transform .15s; }
.sevcc-cc button.sevcc-cc-arrow:hover { transform: translateY(-50%) scale(1.07); }
.sevcc-cc button.sevcc-cc-arrow.is-prev { left: -14px; }
.sevcc-cc button.sevcc-cc-arrow.is-next { right: -14px; }
.sevcc-cc button.sevcc-cc-arrow[disabled] { opacity: .35; cursor: default; pointer-events: none; }

/* ---- Dots ---- */
.sevcc-cc .sevcc-cc-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.sevcc-cc button.sevcc-cc-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #c8c8ce; cursor: pointer; transition: width .2s, background .2s; }
.sevcc-cc button.sevcc-cc-dot.is-active { width: 22px; border-radius: 6px; background: #ff4d1c; }

/* ---- Fallback column counts (Elementor's responsive controls override these) ---- */
@media (max-width: 1024px) { .sevcc-cc { --cc-cols: 2; } }
@media (max-width: 767px) { .sevcc-cc { --cc-cols: 1; } }

/* ---- Small screens: keep arrows inside the viewport ---- */
@media (max-width: 767px) {
	.sevcc-cc button.sevcc-cc-arrow.is-prev { left: 4px; }
	.sevcc-cc button.sevcc-cc-arrow.is-next { right: 4px; }
	.sevcc-cc .sevcc-cc-body { padding: 14px 14px 16px; }
	.sevcc-cc .sevcc-cc-name { font-size: 16px; }
	.sevcc-cc a.sevcc-cc-btn { font-size: 15px; }
}

/* ---- Popular comparisons shortcode: card design shared with the widget ---- */
.sevcc-pop-wrap .sevcc-cc { --cc-cols: 3; --cc-gap: 20px; }
@media (max-width: 1024px) { .sevcc-pop-wrap .sevcc-cc { --cc-cols: 2; } }
@media (max-width: 767px) { .sevcc-pop-wrap .sevcc-cc { --cc-cols: 1; } }

/* Button style from Settings > EV Compare (Popular comparisons) */
.sevcc-pop-wrap .sevcc-cc a.sevcc-cc-btn { color: var(--sevcc-cbtn-color, #ff4d1c); background: var(--sevcc-cbtn-bg, #fff); border-style: solid; border-color: var(--sevcc-cbtn-border, #ff4d1c); border-width: var(--sevcc-cbtn-bw, 1px); border-radius: var(--sevcc-cbtn-radius, 8px); font-size: var(--sevcc-cbtn-size, 17px); font-weight: var(--sevcc-cbtn-weight, 600); }
.sevcc-pop-wrap .sevcc-cc a.sevcc-cc-btn:hover, .sevcc-pop-wrap .sevcc-cc .sevcc-cc-card:hover a.sevcc-cc-btn { color: var(--sevcc-cbtn-color-h, #fff); background: var(--sevcc-cbtn-bg-h, #ff4d1c); border-color: var(--sevcc-cbtn-border-h, #ff4d1c); }