/* CSS to center the arrows and set their rotation origin to their centers */

#cyclist-image {
    width: 60px; /* Set the width to 50% of its original size */
    height: auto; /* Maintain the original aspect ratio */
    }
    
#circle {
position: relative;
    width: 180px; /* Set the width to 50% of its original size */
    top: -15px;
    left: -2px;
    height: auto; /* Maintain the original aspect ratio */
}


#wind-image {
    width: 45px; /* Set the width to 50% of its original size */
    height: auto; /* Maintain the original aspect ratio */
}

#windArrow,
#arrow-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Horizontally center the content */
    height: 100%; /* Ensure it takes up the full height of its parent container */
}

#bearingArrow {
    position: absolute;
    opacity: 1;
    top: 25px;
    transform: scale(0.9); /* Scale to 90% and center horizontally */
    z-index: 1; /* Set a z-index for the bearingArrow */
}


#windArrow {
    position: absolute;
    top: -15px;
    z-index: 0; /* Set a higher z-index for the windArrow to appear above the bearingArrow */
}
    
#windArrow2 {
    position: absolute;
    top: 24px;
    transform: scale(1); /* Scale to 90% and center horizontally */
    z-index: 0; /* Set a higher z-index for the windArrow to appear above the bearingArrow */
}

/* Cookie banner */
.cookie-banner {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: min(92vw, 520px);
    background-color: var(--upet-surface, rgba(14, 18, 28, 0.96));
    color: #f8fafc;
    padding: 16px 18px;
    text-align: center;
    border-radius: 12px;
    z-index: 9999;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

#accept-cookies {
    background-color: #00F2FF;
    color: #000;
    border: none;
    padding: 8px 18px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
}

.tobeat-card {
    background-color: transparent !important; 
    border: none !important; 
    border-radius: 8px !important; 
    color: #FFF;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important; 
    }

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
    z-index: 998; /* Lower than the modal */
    display: flex; /* Use flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

.modal-dialog {
    z-index: 999; /* Higher than the overlay */
    position: relative; /* Ensure it is positioned relative to the overlay */
    margin-top: 100px; /* Add margin to shift it down */
}

#legend {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next line if they exceed the width */
    justify-content: center; /* Centers items horizontally in the row */
    margin-top: 10px; /* Space between chart and legend */
    font-size: 10px;
}

.legend-item {
    display: flex;
    flex-direction: column; /* Stack the color box above the label */
    align-items: center; /* Center items horizontally */
    width: 80px; /* Set a fixed width for each legend item */
    margin: 0 15px; /* Margin between legend items */
}

.color-box {
    display: inline-block;
    width: 30px; /* Width of the color box */
    height: 30px; /* Height of the color box */
    margin-bottom: 4px; /* Space between the color box and label */
}

 

.cookie-link {
    color: #4A89DC; /* Link color to match the button */
    text-decoration: none; /* Remove underline */
}

.cookie-link:hover {
    text-decoration: underline; /* Add underline on hover */
    color: #3a78b8; /* Slightly darker color on hover for effect */
}

  /*Tobeat Colors*/
.bg-upet-0 {
    background-color: #fff; /* Adjust the rgba values and alpha as needed */
    color: #FFF !important;
  }
  
  .bg-upet-1 {
    background-color: #00F2FF !important;
    color: #FFF !important;
  }
  
  .bg-upet-2 {
    background-color: #32D74B !important;
    color: #FFF !important;
  }
  
  .bg-upet-3 {
    background-color: #fb5607 !important;
    color: #FFF !important;
  }
  
  .bg-upet-4 {
    background-color: #F9C80E !important;
    color: #FFF !important;
  }
  
  .bg-upet-5 {
    background-color: #000 !important;
    color: #FFF !important;
  }
  
  .bg-upet-6 {
    background-color: #6d4fbf !important; /* New complementary blue */
    color: #FFF !important;
  }
  
  .bg-upet-7 {
    background-color: #2253ff !important;
    color: #FFF !important;
  }
  
  .bg-upet-8 {
    background-color: #F8F8F8 !important;
    color: #f8f8f8 !important;
  }
  
  
  .bg-upet-9 {
    background-color: #000 !important;
    color: #FFF !important;
  }

  .bg-upet-10 {
    background: linear-gradient(90deg, #F8F8F8, #c6c5c5, #F8F8F8);
    color: #FFF !important;
}

.bg-upet-11 {
  background-color: rgba(255, 255, 255, 0.8) !important; /* 0.8 sets 80% opacity */
  color: #FFF !important;
}

  .bg-garmin-2 {
    background-color: #494848 !important;
    color: #FFF !important;
  }
  

.bg-garmin-1 {
    background-color: #007cc3 !important;
    color: #f8f8f8 !important;
  }
  
  .bg-google-1 {
    background-color: #202124 !important;
    color: #f8f8f8 !important;
  }

  .svg-container {
    height: 150px; /* Set the container's height to your desired size */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .square {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    background: #5236a5; /* Background color (you can change this) */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .svg-container svg {
    align-self: center; /* Vertical centering within the container */
    margin: 0 auto; /* Horizontal centering within the container */
  }
  
  /* Adjust the top position of the left panel to start below the header */
.header {
  height: 80px; /* Adjust based on actual height of the header */
}

#left-panel {
  width: 200px; /* Adjust the width of the left panel */
  z-index: 1040; /* Ensure it stays on top */
  background-color: #1E262F; /* Dark surface */
}

#left-panel a {
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  color: #F8FAFC;
  text-decoration: none;
  border: none;
  box-shadow: none; /* Removes shadow from left panel */
}

#left-panel a.active-nav {
  font-weight: bold;
  color: #00F2FF;
}

#left-panel a i,
#left-panel a span {
  color: #F8FAFC;
}

#left-panel a.active-nav i,
#left-panel a.active-nav span {
  color: #00F2FF;
}

#left-panel .divider {
  background: radial-gradient(
    circle,
    rgba(0, 242, 255, 0.85) 0%,
    rgba(0, 242, 255, 0.35)90%,
    rgba(30, 38, 47, 0) 97%
  ) !important;
}

/* Routine switches: ensure visibility in dark cards */
.routine-switch .form-check-input {
  background-color: #1E262F !important;
  border: 1px solid rgba(248, 250, 252, 0.25) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: none !important;
  position: relative;
  cursor: pointer;
  display: inline-block;
  pointer-events: auto !important;
  opacity: 1 !important;
  z-index: 1;
}
.routine-switch .form-check-input:checked {
  background-color: #00F2FF !important;
  border-color: #00F2FF !important;
}
.routine-switch .form-check-input:disabled {
  opacity: 1 !important;
}
.routine-switch .form-check-input:disabled:checked {
  background-color: #00F2FF !important;
  border-color: #00F2FF !important;
}
.routine-switch .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 242, 255, 0.25) !important;
}
.routine-switch .form-check-input::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #F8FAFC;
  transition: transform 0.2s ease;
}
.routine-switch .form-check-input:checked::before {
  transform: translateX(24px);
  background: #0A0F14;
}


/* Ensure the footer is always at the bottom of the page */
.footer-section {
  position: fixed; /* Fixes the footer at the bottom */
  bottom: 0; /* Anchors the footer to the bottom */
  left: 0;
  width: 100%; /* Full width */
  color: white; /* White text color */
  text-align: center; /* Centers the text */
  z-index: 1000; /* Ensures the footer is above other content */
}

.footer-section a {
  color: white; /* Ensures link is white */
  text-decoration: none; /* Removes underline from link */
}

.footer-section p {
  margin: 0px 0; /* Adjusts spacing of the text */
}

/* Onboarding */
.onboarding-progress {
  display: flex;
  gap: 6px;
  margin: 8px auto 18px;
  max-width: 280px;
  justify-content: center;
  position: relative;
  z-index: 5;
  padding-top: 6px;
}
.onboarding-step-label {
  position: relative;
  z-index: 5;
}
.onboarding-result .content {
  min-height: calc(100vh - 170px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.onboarding-result .content > .row {
  width: 100%;
}
.onboarding-result .onboarding-result-wrap {
  position: relative;
  padding-top: 200px;
}
.onboarding-result .onboarding-gauge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.onboarding-progress-wrap {
  padding-top: 8px;
}
.onboarding-progress .onboarding-step {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: rgba(248, 250, 252, 0.15);
}
.onboarding-progress .onboarding-step.active {
  background: #00F2FF;
  box-shadow: 0 0 12px rgba(0, 242, 255, 0.6);
}
.btn-glow-cyan {
  border-radius: 999px !important;
  box-shadow: 0 8px 18px rgba(0, 242, 255, 0.2), 0 0 12px rgba(0, 242, 255, 0.45);
}
.btn-glow-cyan:hover,
.btn-glow-cyan:focus {
  box-shadow: 0 10px 20px rgba(0, 242, 255, 0.3), 0 0 14px rgba(0, 242, 255, 0.6);
}
.onboarding-benefits {
  display: grid;
  gap: 8px;
  margin: 16px 0 22px;
  text-align: left;
}
.onboarding-benefits .benefit-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  opacity: 0.9;
}
.onboarding-benefits .benefit-item i {
  color: #00F2FF;
}
.onboarding-step-label {
  font-size: 12px;
  opacity: 0.65;
  text-align: center;
  margin-top: 6px;
}
.onboarding-name-input {
  font-size: 20px !important;
  text-align: center;
  padding: 14px 16px !important;
  border-radius: 14px !important;
}
.onboarding-species {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.onboarding-species .species-btn {
  border: 1px solid rgba(248, 250, 252, 0.2);
  border-radius: 14px;
  padding: 12px 10px;
  background: rgba(30, 38, 47, 0.6);
  color: #F8FAFC;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.onboarding-species .species-btn.active {
  border-color: #00F2FF;
  box-shadow: 0 0 14px rgba(0, 242, 255, 0.35);
}
.onboarding-photo {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 2px dashed rgba(0, 242, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px auto 0;
  overflow: hidden;
  color: #F8FAFC;
  background: rgba(30, 38, 47, 0.45);
  box-shadow: 0 0 18px rgba(0, 242, 255, 0.25);
}
.onboarding-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.onboarding-card {
  background: rgba(30, 38, 47, 0.55);
  border-radius: 18px;
  padding: 16px;
  border: 1px solid rgba(248, 250, 252, 0.08);
  box-shadow: 0 8px 16px rgba(10, 15, 20, 0.25);
}
.onboarding-card.selected {
  box-shadow: 0 0 18px rgba(0, 242, 255, 0.25);
  border-color: rgba(0, 242, 255, 0.5);
}
.onboarding-card .card-icon {
  font-size: 22px;
  color: #00F2FF;
}
.segmented-control {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.segmented-control .seg-btn {
  border: 1px solid rgba(248, 250, 252, 0.2);
  border-radius: 999px;
  padding: 8px 6px;
  background: rgba(15, 20, 26, 0.6);
  color: #F8FAFC;
  font-size: 13px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.segmented-control .seg-btn.active {
  border-color: rgba(0, 242, 255, 0.7);
  box-shadow: 0 0 14px rgba(0, 242, 255, 0.35);
}
.segmented-control .seg-btn.state-no {
  color: #FACC15;
}
.segmented-control .seg-btn.state-unknown {
  color: #CBD5F5;
}
.onboarding-select-grid {
  display: grid;
  gap: 12px;
}
.onboarding-option-card {
  border-radius: 20px;
  border: 1px solid rgba(248, 250, 252, 0.15);
  background: rgba(30, 38, 47, 0.55);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.onboarding-option-card .option-icon {
  font-size: 22px;
  color: #00F2FF;
}
.onboarding-option-card .option-title {
  font-size: 15px;
}
.onboarding-option-card .option-subtitle {
  font-size: 12px;
  opacity: 0.65;
}
.onboarding-option-card.selected {
  border-color: rgba(0, 242, 255, 0.7);
  box-shadow: 0 0 16px rgba(0, 242, 255, 0.35);
  transform: scale(1.02);
}
.onboarding-option-card.selected::after {
  content: "✓";
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 14px;
  color: #00F2FF;
}
.onboarding-gauge {
  width: 180px;
  height: 180px;
  margin: 8px auto 12px;
  position: relative;
}
.onboarding-gauge svg {
  transform: rotate(-90deg);
  display: block;
  position: absolute;
  inset: 0;
}
.onboarding-gauge .gauge-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(3px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.onboarding-gauge .gauge-text .exposure-score,
.onboarding-gauge .gauge-text h1 {
  line-height: 1;
}
.onboarding-gauge .gauge-text h1 {
  margin: 0;
}
.onboarding-result-card {
  background: rgba(30, 38, 47, 0.6);
  border-radius: 18px;
  padding: 14px;
  border: 1px solid rgba(248, 250, 252, 0.08);
}

.onboarding-hero {
  background: url('/images/2.png') center/cover no-repeat fixed;
}
.onboarding-hero::before {
  content: '';
  position: fixed;
  inset: 0;
  background: transparent;
  pointer-events: none;
}
.onboarding-hero #page,
.onboarding-hero .page-content,
.onboarding-hero .content,
.onboarding-hero .list-group,
.onboarding-hero .row,
.onboarding-hero .col-12 {
  background: transparent !important;
}
.onboarding-hero-layer {
  position: fixed;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
}
.onboarding-hero-inner {
  max-width: 100%;
  padding: 0;
}
.onboarding-hero-content {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
}

@media (orientation: landscape) {
  .onboarding-screen {
    overflow: auto !important;
  }
  .onboarding-screen .onboarding-progress,
  .onboarding-screen .onboarding-step-label {
    z-index: 5;
  }
  .onboarding-screen .onboarding-progress {
    position: relative;
    margin-top: 8px;
  }
  .onboarding-screen .onboarding-step-label {
    position: relative;
    margin-bottom: 8px;
  }
  .onboarding-screen .page-content {
    padding-top: 12px !important;
  }
  .onboarding-screen .page-content,
  .onboarding-screen .content {
    min-height: auto !important;
  }
  .onboarding-screen .onboarding-gauge {
    width: 140px;
    height: 140px;
  }
  .onboarding-screen .onboarding-name-input {
    font-size: 18px !important;
  }
  .onboarding-screen .onboarding-photo {
    width: 110px;
    height: 110px;
  }
  .onboarding-screen .onboarding-card,
  .onboarding-screen .onboarding-option-card {
    padding: 12px;
  }
  .onboarding-hero .onboarding-hero-layer {
    position: relative;
    min-height: 100vh;
  }
  .onboarding-hero .onboarding-hero-content {
    min-height: 100vh;
    align-items: center;
    justify-content: center;
  }
  .onboarding-hero .content,
  .onboarding-hero .col-12 {
    text-align: center;
  }
}
.onboarding-screen .onboarding-progress {
  margin-top: 78px;
}
.onboarding-screen .onboarding-step-label {
  margin-top: -10px;
}