/* ==========================================
   TWO-WHEELER RENTAL JOURNEY
   ========================================== */

.rental-journey {
  --rj-orange: #ff681f;
  --rj-blue: #1680e8;
  --rj-green: #08ad70;
  --rj-purple: #8050e8;
  --rj-navy: #0b1d39;
  --rj-muted: #485e7a;

  box-sizing: border-box;
  width: 100%;
  margin: 24px auto;
  padding: 38px 24px 28px;
  color: var(--rj-navy);
  background: #fff;
  font-family: inherit;
}

.rental-journey *,
.rental-journey *::before,
.rental-journey *::after {
  box-sizing: border-box;
}

/* HEADER */

.rental-journey .rj-header {
  max-width: 760px;
  margin: 0 auto 36px;
  text-align: center;
}

.rental-journey .rj-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--rj-orange);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
}

.rental-journey .rj-header h2 {
  margin: 0 0 8px;
  padding: 0;
  color: var(--rj-navy);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 800;
  line-height: 1.2;
}

.rental-journey .rj-header p {
  margin: 0;
  color: var(--rj-muted);
  font-size: 16px;
  line-height: 1.6;
}

.rental-journey .rj-underline {
  display: block;
  width: 58px;
  height: 4px;
  margin: 15px auto 0;
  border-radius: 10px;
  background: var(--rj-orange);
}

/* TIMELINE */

.rental-journey .rj-timeline {
  position: relative;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

/* Central dotted line */

.rental-journey .rj-timeline::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 30px;
  bottom: 70px;
  left: 50%;
  border-left: 2px dashed #d5e0ed;
  transform: translateX(-50%);
  pointer-events: none;
}

/* EACH STEP */

.rental-journey .rj-step {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 66px minmax(0, 1fr) !important;
  grid-template-rows: minmax(220px, auto);
  align-items: center;
  column-gap: 22px;
  width: 100%;
  margin: 0 0 26px;
  padding: 0;
  clear: both;
}

/* IMAGE */

.rental-journey .rj-step .rj-picture {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  width: 100%;
  height: auto;
  min-width: 0;
  aspect-ratio: 1.48 / 1;
  overflow: hidden;
  border-radius: 28px;
  background: #f3f6fa;
}

.rental-journey .rj-step .rj-picture img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0;
  object-fit: cover;
  object-position: center;
  border: 0;
  border-radius: inherit;
}

/* NUMBER CIRCLE */

.rental-journey .rj-step .rj-marker {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: center;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: 30px 0 0;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(15, 35, 60, 0.03);
}

/* TEXT */

.rental-journey .rj-step .rj-copy {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  min-width: 0;
  padding: 12px 0;
}

.rental-journey .rj-label {
  display: inline-block;
  margin-bottom: 3px;
  color: var(--rj-orange);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.6px;
  line-height: 1.6;
}

.rental-journey .rj-blue-text {
  color: var(--rj-blue);
}

.rental-journey .rj-green-text {
  color: var(--rj-green);
}

.rental-journey .rj-purple-text {
  color: var(--rj-purple);
}

.rental-journey .rj-copy h3 {
  margin: 5px 0 9px;
  padding: 0;
  color: var(--rj-navy);
  font-size: clamp(21px, 2.15vw, 30px);
  font-weight: 800;
  line-height: 1.25;
}

.rental-journey .rj-copy p {
  margin: 0;
  padding: 0;
  color: var(--rj-muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
}

/* REVERSE STEPS: TEXT LEFT, IMAGE RIGHT */

.rental-journey .rj-step.rj-reverse .rj-picture {
  grid-column: 3;
}

.rental-journey .rj-step.rj-reverse .rj-copy {
  grid-column: 1;
  grid-row: 1;
}

.rental-journey .rj-step.rj-reverse .rj-marker {
  grid-column: 2;
}

/* STEP COLORS */

.rental-journey .rj-orange {
  background: #ffeadc;
  color: #ed681b;
}

.rental-journey .rj-blue {
  background: #d9edff;
  color: #0753a9;
}

.rental-journey .rj-green {
  background: #d6f9e8;
  color: #087b4e;
}

.rental-journey .rj-purple {
  background: #e9ddff;
  color: #38219b;
}

/* BENEFITS */

.rental-journey .rj-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  max-width: 1120px;
  margin: 28px auto 0;
  padding: 22px;
  border-radius: 17px;
  background: #fff4e9;
}

.rental-journey .rj-benefit {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 2px 0;
}

.rental-journey .rj-benefit + .rj-benefit {
  border-left: 1px solid #ffb47c;
  padding-left: 18px;
}

.rental-journey .rj-benefit-icon {
  display: flex;
  flex: 0 0 46px;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 23px;
  font-weight: 800;
}

.rental-journey .rj-benefit-green {
  background: #b6f7d3;
  color: #07854c;
}

.rental-journey .rj-benefit-blue {
  background: #c8eaff;
  color: #0875d9;
}

.rental-journey .rj-benefit-purple {
  background: #e5d2ff;
  color: #7542d8;
}

.rental-journey .rj-benefit-orange {
  background: #ffd6b7;
  color: #dc5a15;
}

.rental-journey .rj-benefit strong,
.rental-journey .rj-benefit small {
  display: block;
}

.rental-journey .rj-benefit strong {
  color: var(--rj-navy);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.rental-journey .rj-benefit small {
  margin-top: 3px;
  color: var(--rj-muted);
  font-size: 11px;
  line-height: 1.5;
}

/* TABLETS */

@media (min-width: 701px) and (max-width: 1000px) {
  .rental-journey {
    padding-right: 18px;
    padding-left: 18px;
  }

  .rental-journey .rj-step {
    grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr) !important;
    column-gap: 13px;
    grid-template-rows: minmax(190px, auto);
    margin-bottom: 25px;
  }

  .rental-journey .rj-step .rj-marker {
    width: 48px;
    height: 48px;
    margin-top: 24px;
    font-size: 18px;
  }

  .rental-journey .rj-step .rj-picture {
    border-radius: 20px;
  }

  .rental-journey .rj-copy h3 {
    font-size: 22px;
  }

  .rental-journey .rj-copy p {
    font-size: 14px;
    line-height: 1.6;
  }

  .rental-journey .rj-label {
    font-size: 11px;
  }

  .rental-journey .rj-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rental-journey .rj-benefit:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
}

/* MOBILE */

@media (max-width: 700px) {
  .rental-journey {
    margin: 16px auto;
    padding: 28px 14px 22px;
  }

  .rental-journey .rj-header {
    margin-bottom: 30px;
  }

  .rental-journey .rj-kicker {
    font-size: 11px;
    letter-spacing: 1.5px;
  }

  .rental-journey .rj-header h2 {
    font-size: 27px;
  }

  .rental-journey .rj-header p {
    font-size: 14px;
  }

  /* Timeline moves to the left */

  .rental-journey .rj-timeline::before {
    left: 19px;
    top: 18px;
    bottom: 45px;
    transform: none;
  }

  .rental-journey .rj-step,
  .rental-journey .rj-step.rj-reverse {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: 12px;
    row-gap: 11px;
    margin-bottom: 30px;
  }

  /* Image always sits in the content column */

  .rental-journey .rj-step .rj-picture,
  .rental-journey .rj-step.rj-reverse .rj-picture {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 17px;
  }

  .rental-journey .rj-step .rj-picture img {
    border-radius: 17px;
  }

  /* Number sits beside image */

  .rental-journey .rj-step .rj-marker,
  .rental-journey .rj-step.rj-reverse .rj-marker {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-self: center;
    width: 38px;
    height: 38px;
    margin-top: 2px;
    border-width: 2px;
    font-size: 13px;
  }

  /* Text below image */

  .rental-journey .rj-step .rj-copy,
  .rental-journey .rj-step.rj-reverse .rj-copy {
    grid-column: 2;
    grid-row: 2;
    padding: 0;
  }

  .rental-journey .rj-label {
    font-size: 10px;
    letter-spacing: 1.2px;
  }

  .rental-journey .rj-copy h3 {
    margin: 5px 0 7px;
    font-size: 21px;
    line-height: 1.3;
  }

  .rental-journey .rj-copy p {
    font-size: 14px;
    line-height: 1.7;
  }

  /* Benefits */

  .rental-journey .rj-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px 12px;
    margin-top: 24px;
    padding: 16px 12px;
    border-radius: 14px;
  }

  .rental-journey .rj-benefit,
  .rental-journey .rj-benefit + .rj-benefit {
    gap: 8px;
    border-left: 0;
    padding: 0;
  }

  .rental-journey .rj-benefit-icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    font-size: 17px;
  }

  .rental-journey .rj-benefit strong {
    font-size: 11px;
  }

  .rental-journey .rj-benefit small {
    font-size: 10px;
  }
}

/* EXTRA SMALL PHONES */

@media (max-width: 380px) {
  .rental-journey {
    padding-right: 10px;
    padding-left: 10px;
  }

  .rental-journey .rj-header h2 {
    font-size: 24px;
  }

  .rental-journey .rj-step,
  .rental-journey .rj-step.rj-reverse {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    column-gap: 9px;
  }

  .rental-journey .rj-step .rj-marker {
    width: 33px;
    height: 33px;
    font-size: 12px;
  }

  .rental-journey .rj-timeline::before {
    left: 16px;
  }

  .rental-journey .rj-benefits {
    grid-template-columns: 1fr;
  }
}
/* ======================================
   BIKE RENTAL HEADER
   ====================================== */

#header {
    background: #ffffff;
    position: relative;
    z-index: 100;
}

#header .header-nav {
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
    min-height: 30px;
}

#header .header-top {
    background: #ffffff;
    padding: 12px 0;
}

#header #_desktop_logo img {
    display: block;
    max-width: 125px;
    width: 100%;
    height: auto;
}

#header .header-top > .container > .row {
    display: flex;
    align-items: center;
}

#header .header-top-right {
    align-self: center;
}

/* Navigation links */
#header .top-menu a,
#header .header-nav a {
    transition: color 0.2s ease;
}

#header .top-menu a:hover,
#header .header-nav a:hover {
    color: #ff681f;
}

/* Search field */
#header .search-widget input[type="text"] {
    border-radius: 6px;
    min-height: 36px;
}

/* Account and cart */
#header .user-info a,
#header .blockcart a {
    text-decoration: none;
}

/* Mobile header */
@media (max-width: 767px) {
    #header .header-top {
        padding: 10px 0;
    }

    #header .header-top > .container > .row {
        display: block;
    }

    #header .mobile {
        min-height: 45px;
    }

    #header .top-logo img {
        max-width: 95px;
        max-height: 45px;
        width: auto;
        height: auto;
    }

    #header #menu-icon {
        padding: 8px;
        cursor: pointer;
    }
}
/* Bike rental header: menu and sign-in on one row */
@media (min-width: 768px) {
    #header .header-top-right {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        position: relative;
    }

    #header #_desktop_top_menu {
        flex: 1 1 auto;
        min-width: 0;
    }

    #header #_desktop_top_menu .top-menu {
        display: flex !important;
        align-items: center;
        flex-wrap: nowrap;
        margin: 0;
        padding: 0;
    }

    #header #_desktop_top_menu .top-menu > li {
        flex: 0 0 auto;
    }

    #header #_desktop_user_info {
        display: block !important;
        flex: 0 0 auto;
        margin-left: 12px;
        white-space: nowrap;
    }

    #header #_desktop_user_info .user-info {
        margin: 0;
        padding: 0;
    }

    #header #_desktop_user_info a {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }
}

/* Shape-X registration form */
.shapex-register {
  width: 100%;
  max-width: 680px;
  margin: 24px auto;
  padding: 28px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  box-sizing: border-box;
}

.shapex-register-heading {
  margin-bottom: 26px;
}

.shapex-register-heading h2 {
  margin-bottom: 8px;
  font-size: 25px;
  font-weight: 700;
}

.shapex-register-heading > p {
  line-height: 1.6;
}

.shapex-login-link {
  margin-top: 18px;
}

.shapex-form-field {
  margin-bottom: 18px;
}

.shapex-customer-form input:not([type="checkbox"]):not([type="radio"]),
.shapex-customer-form select {
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  border-radius: 6px;
}

.shapex-form-footer {
  margin-top: 24px;
}

.shapex-create-account {
  display: block;
  width: 100%;
  min-height: 48px;
  float: none;
  border-radius: 6px;
  font-weight: 700;
}

@media (max-width: 767px) {
  .shapex-register {
    max-width: 100%;
    margin: 12px auto;
    padding: 20px 16px;
    border-radius: 8px;
  }

  .shapex-register-heading h2 {
    font-size: 22px;
  }

  .shapex-customer-form input,
  .shapex-customer-form select,
  .shapex-customer-form textarea {
    max-width: 100%;
  }
}