:root {
    --color-prime: pink;
    --color-prime-dark: #e73370;
    --color-prime-blue: #526DE8;
    --color-prime-blue-light: #97A9FB;
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  color: #333;
}
header {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  align-items: center;
}
.logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: #e73370;
}
.step {
  text-align: center;
  padding: 1rem;
}


.popular {
  background-color: #e0f0ff;
  color: #0077cc;
  font-size: 0.75rem;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  margin-bottom: 4px;
  display: inline-block;
}

.tabs {
  display: flex;
  justify-content: space-around;
  margin-bottom: 1rem;
}
.tab {
  flex: 1;
  text-align: center;
  padding: 0.5rem;
  border-bottom: 2px solid transparent;
}
.tab.active {
  border-color: #e73370;
  font-weight: bold;
}
.footer {
  padding: 1rem;
  background: linear-gradient(to right, #1f3159, #2a496d);
  color: white;
  text-align: center;
}
.footer a {
  color: #fff;
  text-decoration: none;
  margin: 0 0.5rem;
  display: inline-block;
}
.next-button {
  background: #e73370;
  color: white;
  padding: 1rem;
  margin: 1rem;
  text-align: center;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
}

.border\:red {border: 1px red solid}

.stepper {padding: 0; display: flex; padding: 0}
.stepper\:title {display: none; color: var(--color-prime-blue)}
.stepper\:title span {display: none}
.stepper\:item {display: flex; flex-direction: column; flex: 1}
.stepper\:item:not(.active):last-child {flex: 0}
.stepper\:item.active {flex: 3}
ol.stepper {list-style-type: none;}
.stepper\:item span {display: flex; align-items: center}
.stepper\:item span::after {display: inline-block; content: ""; border-top: 2px solid var(--color-prime-blue-light); flex: 1; margin: 0 10px}
.stepper\:item:last-child span::after {display: none}
.stepper\:item.active .stepper\:title {display: inline-block}
.stepper\:item ion-icon {color: var(--color-prime-blue); width: 1.5rem, height: 1.5rem}

.bike-section {text-align: center; position: relative}
.bike-section .bike {width: 100%; position: relative; z-index: 1}
.bike-section .marker {position: absolute; z-index: 2; width: 1rem; height: 1rem}

/* .packages {display: flex; overflow-x: scroll; gap: 0.5rem}

.package {position: relative; display: flex; flex-direction: column; flex: 0 0 25%; border-style: solid; border-width: 1px 1px 4px 1px; border-color: white; border-radius: 8px; background: white; justify-content: space-between}
.package.selected {border-color: red} */

.category-container {border-bottom: 1px solid var(--color-prime); gap: 0.5rem; display: flex}
.category\:option {border-bottom: 3px solid transparent}
.category\:option.selected {border-color: var(--color-prime-dark)}
.category\:option svg {width: 1rem; height: 1rem}

.service\:option {background: white; border-style: solid; border-width: 1px 1px 4px 1px; border-color: white; border-radius: 10px}
.service\:option.selected {border-color: var(--color-prime-dark)}
.service\:option ion-icon {width: 2rem; height: 2rem}

.flex-row {display: flex; flex-direction: row}
.flex-column {display: flex; flex-direction: column}
.no-scrollbar::-webkit-scrollbar {display: none}

.banner {color: blue; position: absolute; display: inline-block; background-color: #cceeff; padding: 2px 6px; top: -4px; border-radius: 0 0 4px 4px; text-transform: uppercase}
.banner::before {content: ''; position: absolute; left: -4px; top: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 4px 4px; border-color: transparent transparent blue transparent}
.banner::after {content: ''; position: absolute; right: -4px; top: 0; width: 0; height: 0; border-style: solid; border-width: 4px 0 0 4px; border-color: transparent transparent transparent blue}