/* 
   -------------------------------------------------------------
   LIGHTER BRAND COLORS:
   Ebony (#4a3b57)
   Purple (#7f74a3)
   Violet (#9c80d3)
   Purple Haze (#e4d8e8)
   -------------------------------------------------------------
*/

/* 1) RESET & GLOBAL
   ------------------------------------------------------------- */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: Arial, sans-serif;
  background-color: #4a3b57; /* Ebony background */
  color: #ffffff; /* White text on Ebony by default */
}

/* 2) MAP
   ------------------------------------------------------------- */
#rp-map {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 55vh; /* Default map height */
  z-index: 1;
  transition: height 0.3s ease-in-out;
}

/* 3) MAIN BOTTOM PANEL (Start UI)
   ------------------------------------------------------------- */
#rp-start-ui {
  position: fixed;
  top: 55vh;
  bottom: 0;
  left: 0;
  right: 0;
  background: #e4d8e8; /* Purple Haze */
  color: #4a3b57;      /* Ebony text on lighter background */
  z-index: 2;
  display: flex;
  flex-direction: column;
  transition: top 0.3s ease-in-out;
  border-top: 2px solid #7f74a3; /* Purple accent */
}

/* 4) TOP BAR
   ------------------------------------------------------------- */
#rp-top-bar {
  flex: 0 0 40px;
  background: #4a3b57; /* Ebony */
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #7f74a3; /* Purple border */
}

/* Draggable bar line in the top bar */
#rp-bar-line {
  width: 40px;
  height: 4px;
  background: #7f74a3; 
  border-radius: 2px;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
}

/* Finish info (ETA, etc.) in the top bar */
#rp-finish-info {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
}

/* 5) 3-DOTS MENU & DROPDOWN
   ------------------------------------------------------------- */
#rp-menu-button {
  position: absolute;
  top: 5px;
  right: 5px;
  background: none;
  border: none;
  width: 24px;
  height: 24px;
  cursor: pointer;
  color: #ffffff;
  padding: 0;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

#rp-menu-dropdown {
  display: none;
  position: absolute;
  top: 80px;
  right: 5px;
  background: #e4d8e8; /* Purple Haze */
  border: 1px solid #7f74a3; /* Purple */
  border-radius: 4px;
  padding: 5px;
  z-index: 999999;
  transform: translateY(20px);
}

#rp-fetch-db-btn {
  width: 100%;
  background: #e4d8e8; 
  border: none;
  padding: 5px;
  text-align: left;
  color: #4a3b57;
  cursor: pointer;
}
#rp-fetch-db-btn:hover {
  background: #7f74a3; /* Purple */
  color: #fff;
}

/* 6) ADDRESS LIST & ROUTE INFO
   ------------------------------------------------------------- */
#rp-address-list {
  flex: 1 1 auto;
  overflow-y: auto;
  margin: 0;
  padding: 0 0 80px 0; /* extra space so the last items aren't hidden behind bottom buttons */
}

#rp-route-info {
  flex: 0 0 auto;
  padding: 10px;
  color: #4a3b57; /* Ebony text */
}

/* 7) BOTTOM ROUTE BUTTONS
   ------------------------------------------------------------- */
#rp-route-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #4a3b57; /* Ebony */
  box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
  z-index: 3;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#rp-route-buttons button {
  flex: 1 1 auto;
  background: #9c80d3; /* Violet */
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 8px;
  font-size: 14px;
  transition: background 0.3s ease-in-out;
}
#rp-route-buttons button:hover {
  background: #7f74a3; /* Purple on hover */
}

/* 8) DAY PANEL OVERLAY
   ------------------------------------------------------------- */
#rp-day-panel {
  display: none;
  position: fixed;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(74,59,87,0.9); /* Ebony with opacity (approx #4a3b57) */
  z-index: 9998;
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
  color: #ffffff;
}
#rp-day-panel.open {
  display: block;
}
#rp-day-panel h3 {
  margin: 0 0 15px;
}
#rp-day-panel-close {
  position: absolute;
  top: 5px; 
  right: 10px;
  font-size: 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #ffffff;
}

/* Individual “day box” items in the panel */
.rp-day-box {
  display: block;
  margin-bottom: 5px;
  padding: 8px;
  font-weight: bold;
  border-radius: 5px;
  color: #ffffff;
  background-color: #7f74a3; /* Purple by default */
  cursor: pointer;
}
.rp-day-today {
  background-color: #9c80d3; /* Violet highlight for “today” */
}

/* Optional states for day boxes if you track completion, etc. */
.rp-day-box--complete {
  background-color: #95d59e; /* example success greenish */
}
.rp-day-box--partial {
  background-color: #FFD58B; /* partial highlight */
}

/* 9) LEG UI & EDIT UI (Bottom Panels)
   ------------------------------------------------------------- */
/* Shared pinned-panel container — now Ebony with white text */
.rp-ui {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #4a3b57; /* Ebony for the main container */
  color: #ffffff; /* White text on Ebony */
  border-top: 2px solid #7f74a3; /* Purple accent border */
  transition: top 0.3s ease-in-out;
  z-index: 999999999;
  box-sizing: border-box;
}

/* Panel header (drag handle) */
.rp-ui-header {
  position: relative;
  height: 40px;
  background: #4a3b57; /* Ebony */
  border-bottom: 1px solid #7f74a3; /* Purple */
  cursor: pointer;
}
.rp-ui-handle {
  width: 40px;
  height: 4px;
  background: #7f74a3;
  border-radius: 2px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 6px;
}

/* Shared content region 
   - We'll give it a panel-like look in Purple Haze (#e4d8e8)
     so it's not all Ebony. This helps with readability. 
*/
.rp-ui-content {
  position: relative;
  width: 100%;
  height: calc(100% - 40px);
  overflow-y: auto;
  box-sizing: border-box;

  /* A "card" style panel inside the Ebony container */
  background-color: #e4d8e8; /* Purple Haze */
  color: #4a3b57; /* Ebony text on that lighter background */
  margin: 10px;
  border-radius: 6px;
  padding: 10px;
}

/* Close button inside these UIs */
.rp-close-button {
  position: absolute;
  right: 8px;
  top: 5px;
  width: 24px;
  height: 24px;
  background: #7f74a3; /* Purple */
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Leg UI + Edit UI IDs can simply inherit the .rp-ui styling */
#rp-leg-ui,
#rp-leg-ui-old,
#rp-edit-ui {
  will-change: transform, top;
}

/* Draggable “drag” bars for leg/edit UI */
#rp-leg-drag,
#rp-edit-drag {
  /* Inherit from .rp-ui-header if you add that class in JS */
}

/* Some heading and paragraph spacing in these panels */
.rp-ui-content h3 {
  margin: 0 0 8px;
  font-size: 16px;
  border-bottom: 1px solid #7f74a3;
  padding-bottom: 4px;
}
.rp-ui-content p {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.4;
}

/* 10) LOADING OVERLAY
   ------------------------------------------------------------- */
#rp-loading-overlay {
  display: none;
  position: fixed;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 999999;
  color: #fff;
  text-align: center;
}
.rp-loading-spinner {
  margin-top: 40vh;
  width: 40px;
  height: 40px;
  border: 5px solid #f3f3f3; /* light border */
  border-radius: 50%;
  border-top: 5px solid #9c80d3; /* Violet highlight */
  animation: spin 1s linear infinite;
  margin-left: auto;
  margin-right: auto;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#rp-loading-text {
  margin-top: 10px;
  font-size: 15px;
}

/* 11) STOP ITEMS
   ------------------------------------------------------------- */
.rp-stop-item {
  border-bottom: 1px solid #ccc;
  padding: 6px 0;
  cursor: pointer;
  background: #e4d8e8; /* Purple Haze */
  color: #4a3b57;      /* Ebony text */
}
.rp-stop-line {
  position: relative;
  min-height: 36px;
  line-height: 1.2;
  overflow: hidden;
}
.rp-stop-left {
  display: block;
  margin-right: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rp-stop-right {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-weight: bold;
}

/* Delivered/Failed states if you want distinct backgrounds:
   You can swap these for brand-friendly highlights if desired. */
.rp-delivered {
  background: #d4edda; /* success green */
}
.rp-failed {
  background: #f8d7da; /* error pink/red */
}

/* 12) FORM & INPUTS (Autocomplete, etc.)
   ------------------------------------------------------------- */
#rp-address-search, 
#rp-start-location-input {
  background-color: transparent !important;
  border: 1px solid #4a3b57 !important; /* Ebony border */
  border-radius: 8px !important;
  color: #4a3b57 !important;
  padding: 4px 8px !important;
  outline: none !important;
}
#rp-address-search::placeholder,
#rp-start-location-input::placeholder {
  color: #4a3b57 !important;
}

/* .pac-container => google Autocomplete panel; ensure on top. */
.pac-container {
  z-index: 999999 !important;
}

/* 13) DISABLE POINTER EVENTS (if needed in transitions)
   ------------------------------------------------------------- */
.no-pointer-events {
  pointer-events: none !important;
}

/* 14) ANIMATED “NAVIGATE” BUTTON
   ------------------------------------------------------------- */
.rp-navigate-button {
  font-family: inherit;
  font-size: 16px;
  background: #9c80d3; /* Violet */
  color: #ffffff;
  padding: 0.7em 1em;
  padding-left: 0.9em;
  display: inline-flex;
  align-items: center;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.2s;
  cursor: pointer;
  position: relative;
}
.rp-navigate-button .svg-wrapper-1,
.rp-navigate-button .svg-wrapper {
  display: inline-block;
}
.rp-navigate-button span {
  display: block;
  margin-left: 0.3em;
  transition: all 0.3s ease-in-out;
  font-size: 16px;
}
.rp-navigate-button svg {
  display: block;
  transform-origin: center center;
  transition: transform 0.3s ease-in-out;
}
/* Hover “wiggle” animation for the icon */
.rp-navigate-button:hover .svg-wrapper {
  animation: fly-1 0.6s ease-in-out infinite alternate;
}
.rp-navigate-button:hover svg {
  transform: translateX(1.2em) rotate(45deg) scale(1.1);
}
.rp-navigate-button:hover span {
  transform: translateX(5em);
}
.rp-navigate-button:active {
  transform: scale(0.95);
}
@keyframes fly-1 {
  from {
    transform: translateY(0.1em);
  }
  to {
    transform: translateY(-0.1em);
  }
}

/* 15) REUSABLE ACTION BUTTONS (Delivered, Failed, Edit, etc.)
   ------------------------------------------------------------- */
.rp-action-button {
  display: inline-block;
  background: #7f74a3; /* Purple */
  color: #ffffff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 8px 10px;
  font-size: 14px;
  transition: background 0.3s ease-in-out;
  text-align: center;
  margin-bottom: 5px; /* spacing if stacked */
}
.rp-action-button:hover {
  background: #9c80d3; /* Violet hover */
}
/* Variation for “Navigate” => default Violet (#9c80d3), hover => Purple (#7f74a3) */
.rp-action-navigate {
  background: #9c80d3; 
}
.rp-action-navigate:hover {
  background: #7f74a3;
}
/* “Delivered” vs “Failed” vs “Edit” can share .rp-action-button or define different states if you prefer */
.rp-action-delivered {
  background: #7f74a3;
}
.rp-action-delivered:hover {
  background: #9c80d3;
}
.rp-action-failed {
  background: #7f74a3;
}
.rp-action-failed:hover {
  background: #9c80d3;
}
.rp-action-edit {
  background: #7f74a3;
}
.rp-action-edit:hover {
  background: #9c80d3;
}

/* 16) “ADD/REMOVE DB” BUTTONS
   -------------------------------------------------------------
   (These often appear in the DB section: .rp-add-db, .rp-remove-db)
*/
.rp-add-db,
.rp-remove-db,
.button {
  /* Overwrite default browser styles (which often appear “blue” on Windows) */
  background: #7f74a3; /* Purple */
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 5px;
  transition: background 0.3s ease-in-out;
}
.rp-add-db:hover,
.rp-remove-db:hover,
.button:hover {
  background: #9c80d3; /* Violet hover */
}