/* ============================================================
 * Sky Car Rental Toolkit — Service Categories carousel
 * Scroll-snap track of service cards + prev/next + pagination bars.
 * ============================================================ */

.crqa-tk-svc {
	--crqa-svc-accent: #e8c66a;
	--crqa-svc-heading: #f4efe4;
	--crqa-svc-title: #f4efe4;
	--crqa-svc-sub: #ffffff;
	--crqa-svc-nav: #f4efe4;
	--crqa-svc-nav-bd: #2a2620;
	--crqa-svc-pv: 2;
	--crqa-svc-gap: 18px;
	font-family: 'Jost', sans-serif;
	font-weight: 300;
	color: var(--crqa-svc-heading);
}

/* ---- Header ---- */
.crqa-tk-svc__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
	gap: 24px; margin-bottom: clamp(32px, 4vw, 48px); }
.crqa-tk-svc__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.crqa-tk-svc__rule { width: 30px; height: 1px; background: var(--crqa-svc-accent); }
.crqa-tk-svc__eyebrow span:last-child { font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: .28em;
	color: var(--crqa-svc-accent); text-transform: uppercase; }
.crqa-tk-svc__heading { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(30px, 4.4vw, 52px);
	text-transform: uppercase; line-height: 1.02; letter-spacing: -.01em; margin: 0; color: var(--crqa-svc-heading); }
.crqa-tk-svc__nav { display: flex; align-items: center; gap: 12px; }
/* High specificity + appearance reset so the theme's default button styling
   (white background, square) can't override the round transparent arrows. */
.crqa-tk-svc .crqa-tk-svc__arrow {
	-webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
	width: 52px; height: 52px; min-height: 0; border-radius: 50%; border: 1px solid var(--crqa-svc-nav-bd);
	background: transparent; box-shadow: none; color: var(--crqa-svc-nav); font-size: 18px; line-height: 1;
	cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
	transition: border-color .3s, background .3s; }
.crqa-tk-svc .crqa-tk-svc__arrow:hover { border-color: var(--crqa-svc-accent); background: rgba(232,198,106,.08); color: var(--crqa-svc-nav); }

/* ---- Track ---- */
.crqa-tk-svc__track { display: flex; gap: var(--crqa-svc-gap); overflow-x: auto; scroll-snap-type: x mandatory;
	scroll-behavior: smooth; padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none; }
.crqa-tk-svc__track::-webkit-scrollbar { display: none; }

.crqa-tk-svc__slide { flex: 0 0 calc((100% - (var(--crqa-svc-gap) * (var(--crqa-svc-pv) - 1))) / var(--crqa-svc-pv));
	scroll-snap-align: start; position: relative; display: block; text-decoration: none; border-radius: 4px;
	overflow: hidden; height: clamp(380px, 46vh, 500px); background: #15130f;
	box-shadow: 0 18px 44px -22px rgba(0,0,0,.9); }
.crqa-tk-svc__img { position: absolute; inset: 0; background-size: cover; background-position: center;
	transition: transform .6s cubic-bezier(.22,1,.36,1); }
.crqa-tk-svc__img--ph { background: repeating-linear-gradient(135deg,#15130f,#15130f 12px,#191712 12px,#191712 24px); }
.crqa-tk-svc__slide:hover .crqa-tk-svc__img { transform: scale(1.05); }
.crqa-tk-svc__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,7,6,.95) 6%, rgba(7,7,6,.55) 42%, rgba(7,7,6,.12) 78%); }
.crqa-tk-svc__num { position: absolute; top: 22px; left: 24px; font-family: 'Space Mono', monospace; font-size: 12px;
	letter-spacing: .16em; color: rgba(244,239,228,.7); }
.crqa-tk-svc__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 32px 36px; }
.crqa-tk-svc__cardrule { display: block; width: 26px; height: 1px; background: var(--crqa-svc-accent); margin-bottom: 16px; }
.crqa-tk-svc__title { color: var(--crqa-svc-title); font-family: 'Archivo', sans-serif; font-weight: 800;
	font-size: clamp(22px, 2vw, 30px); text-transform: uppercase; letter-spacing: -.01em; line-height: 1.05;
	margin: 0 0 10px; text-shadow: 0 2px 16px rgba(0,0,0,.6); }
.crqa-tk-svc__sub { color: var(--crqa-svc-sub); font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 15px; line-height: 1.5; margin: 0 0 18px; max-width: 38ch; }
.crqa-tk-svc__cta { display: inline-flex; align-items: center; gap: 8px; font-family: 'Space Mono', monospace;
	font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--crqa-svc-accent); }
.crqa-tk-svc__cta span { font-family: 'Jost', sans-serif; }

/* ---- Pagination bars ---- */
.crqa-tk-svc__dots { display: flex; align-items: center; gap: 8px; margin-top: 26px; }
.crqa-tk-svc .crqa-tk-svc__dot {
	-webkit-appearance: none; appearance: none;
	height: 3px; width: 14px; min-height: 0; border: 0; border-radius: 2px; background: #2f2b24; box-shadow: none;
	cursor: pointer; padding: 0; transition: width .4s ease, background .4s ease; }
.crqa-tk-svc .crqa-tk-svc__dot.is-active { width: 34px; background: var(--crqa-svc-accent); }

/* ---- Mobile peek ---- */
@media (max-width: 760px) {
	.crqa-tk-svc__slide { flex-basis: 86%; }
}