/* ============================================================
 * Sky Car Rental Toolkit — Rental Process widget
 * Left: eyebrow + headline + intro + native <details> accordion.
 * Right: dark card — documents checklist + numbered timeline.
 * ============================================================ */

.crqa-tk-proc {
	--crqa-pr-accent: #e8c66a;
	--crqa-pr-heading: #f4efe4;
	--crqa-pr-body: #ffffff;
	--crqa-pr-text: #f4efe4;
	--crqa-pr-muted: #9b9488;
	--crqa-pr-card: #0d0c0a;

	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: clamp(36px, 5vw, 72px);
	align-items: start;
	font-family: 'Jost', sans-serif;
	font-weight: 300;
	color: var(--crqa-pr-text);
}

/* ---- Left ---- */
.crqa-tk-proc__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.crqa-tk-proc__eyebrow span { font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: .28em; color: var(--crqa-pr-accent); text-transform: uppercase; }
.crqa-tk-proc__heading { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(34px, 5vw, 60px);
	text-transform: uppercase; line-height: 1; letter-spacing: -.015em; margin: 0 0 28px; color: var(--crqa-pr-heading); }
.crqa-tk-proc__intro { color: var(--crqa-pr-body); font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 15px; line-height: 1.65; max-width: 42ch; margin: 0; }

.crqa-tk-proc__acc { margin-top: 36px; display: flex; flex-direction: column; gap: 14px; }
.crqa-tk-proc__item { background: #0d0c0a; border: 1px solid #1a1814; border-radius: 6px; overflow: hidden;
	transition: border-color .35s ease, background .35s ease; }
.crqa-tk-proc__item[open] { background: #100f0c; border-color: #2d2920; }
.crqa-tk-proc__q { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px;
	cursor: pointer; list-style: none; }
.crqa-tk-proc__q::-webkit-details-marker { display: none; }
.crqa-tk-proc__q::marker { content: ""; }
.crqa-tk-proc__q-text { color: var(--crqa-pr-text); font-weight: 500; font-size: 16px; }
.crqa-tk-proc__icon { flex-shrink: 0; color: var(--crqa-pr-accent); font-size: 22px; font-weight: 300; line-height: 1;
	transition: transform .35s ease; }
.crqa-tk-proc__item[open] .crqa-tk-proc__icon { transform: rotate(45deg); }
.crqa-tk-proc__a { color: var(--crqa-pr-body); font-size: 15px; line-height: 1.65; padding: 0 24px 24px; max-width: 54ch; margin: 0; }

/* ---- Right card ---- */
.crqa-tk-proc__card { border: 1px solid #1f1c17; border-radius: 8px;
	background: linear-gradient(180deg, #100f0c, var(--crqa-pr-card)); padding: clamp(28px, 3vw, 40px); }
.crqa-tk-proc__card-h { font-family: 'Jost', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .04em;
	color: var(--crqa-pr-heading); margin: 0 0 20px; }
.crqa-tk-proc__card-h--tl { margin: 36px 0 8px; }

.crqa-tk-proc__docs { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.crqa-tk-proc__docs li { display: flex; align-items: flex-start; gap: 14px; }
.crqa-tk-proc__check { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: rgba(232,198,106,.12);
	border: 1px solid rgba(232,198,106,.4); color: var(--crqa-pr-accent); font-size: 12px; display: flex;
	align-items: center; justify-content: center; margin-top: 2px; }
.crqa-tk-proc__docs li span:last-child { color: #cfc8ba; font-size: 15px; line-height: 1.5; font-weight: 400; }

.crqa-tk-proc__timeline { position: relative; padding-left: 30px; margin-top: 18px; }
.crqa-tk-proc__timeline::before { content: ""; position: absolute; left: 10px; top: 6px; bottom: 6px; width: 1px; background: #26221b; }
.crqa-tk-proc__step { position: relative; padding-bottom: 24px; }
.crqa-tk-proc__step:last-child { padding-bottom: 0; }
.crqa-tk-proc__num { position: absolute; left: -30px; top: 0; width: 21px; height: 21px; border-radius: 50%;
	background: #0a0907; border: 1px solid var(--crqa-pr-accent); color: var(--crqa-pr-accent);
	font-family: 'Space Mono', monospace; font-size: 10px; display: flex; align-items: center; justify-content: center; }
.crqa-tk-proc__step-t { color: var(--crqa-pr-text); font-weight: 500; font-size: 15px; margin-bottom: 4px; }
.crqa-tk-proc__step-x { color: var(--crqa-pr-muted); font-size: 14px; line-height: 1.55; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
	.crqa-tk-proc { grid-template-columns: 1fr; }
}