/* CCS_BOOKING_CSS_MARKER
   Chamathka Cab Service — how booking and quotations work.
   Snippet: "CCS Booking Styles" | group: Booking Section | type: css | run_at: wp_head

   A numbered list on the left, a photo on the right with a black panel
   overlapping its lower edge. */

.ccs-booking__layout {
  display: grid;
  gap: var(--wp--preset--spacing--80) var(--wp--custom--grid-gap);
}

@media (min-width: 1000px) {
  .ccs-booking__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: start;
  }
}

/* --- The numbered steps -------------------------------------------------- */
.ccs-steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ccs-step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--wp--preset--spacing--40);
  padding-bottom: var(--wp--preset--spacing--60);
}

.ccs-step:last-child {
  padding-bottom: 0;
}

/* Connector line running down behind the numbered markers. */
.ccs-step::before {
  content: "";
  position: absolute;
  top: 48px;
  bottom: 4px;
  left: 21px;
  width: var(--wp--custom--border-hairline);
  background-color: var(--wp--preset--color--line-strong);
}

.ccs-step:last-child::before {
  display: none;
}

.ccs-step__marker {
  position: relative;
  z-index: var(--wp--custom--z-base);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--wp--custom--radius-pill);
  background-color: var(--wp--preset--color--black);
  color: var(--wp--preset--color--base);
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--weight-bold);
  line-height: 1;
}

.ccs-step:first-child .ccs-step__marker {
  background-color: var(--wp--preset--color--accent-fill);
  box-shadow: var(--wp--custom--shadow-accent);
}

.ccs-step__title {
  margin: 0 0 var(--wp--preset--spacing--10);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--custom--weight-semibold);
  letter-spacing: var(--wp--custom--tracking-tight);
  color: var(--wp--preset--color--contrast);
}

.ccs-step__text {
  margin: 0;
  font-size: var(--wp--preset--font-size--base);
  line-height: var(--wp--custom--leading-relaxed);
  color: var(--wp--preset--color--muted);
}

/* --- The photo and the panel --------------------------------------------- */
.ccs-booking__image {
  border-radius: var(--wp--custom--card-radius);
  overflow: hidden;
  box-shadow: var(--wp--custom--shadow-lg);
}

.ccs-booking__image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.ccs-booking__panel {
  position: relative;
  margin: calc(var(--wp--preset--spacing--70) * -1) var(--wp--preset--spacing--50) 0;
  padding: var(--wp--custom--card-padding);
  background-color: var(--wp--preset--color--black);
  color: var(--wp--preset--color--base);
  border-radius: var(--wp--custom--card-radius);
  box-shadow: var(--wp--custom--shadow-xl);
}

/* No photo above it, so nothing to overlap. */
.ccs-booking__panel.ccs-booking__panel--flat {
  margin: 0;
}

.ccs-booking__panel-title {
  margin: 0 0 var(--wp--preset--spacing--20);
  color: var(--wp--preset--color--base);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--weight-semibold);
  letter-spacing: var(--wp--custom--tracking-tight);
}

.ccs-booking__panel-text {
  margin: 0 0 var(--wp--preset--spacing--50);
  color: var(--wp--custom--text-inverse-muted);
  font-size: var(--wp--preset--font-size--base);
  line-height: var(--wp--custom--leading-relaxed);
}

.ccs-booking__panel-actions {
  display: grid;
  gap: var(--wp--preset--spacing--20);
}

@media (min-width: 480px) {
  .ccs-booking__panel-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}