*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
  tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.inset-0 {
  inset: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-right-2 {
  right: -0.5rem;
}
.-top-2 {
  top: -0.5rem;
}
.right-0 {
  right: 0px;
}
.z-50 {
  z-index: 50;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-4 {
  margin-top: 1rem;
}
.block {
  display: block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.h-2 {
  height: 0.5rem;
}
.h-3 {
  height: 0.75rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-8 {
  height: 2rem;
}
.h-full {
  height: 100%;
}
.max-h-32 {
  max-height: 8rem;
}
.max-h-60 {
  max-height: 15rem;
}
.max-h-\[80vh\] {
  max-height: 80vh;
}
.w-3 {
  width: 0.75rem;
}
.w-4 {
  width: 1rem;
}
.w-5 {
  width: 1.25rem;
}
.w-8 {
  width: 2rem;
}
.w-80 {
  width: 20rem;
}
.w-full {
  width: 100%;
}
.min-w-0 {
  min-width: 0px;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-md {
  max-width: 28rem;
}
.flex-1 {
  flex: 1 1;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes bounce {

  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }

  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}
.animate-bounce {
  animation: bounce 1s infinite;
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-pointer {
  cursor: pointer;
}
.resize {
  resize: both;
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.overflow-y-auto {
  overflow-y: auto;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / 1);
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / 1);
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}
.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / 1);
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / 1);
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / 1);
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-gray-700 {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / 1);
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.border-green-200 {
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / 1);
  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}
.border-green-400 {
  --tw-border-opacity: 1;
  border-color: rgb(74 222 128 / 1);
  border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
}
.border-red-400 {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / 1);
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}
.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / 1);
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-yellow-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 240 138 / 1);
  border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
}
.border-yellow-400 {
  --tw-border-opacity: 1;
  border-color: rgb(250 204 21 / 1);
  border-color: rgb(250 204 21 / var(--tw-border-opacity, 1));
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / 1);
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / 1);
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / 1);
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / 1);
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / 1);
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / 1);
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / 1);
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-gray-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / 1);
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / 1);
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / 1);
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-green-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / 1);
  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));
}
.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / 1);
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / 1);
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-green-900\/20 {
  background-color: rgb(20 83 45 / 0.2);
}
.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / 1);
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / 1);
  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
}
.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / 1);
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-900\/20 {
  background-color: rgb(127 29 29 / 0.2);
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / 1);
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-yellow-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / 1);
  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}
.bg-yellow-900\/20 {
  background-color: rgb(113 63 18 / 0.2);
}
.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-6 {
  padding: 1.5rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.capitalize {
  text-transform: capitalize;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / 1);
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / 1);
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / 1);
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / 1);
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / 1);
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / 1);
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / 1);
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / 1);
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / 1);
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / 1);
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / 1);
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / 1);
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / 1);
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / 1);
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / 1);
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / 1);
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / 1);
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / 1);
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / 1);
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.text-yellow-600 {
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / 1);
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}
.text-yellow-800 {
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / 1);
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.\[out\:json\] {
  out: json;
}
.\[timeout\:25\] {
  timeout: 25;
}

/* 🚀 Mobile Responsiveness - Prevent horizontal scroll */
html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
        "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
        "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #1a1a2e !important;
    color: white;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    position: relative;
}

/* Prevent all elements from causing horizontal scroll */
* {
    max-width: 100%;
    box-sizing: border-box;
}

#root {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

/* 🌙 Proteção Anti-Ofuscamento Noturno - Evitar telas brancas perigosas para motoristas */
* {
    /* Força tema escuro global */
    color-scheme: dark !important;
}

/* Sobrescrever qualquer fundo branco perigoso */
*[style*="background: white"],
*[style*="background-color: white"],
*[style*="background: #fff"],
*[style*="background-color: #fff"],
*[style*="background: #ffffff"],
*[style*="background-color: #ffffff"] {
    background: #1a1a2e !important;
    color: white !important;
}

/* Loading screens e splash screens seguros */
.loading, .splash, .spinner {
    background: #1a1a2e !important;
    color: #FFD700 !important;
}

/* Modals e overlays seguros */
.modal, .overlay, .popup, .dropdown {
    background: #1a1a2e !important;
    color: white !important;
}

/* Dashboard Modal System - Z-Index Hierarchy */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 8000;
    animation: modal-fade-in 0.2s ease;
}

.modal-content {
    background: white;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    position: relative;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
    border-radius: 12px 12px 0 0;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    padding: 5px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.modal-close-btn:hover {
    background: #e9ecef;
    color: #333;
}

@keyframes modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
        monospace;
}


/* 📱 Mobile-First Responsive Rules - Eliminate Horizontal Scroll */
.container, 
.wrapper,
.content,
.main,
.page,
.section,
div[class*="container"],
div[class*="wrapper"] {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Fix for map containers */
.mapboxgl-map,
.map-container,
[class*="map"],
[id*="map"] {
    max-width: 100vw !important;
    overflow: hidden !important;
}

/* Fix for sidebars and panels */
.sidebar,
.panel,
.drawer,
[class*="sidebar"],
[class*="panel"] {
    max-width: 100vw;
    box-sizing: border-box;
}

/* Responsive images and media */
img,
video,
canvas,
iframe {
    max-width: 100%;
    height: auto;
}

/* Fix for tables on mobile */
table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

/* Mobile viewport optimization */
@media screen and (max-width: 768px) {
    body {
        padding: 0;
        margin: 0;
    }
    
    /* Ensure no element exceeds viewport */
    * {
        max-width: 100vw;
    }
    
    /* Fix for fixed/absolute positioned elements */
    .fixed,
    .absolute,
    [style*="position: fixed"],
    [style*="position: absolute"] {
        max-width: 100vw;
        left: 0;
        right: 0;
    }
}

/* Tablet viewport optimization */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    body {
        padding: 0;
        margin: 0;
    }
    
    * {
        max-width: 100vw;
    }
}
.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}
.hover\:border-blue-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / 1);
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.hover\:bg-blue-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / 1);
  background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / 1);
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / 1);
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / 1);
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / 1);
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / 1);
  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(153 27 27 / 1);
  background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1));
}
.hover\:text-blue-600:hover {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / 1);
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-800:hover {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / 1);
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-600:hover {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / 1);
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / 1);
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.focus\:border-transparent:focus {
  border-color: transparent;
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-blue-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:bg-gray-400:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / 1);
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}


/**
 * Mobile Responsive CSS - Eliminate Horizontal Scroll
 * KingRoad GPS - Professional Truck Navigation
 */

/* 🚀 CRITICAL: Prevent horizontal scroll on all devices */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Apply box-sizing to all elements */
*, *::before, *::after {
    box-sizing: border-box !important;
}

/* Root container must not overflow */
#root {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* Main app container */
.App {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* 📱 MOBILE DEVICES (320px - 480px) */
@media screen and (max-width: 480px) {
    body {
        font-size: 14px;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Ensure all containers fit viewport */
    .container,
    .wrapper,
    .content,
    .main-content,
    div[class*="container"],
    div[class*="wrapper"] {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Map container mobile fix */
    .map-container,
    .mapboxgl-map,
    [class*="map-"],
    [id*="map"] {
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    /* Sidebar/drawer on mobile */
    .sidebar,
    .drawer,
    [class*="sidebar"],
    [class*="drawer"] {
        max-width: 85vw !important;
    }
    
    /* Buttons and inputs */
    button,
    input,
    select,
    textarea {
        max-width: 100% !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
    
    /* Tables responsive */
    table {
        display: block !important;
        overflow-x: auto !important;
        width: 100% !important;
    }
    
    /* Images responsive */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* 📱 SMALL TABLETS (481px - 768px) */
@media screen and (min-width: 481px) and (max-width: 768px) {
    body {
        font-size: 15px;
    }
    
    .container,
    .wrapper,
    div[class*="container"] {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    .map-container,
    .mapboxgl-map {
        width: 100vw !important;
        max-width: 100vw !important;
    }
}

/* 📱 TABLETS (769px - 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    body {
        font-size: 16px;
    }
    
    .container,
    .wrapper {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    
    .map-container {
        width: 100% !important;
        max-width: 100vw !important;
    }
}

/* 🖥️ DESKTOP (1025px+) */
@media screen and (min-width: 1025px) {
    .container,
    .wrapper {
        max-width: 1920px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* 🔧 FIX COMMON OVERFLOW CAUSES */

/* Fixed positioned elements */
[style*="position: fixed"],
.fixed {
    max-width: 100vw !important;
}

/* Absolute positioned elements */
[style*="position: absolute"],
.absolute {
    max-width: 100vw !important;
}

/* Flexbox containers */
.flex,
[class*="flex-"] {
    flex-wrap: wrap !important;
    max-width: 100vw !important;
}

/* Grid containers */
.grid,
[class*="grid-"] {
    max-width: 100vw !important;
}

/* Modals and overlays */
.modal,
.overlay,
.popup,
.dialog {
    max-width: 95vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Forms */
form {
    width: 100% !important;
    max-width: 100vw !important;
}

/* Pre and code blocks */
pre,
code {
    overflow-x: auto !important;
    max-width: 100% !important;
}

/* Iframes */
iframe {
    max-width: 100% !important;
    width: 100% !important;
}

/* SVG */
svg {
    max-width: 100% !important;
    height: auto !important;
}

/* Canvas */
canvas {
    max-width: 100% !important;
}

/* 🎯 SPECIFIC COMPONENT FIXES */

/* Dashboard widgets */
.widget,
[class*="widget"],
.dashboard-item {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Route panel */
.route-panel,
[class*="route-panel"] {
    max-width: 100vw !important;
}

/* POI markers */
.poi-marker,
[class*="marker"] {
    max-width: 48px !important;
}

/* Navigation menu */
.nav-menu,
[class*="nav-"],
.menu {
    max-width: 100vw !important;
}

/* 🛡️ EMERGENCY OVERFLOW PREVENTION */
/* If all else fails, these rules catch everything */
body > *,
#root > *,
.App > * {
    max-width: 100vw !important;
}

/* Prevent any margin from causing overflow */
body > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 📊 PERFORMANCE OPTIMIZATIONS FOR MOBILE */
@media screen and (max-width: 768px) {
    /* Reduce animations on mobile */
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.2s !important;
    }
    
    /* Optimize touch targets */
    button,
    a,
    input[type="button"],
    input[type="submit"] {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Prevent text size adjustment on orientation change */
    html {
        -webkit-text-size-adjust: 100% !important;
        -moz-text-size-adjust: 100% !important;
             text-size-adjust: 100% !important;
    }
}

/* Smooth transition animations to prevent flickering */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.App {
    text-align: center;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
}

.App-logo {
    height: 40vmin;
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    .App-logo {
        animation: App-logo-spin infinite 20s linear;
    }
}

.App-header {
    background-color: #0f0f10;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: white;
}

.App-link {
    color: #61dafb;
}

@keyframes App-logo-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* KingRoad - Paleta da Família King */
:root {
  --bg-primary: #F5EAD2;
  --bg-jupiter: #EFE3C0;
  --border-primary: #5A3B1F;
  --accent-gold: #C9A14B;
  --text-primary: #3B2A1A;
  --text-secondary: #7A5F40;
  --button-bg: #5A3B1F;
  --button-text: #F5EAD2;
  --highlight: #A67C4F;
  --map-route: #C0933C;
  --alert-warning: #D98324;
  --alert-danger: #A23E2B;
  --shadow-soft: rgba(0, 0, 0, 0.2);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(to bottom, #F5EAD2, #EFE3C0);
  background: linear-gradient(to bottom, var(--bg-primary), var(--bg-jupiter));
  color: #3B2A1A;
  color: var(--text-primary);
  height: 100vh;
  overflow: hidden;
}

.gradient-button {
  background: linear-gradient(to right, #C9A14B, #A67C4F);
  background: linear-gradient(to right, var(--accent-gold), var(--highlight));
  border: none;
  color: #F5EAD2;
  color: var(--button-text);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gradient-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  box-shadow: 0 8px 16px var(--shadow-soft);
}

.card-elegant {
  background: #F5EAD2;
  background: var(--bg-primary);
  border: 1px solid #5A3B1F;
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 12px var(--shadow-soft);
  padding: 1rem;
  margin: 0.5rem 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-elegant:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  box-shadow: 0 6px 16px var(--shadow-soft);
}

.text-gradient {
  background: linear-gradient(45deg, #C9A14B, #A67C4F);
  background: linear-gradient(45deg, var(--accent-gold), var(--highlight));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: bold;
}
/* Truck Configuration Panel Styles */

.truck-config-panel {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}

/* Section Navigation */
.section-nav {
  display: flex;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  overflow-x: auto;
}

.section-nav-btn {
  flex: 1 1;
  min-width: 120px;
  padding: 16px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-bottom: 3px solid transparent;
}

.section-nav-btn:hover {
  background: #e9ecef;
}

.section-nav-btn.active {
  background: white;
  border-bottom-color: #007bff;
}

.section-icon {
  font-size: 1.5rem;
}

.section-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: #6c757d;
}

.section-nav-btn.active .section-label {
  color: #007bff;
  font-weight: bold;
}

/* Section Content */
.section-content {
  flex: 1 1;
  padding: 24px;
  overflow-y: auto;
}

.config-section h3 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-description {
  margin: 0 0 24px 0;
  color: #7f8c8d;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Form Groups */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  color: #2c3e50;
  font-weight: 500;
  font-size: 0.95rem;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 12px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #007bff;
}

.form-group input.error {
  border-color: #dc3545;
}

.form-group small {
  display: block;
  margin-top: 4px;
  color: #6c757d;
  font-size: 0.8rem;
}

.error-text {
  color: #dc3545;
  font-size: 0.8rem;
  margin-top: 4px;
  display: block;
}

/* Checkbox Groups */
.checkbox-group {
  margin: 20px 0;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 12px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.checkbox-label:hover {
  background: #f8f9fa;
}

.checkbox-label input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.checkmark {
  width: 20px;
  height: 20px;
  border: 2px solid #007bff;
  border-radius: 4px;
  position: relative;
  flex-shrink: 0;
  margin-top: 2px;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
  content: '✓';
  position: absolute;
  top: -2px;
  left: 2px;
  color: #007bff;
  font-weight: bold;
  font-size: 14px;
}

/* Grids */
.dimensions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 24px;
}

.preferences-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.preference-item {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 16px;
}

.preference-info {
  flex: 1 1;
}

.preference-info strong {
  display: block;
  color: #2c3e50;
  margin-bottom: 4px;
}

.preference-info small {
  color: #6c757d;
}

.fuel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.compliance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 24px;
}

/* Dimension Preview */
.dimension-preview {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.dimension-preview h4 {
  margin: 0 0 16px 0;
  color: #2c3e50;
}

.truck-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.truck-icon {
  font-size: 3rem;
}

.truck-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
  font-family: monospace;
  font-size: 0.9rem;
  color: #495057;
}

/* Fuel Section */
.fuel-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e9ecef;
}

.fuel-section h4 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 1.1rem;
}

/* Compliance Info */
.compliance-info {
  margin-top: 24px;
}

.info-card {
  background: #e8f4fd;
  border: 1px solid #bee5eb;
  border-radius: 8px;
  padding: 16px;
}

.info-card h4 {
  margin: 0 0 12px 0;
  color: #0c5460;
  font-size: 1rem;
}

.info-card ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.info-card li {
  padding: 4px 0;
  color: #0c5460;
  font-size: 0.9rem;
}

/* Action Buttons */
.config-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

.back-btn {
  background: #6c757d;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.back-btn:hover {
  background: #5a6268;
}

.save-config-btn {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
}

.save-config-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.6);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .section-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  
  .section-nav-btn {
    min-width: 100px;
    padding: 12px 8px;
  }
  
  .section-content {
    padding: 16px;
  }
  
  .dimensions-grid {
    grid-template-columns: 1fr;
  }
  
  .fuel-grid {
    grid-template-columns: 1fr;
  }
  
  .compliance-grid {
    grid-template-columns: 1fr;
  }
  
  .truck-visual {
    flex-direction: column;
    gap: 12px;
  }
  
  .truck-specs {
    grid-template-columns: 1fr 1fr;
    justify-items: center;
  }
  
  .config-actions {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .action-buttons {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .section-nav-btn {
    min-width: 80px;
    padding: 10px 6px;
  }
  
  .section-icon {
    font-size: 1.2rem;
  }
  
  .section-label {
    font-size: 0.75rem;
  }
  
  .truck-specs {
    grid-template-columns: 1fr;
    text-align: center;
  }
}
/* First Time Setup Styles - SAFE FOR PROFESSIONAL DRIVERS */

.first-time-setup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* MUDANÇA CRÍTICA: Fundo escuro seguro para motoristas */
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.first-time-setup-container {
  /* MUDANÇA CRÍTICA: Container bege/cinza escuro - NÃO BRANCO */
  background: #f5f5dc; /* Bege suave - seguro para os olhos */
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Progress Indicator */
.setup-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 40px 20px;
  /* MUDANÇA: Fundo mais escuro e suave */
  background: #e8e8dc; /* Bege mais escuro */
  border-radius: 20px 20px 0 0;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* MUDANÇA: Cores mais suaves */
  background: #d3d3d3; /* Cinza claro suave */
  color: #555555; /* Cinza escuro para contraste */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  transition: all 0.3s ease;
}

.progress-step.active .step-number {
  /* MUDANÇA: Azul mais suave */
  background: #4a90a4; /* Azul acinzentado suave */
  color: white;
}

.progress-step.completed .step-number {
  /* MUDANÇA: Verde mais suave */
  background: #6b8e23; /* Verde oliva suave */
  color: white;
}

.step-label {
  font-size: 0.85rem;
  color: #555555; /* Cinza mais escuro para melhor legibilidade */
  font-weight: 500;
}

.progress-step.active .step-label {
  color: #4a90a4; /* Azul acinzentado suave */
  font-weight: bold;
}

.progress-step.completed .step-label {
  color: #6b8e23; /* Verde oliva suave */
}

.progress-line {
  width: 60px;
  height: 2px;
  background: #d3d3d3; /* Cinza claro suave */
  margin: 0 20px;
}

/* Setup Content */
.setup-content {
  padding: 40px;
}

/* Welcome Step */
.welcome-step {
  text-align: center;
}

.welcome-header {
  margin-bottom: 40px;
}

.app-logo {
  font-size: 4rem;
  margin-bottom: 16px;
}

.welcome-header h1 {
  margin: 0 0 8px 0;
  color: #2c3e50; /* Mantém cor escura para contraste */
  font-size: 2.5rem;
  font-weight: bold;
}

.welcome-subtitle {
  margin: 0;
  color: #555555; /* Cinza mais escuro para melhor legibilidade */
  font-size: 1.2rem;
}

.welcome-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  padding: 16px;
  /* MUDANÇA: Fundo bege mais escuro */
  background: #e8e8dc; /* Bege escuro suave */
  border-radius: 12px;
}

.feature-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.feature-text h3 {
  margin: 0 0 4px 0;
  color: #2c3e50; /* Mantém cor escura para contraste */
  font-size: 1.1rem;
}

.feature-text p {
  margin: 0;
  color: #555555; /* Cinza mais escuro para melhor legibilidade */
  font-size: 0.9rem;
}

.welcome-message {
  margin: 30px 0;
  padding: 20px;
  /* MUDANÇA: Fundo bege com toque azul suave */
  background: #f0f0e8; /* Bege claro */
  border-radius: 12px;
  border-left: 4px solid #4a90a4; /* Azul acinzentado suave */
}

.welcome-message p {
  margin: 0;
  color: #2c3e50; /* Cor escura para contraste */
  font-size: 1rem;
  line-height: 1.5;
}

.continue-btn {
  /* MUDANÇA: Gradiente mais suave e escuro */
  background: linear-gradient(135deg, #4a90a4 0%, #2c3e50 100%);
  color: white;
  border: none;
  padding: 16px 32px;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 15px rgba(74, 144, 164, 0.4);
}

.continue-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(74, 144, 164, 0.6);
}

/* Vehicle Selection Step */
.vehicle-selection-step .step-header {
  text-align: center;
  margin-bottom: 40px;
}

.step-header h2 {
  margin: 0 0 8px 0;
  color: #2c3e50; /* Mantém cor escura para contraste */
  font-size: 2rem;
}

.step-header p {
  margin: 0;
  color: #555555; /* Cinza mais escuro para melhor legibilidade */
  font-size: 1rem;
}

.vehicle-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 30px;
}

.vehicle-option {
  border: 3px solid #d3d3d3; /* Cinza claro suave */
  border-radius: 16px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  /* MUDANÇA CRÍTICA: Fundo bege claro - NÃO BRANCO */
  background: #f0f0e8; /* Bege muito claro */
}

.vehicle-option:hover {
  border-color: #4a90a4; /* Azul acinzentado suave */
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(74, 144, 164, 0.15);
}

.vehicle-visual {
  margin-bottom: 20px;
}

.vehicle-icon {
  font-size: 4rem;
  margin-bottom: 8px;
}

.vehicle-label {
  font-size: 1rem;
  color: #555555; /* Cinza mais escuro para melhor legibilidade */
  font-weight: 500;
}

.vehicle-details h3 {
  margin: 0 0 16px 0;
  color: #2c3e50; /* Mantém cor escura para contraste */
  font-size: 1.3rem;
}

.vehicle-benefits {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.benefit-item {
  color: #6b8e23; /* Verde oliva suave */
  font-size: 0.9rem;
  text-align: left;
}

.next-step-info {
  padding: 12px;
  background: #e8e8dc; /* Bege escuro suave */
  border-radius: 8px;
  margin-top: 16px;
}

.next-step-info small {
  color: #555555; /* Cinza mais escuro para melhor legibilidade */
  font-style: italic;
}

/* Step Footer */
.step-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #d3d3d3; /* Cinza claro suave */
}

.back-btn {
  background: #708090; /* Cinza ardósia suave */
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.back-btn:hover {
  background: #5f6f7f; /* Cinza ardósia mais escuro */
}

/* Truck Config Step */
.truck-config-step .step-header {
  text-align: center;
  margin-bottom: 30px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .first-time-setup-overlay {
    padding: 10px;
  }
  
  .setup-content {
    padding: 20px;
  }
  
  .setup-progress {
    padding: 20px;
  }
  
  .progress-line {
    width: 40px;
    margin: 0 10px;
  }
  
  .welcome-header h1 {
    font-size: 2rem;
  }
  
  .welcome-subtitle {
    font-size: 1rem;
  }
  
  .vehicle-options {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .vehicle-option {
    padding: 20px;
  }
  
  .vehicle-icon {
    font-size: 3rem;
  }
  
  .feature-item {
    padding: 12px;
  }
  
  .feature-icon {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .app-logo {
    font-size: 3rem;
  }
  
  .welcome-header h1 {
    font-size: 1.8rem;
  }
  
  .step-header h2 {
    font-size: 1.5rem;
  }
  
  .vehicle-details h3 {
    font-size: 1.1rem;
  }
}
.login-form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.login-form-card {
  background: white;
  border-radius: 10px;
  padding: 40px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 400px;
}

.login-form-title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.login-form-error {
  background-color: #fee;
  border: 1px solid #fcc;
  color: #c33;
  padding: 12px;
  border-radius: 5px;
  margin-bottom: 20px;
  font-size: 14px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login-form-group label {
  font-weight: 500;
  color: #555;
  font-size: 14px;
}

.login-form-group input {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.login-form-group input:focus {
  outline: none;
  border-color: #667eea;
}

.login-form-group input:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.login-form-button {
  padding: 14px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s;
  margin-top: 10px;
}

.login-form-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.login-form-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.login-form-footer {
  margin-top: 20px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

.login-form-link {
  background: none;
  border: none;
  color: #667eea;
  cursor: pointer;
  font-weight: 600;
  padding: 0;
  text-decoration: underline;
}

.login-form-link:hover:not(:disabled) {
  color: #764ba2;
}

.login-form-link:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.register-form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.register-form-card {
  background: white;
  border-radius: 10px;
  padding: 40px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 500px;
}

.register-form-title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.register-form-error {
  background-color: #fee;
  border: 1px solid #fcc;
  color: #c33;
  padding: 12px;
  border-radius: 5px;
  margin-bottom: 20px;
  font-size: 14px;
}

.register-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.register-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.register-form-group label {
  font-weight: 500;
  color: #555;
  font-size: 14px;
}

.register-form-group input {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.register-form-group input:focus {
  outline: none;
  border-color: #667eea;
}

.register-form-group input:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.register-form-group small {
  color: #888;
  font-size: 12px;
}

.register-form-button {
  padding: 14px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s;
  margin-top: 10px;
}

.register-form-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.register-form-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.register-form-footer {
  margin-top: 20px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

.register-form-link {
  background: none;
  border: none;
  color: #667eea;
  cursor: pointer;
  font-weight: 600;
  padding: 0;
  text-decoration: underline;
}

.register-form-link:hover:not(:disabled) {
  color: #764ba2;
}

.register-form-link:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* OLD TOP BAR - HIDDEN */
.top-bar {
  display: none !important;
}

.logo-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo-icon {
  width: 32px;
  height: 32px;
  color: var(--accent-gold);
}

.logo-text {
  font-size: 1.8rem;
  font-weight: bold;
}

.tagline {
  font-size: 0.75rem;
  color: var(--accent-gold);
  margin-top: -4px;
}

.route-info {
  flex: 1 1;
  display: flex;
  align-items: center;
}

.route-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.route-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.icon {
  color: var(--accent-gold);
}

.destination {
  color: var(--button-text);
}

.route-stats {
  display: flex;
  gap: 2rem;
  font-size: 0.9rem;
  color: var(--accent-gold);
}

.stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.controls {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.speed-display {
  text-align: center;
  background: rgba(196, 147, 75, 0.1);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--accent-gold);
}

.speed-value {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--accent-gold);
}

.speed-unit {
  font-size: 0.7rem;
  color: var(--button-text);
}

.gradient-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Seção de Pesquisa */
.search-section {
  flex: 1 1;
  max-width: 400px;
  margin: 0 1rem;
}

.topbar-search {
  width: 100%;
}

/* Campo de Teste para Terrenos */
.terrain-test-section {
  flex: 0.8 1;
  max-width: 280px;
}

.terrain-test-input {
  width: 100%;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.15), rgba(255, 107, 53, 0.1));
  border: 2px solid rgba(255, 107, 53, 0.3);
  border-radius: 8px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  outline: none;
}

.terrain-test-input:focus {
  border-color: #ff6b35;
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), rgba(255, 107, 53, 0.1));
}

.terrain-test-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
}

/* Campo de Teste para Obras */
.construction-test-section {
  flex: 0.8 1;
  max-width: 280px;
}

.construction-test-input {
  width: 100%;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(220, 53, 69, 0.15), rgba(220, 53, 69, 0.1));
  border: 2px solid rgba(220, 53, 69, 0.3);
  border-radius: 8px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  outline: none;
}

.construction-test-input:focus {
  border-color: #dc3545;
  background: linear-gradient(135deg, rgba(220, 53, 69, 0.2), rgba(220, 53, 69, 0.1));
}

.construction-test-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
}

/* Responsivo */
@media (max-width: 1200px) {
  .top-bar {
    padding: 0 1rem;
    gap: 1rem;
  }
  
  .search-section {
    max-width: 300px;
    margin: 0 0.5rem;
  }
  
  .route-stats {
    gap: 1rem;
  }
}

@media (max-width: 768px) {
  .top-bar {
    height: 60px;
    padding: 0 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .logo-section {
    order: 1;
  }
  
  .search-section {
    order: 2;
    flex: 1 1;
    min-width: 200px;
    max-width: none;
    margin: 0;
  }
  
  .route-info {
    order: 3;
    width: auto;
    flex: none;
  }
  
  .controls {
    order: 4;
    gap: 0.5rem;
  }
  
  .route-stats {
    gap: 0.5rem;
    font-size: 0.8rem;
  }
  
  .speed-display {
    padding: 0.25rem 0.5rem;
  }
  
  .speed-value {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .top-bar {
    height: auto;
    min-height: 60px;
    flex-direction: column;
    align-items: stretch;
    padding: 0.5rem 1rem;
    gap: 0.5rem;
  }
  
  .search-section,
  .route-info,
  .controls {
    order: initial;
    width: 100%;
    flex: none;
  }
  
  .route-info {
    text-align: center;
  }
  
  .controls {
    justify-content: space-between;
  }


/* ========================================
   NEW TOP BAR - BEIGE WITH BLACK WINDOW
   TomTom Style Navigation Top Bar
   ======================================== */

.top-bar-beige {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: calc(100vw - 450px) !important;
  height: 80px !important;
  min-height: 80px !important;
  
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  background: #d4b896 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  
  z-index: 999 !important;
  padding: 10px 20px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Brown Coffee Rectangle with Next Street Name - CENTERED */
.next-street-window {
  display: flex;
  align-items: center;
  justify-content: center;
  
  background: #5d4037;
  padding: 15px 100px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  
  height: 55px;
  min-width: 500px;
}

.street-name {
  font-family: 'Arial', 'Helvetica', sans-serif;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffffff !important;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}

}
/**
 * King Assistant Button Styles
 * Matches CompactSearchBar visual style
 */

.king-assistant-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.king-assistant-button:hover {
  background: #f8f9fa;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
  border-color: #4285f4;
}

.king-assistant-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.king-icon {
  font-size: 18px;
  display: flex;
  align-items: center;
}

.king-text {
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
}

/* Pulse animation to attract attention */
.king-assistant-button.pulse {
  animation: king-pulse 1s ease-in-out;
}

@keyframes king-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
  }
}

/* Responsive: Hide text on small screens */
@media (max-width: 768px) {
  .king-text {
    display: none;
  }
  
  .king-assistant-button {
    padding: 10px;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    justify-content: center;
  }
  
  .king-icon {
    font-size: 20px;
  }
}

/**
 * Voice Player Styles
 */

.voice-player {
  margin-top: 12px;
}

.voice-play-button,
.voice-stop-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #4285f4;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.voice-play-button:hover,
.voice-stop-button:hover {
  background: #3367d6;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(66, 133, 244, 0.3);
}

.voice-play-button:active,
.voice-stop-button:active {
  transform: translateY(0);
}

.voice-stop-button {
  background: #ea4335;
}

.voice-stop-button:hover {
  background: #d33b2c;
}

.voice-icon {
  font-size: 16px;
  display: flex;
  align-items: center;
}

.voice-label {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.voice-player-unsupported {
  padding: 12px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 8px;
  color: #856404;
  font-size: 13px;
  margin-top: 12px;
}

/**
 * King Assistant Modal Styles
 * Alexa-style interface with modern design
 */

.king-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: king-fade-in 0.2s ease;
  pointer-events: none; /* Allow drag events to pass through overlay */
}

@keyframes king-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.king-modal {
  /* MUDANÇA CRÍTICA: Fundo bege seguro - NÃO BRANCO */
  background: #f5f5dc; /* Bege suave - seguro para motoristas */
  border-radius: 16px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  animation: king-slide-up 0.3s ease;
  pointer-events: auto; /* Modal content captures events */
}

@keyframes king-slide-up {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Header */
.king-modal-header {
  padding: 20px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.king-modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 600;
}

.king-crown {
  font-size: 28px;
}

.king-modal-actions {
  display: flex;
  gap: 8px;
}

.king-settings-btn,
.king-close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

.king-settings-btn:hover,
.king-close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Settings Panel */
.king-settings-panel {
  padding: 20px 24px;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
}

.king-settings-panel h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #333;
}

.setting-group {
  margin-bottom: 16px;
}

.setting-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #555;
  font-weight: 500;
}

.setting-group select,
.setting-group input[type="range"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
}

.setting-group input[type="checkbox"] {
  margin-right: 8px;
}

/* Content */
.king-modal-content {
  padding: 24px;
  overflow-y: auto;
  flex: 1 1;
}

/* Input Area */
.king-welcome {
  text-align: center;
  margin-bottom: 24px;
}

.king-wave {
  font-size: 48px;
  display: block;
  margin-bottom: 12px;
  animation: king-wave 1s ease infinite;
}

@keyframes king-wave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(20deg); }
  75% { transform: rotate(-20deg); }
}

.king-welcome p {
  font-size: 16px;
  color: #666;
  margin: 0;
}

.king-question-input {
  width: 100%;
  padding: 16px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  font-size: 15px;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.3s ease;
}

.king-question-input:focus {
  outline: none;
  border-color: #667eea;
}

.king-error {
  margin-top: 12px;
  padding: 12px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 8px;
  color: #856404;
  font-size: 14px;
}

.king-input-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.king-send-btn {
  padding: 12px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 24px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.king-send-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.king-send-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.king-spinner {
  animation: king-spin 1s linear infinite;
}

@keyframes king-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Response Area */
.king-question-echo {
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  margin-bottom: 20px;
}

.king-question-echo strong {
  display: block;
  margin-bottom: 8px;
  color: #667eea;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.king-question-echo p {
  margin: 0;
  color: #555;
  font-size: 15px;
}

.king-response-card {
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 20px;
}

.king-response-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e0e0e0;
}

.king-crown-small {
  font-size: 20px;
}

.king-query-type {
  margin-left: auto;
  padding: 4px 12px;
  background: #e8eaf6;
  color: #5e35b1;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.king-response-text {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 16px;
}

.king-response-meta {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
  font-size: 13px;
  color: #888;
}

.king-response-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.king-new-question-btn {
  padding: 12px 24px;
  background: white;
  color: #667eea;
  border: 2px solid #667eea;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.king-new-question-btn:hover {
  background: #667eea;
  color: white;
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
  .king-modal {
    width: 95%;
    max-height: 90vh;
  }

  .king-modal-content {
    padding: 16px;
  }

  .king-welcome p {
    font-size: 14px;
  }
}

/* Compact Search Bar - Top left corner, below top bar - Google Style */
/* Now with King Assistant button on the right side */

.compact-search-bar {
  position: fixed;
  top: 110px;
  left: 20px;
  z-index: 998;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 520px);
}

/* Always visible search bar - Google style */
.search-bar-container {
  display: flex;
  align-items: center;
  gap: 12px;
  
  width: 450px;
  height: 50px;
  
  background: #ffffff;
  border: 1px solid #dfe1e5;
  border-radius: 24px;
  
  padding: 0 20px;
  
  box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
}

.search-bar-container:hover {
  box-shadow: 0 2px 8px rgba(32, 33, 36, 0.35);
  border-color: rgba(223, 225, 229, 0);
}

.search-bar-container:focus-within {
  box-shadow: 0 2px 10px rgba(32, 33, 36, 0.4);
  border-color: transparent;
}

/* Search icon on the left - Google style */
.search-icon-left {
  font-size: 20px;
  color: #9aa0a6;
  flex-shrink: 0;
  line-height: 1;
}

.compact-search-input {
  flex: 1 1;
  background: transparent !important;
  border: none !important;
  color: #202124 !important;
  font-size: 16px !important;
  outline: none !important;
  padding: 0 !important;
  min-width: 0;
}

.compact-search-input input {
  background: transparent !important;
  border: none !important;
  color: #202124 !important;
  font-size: 16px !important;
  width: 100% !important;
  outline: none !important;
  padding: 0 !important;
  line-height: 1.5;
}

.compact-search-input input::placeholder {
  color: #5f6368 !important;
  font-weight: 400;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .compact-search-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    left: 15px;
  }
  
  .search-bar-container {
    width: calc(100vw - 100px);
    height: 44px;
    padding: 0 15px;
  }
  
  .search-icon-left {
    font-size: 18px;
  }
  
  .compact-search-input input {
    font-size: 14px !important;
  }
}

/* 🗂️ Waypoints Manager - Drag & Drop Interface */

.waypoints-manager-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

.waypoints-manager {
  background: rgba(20, 20, 20, 0.95);
  border-radius: 16px;
  padding: 24px;
  width: 90%;
  max-width: 450px;
  max-height: 85vh;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Header */
.manager-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-title {
  color: white;
  font-size: 16px;
  font-weight: bold;
}

.close-btn {
  background: rgba(244, 67, 54, 0.8);
  color: white;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: rgba(244, 67, 54, 1);
  transform: scale(1.1);
}

/* Instructions */
.instructions {
  margin-bottom: 20px;
  padding: 12px;
  background: rgba(33, 150, 243, 0.1);
  border-radius: 8px;
  border-left: 3px solid #2196F3;
}

.instruction-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #bbb;
  font-size: 12px;
  margin-bottom: 6px;
}

.instruction-item:last-child {
  margin-bottom: 0;
}

.instruction-icon {
  font-size: 14px;
}

/* Waypoints List */
.waypoints-list {
  margin-bottom: 20px;
  max-height: 400px;
  overflow-y: auto;
}

.waypoint-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  cursor: grab;
  -webkit-user-select: none;
          user-select: none;
  transition: all 0.3s ease;
  position: relative;
}

.waypoint-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(2px);
}

.waypoint-item.dragging {
  opacity: 0.7;
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(33, 150, 243, 0.4);
  cursor: grabbing;
  z-index: 1000;
}

.waypoint-item.drag-over {
  border-top: 3px solid #2196F3;
  margin-top: 12px;
}

.waypoint-order {
  flex-shrink: 0;
}

.order-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #2196F3;
  color: white;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
}

.waypoint-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.waypoint-details {
  flex: 1 1;
}

.waypoint-name {
  color: white;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 4px;
  line-height: 1.3;
}

.waypoint-info {
  display: flex;
  gap: 12px;
  color: #bbb;
  font-size: 10px;
}

.waypoint-status {
  flex-shrink: 0;
  font-size: 16px;
}

.status-complete {
  color: #4CAF50;
}

.status-current {
  color: #2196F3;
  animation: pulse 1.5s ease-in-out infinite;
}

.status-pending {
  color: #9E9E9E;
}

.drag-handle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #2196F3;
  font-size: 16px;
  font-weight: bold;
  opacity: 0.7;
}

/* Actions */
.manager-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.action-btn {
  flex: 1 1;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.reset-btn {
  background: rgba(255, 152, 0, 0.8);
  color: white;
}

.reset-btn:hover {
  background: rgba(255, 152, 0, 1);
  transform: scale(1.02);
}

.apply-btn {
  background: rgba(76, 175, 80, 0.8);
  color: white;
}

.apply-btn:hover {
  background: rgba(76, 175, 80, 1);
  transform: scale(1.02);
}

/* Trip Summary */
.trip-summary {
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  color: #bbb;
  font-size: 11px;
}

.summary-item:last-child {
  margin-bottom: 0;
}

.summary-label {
  font-weight: normal;
}

.summary-value {
  color: white;
  font-weight: bold;
  background: rgba(33, 150, 243, 0.3);
  padding: 2px 8px;
  border-radius: 4px;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .waypoints-manager {
    width: 95%;
    padding: 16px;
    max-height: 90vh;
  }
  
  .header-title {
    font-size: 14px;
  }
  
  .waypoint-item {
    padding: 10px;
    gap: 10px;
  }
  
  .waypoint-name {
    font-size: 12px;
  }
  
  .waypoint-info {
    font-size: 9px;
  }
  
  .order-number {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }
}

/* Touch-friendly for mobile */
@media (hover: none) and (pointer: coarse) {
  .waypoint-item {
    padding: 16px 12px;
    touch-action: manipulation;
  }
  
  .instruction-item {
    font-size: 13px;
  }
}
.map-container {
  flex: 1 1;
  position: relative;
  background: linear-gradient(135deg, #a8e6cf 0%, #7fcdcd 50%, #86a8e7 100%);
  overflow: hidden;
  z-index: 10;
}

/* 🗺️ Mapbox GL JS Styles */
.map-view {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #1a1a1a;
}

/* Mapbox Map Container - Adapta dinamicamente com EventsPanel */
.mapbox-map {
  width: 100%;
  height: 100vh;
  position: relative;
  transition: all 0.3s ease;
}

/* Adaptações quando EventsPanel está visível em diferentes posições */

/* Painel à DIREITA - Mapa ocupa 2/3 ESQUERDA */
.mapbox-map.events-panel-right {
  width: 66.667%;
  margin-right: 33.333%;
}

/* Painel à ESQUERDA - Mapa ocupa 2/3 DIREITA */
.mapbox-map.events-panel-left {
  width: 66.667%;
  margin-left: 33.333%;
}

/* Painel SUPERIOR - Mapa ocupa 2/3 INFERIOR */
.mapbox-map.events-panel-top {
  height: 66.667vh;
  margin-top: 33.333vh;
}

/* Loading Indicator para Mapbox */
.map-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: white;
  font-size: 14px;
  z-index: 1000;
}

.loading-spinner {
  font-size: 32px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Controls Overlay */
.map-controls {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}

.map-control-btn {
  background: rgba(0, 0, 0, 0.7);
  border: none;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  transition: all 0.2s ease;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.map-control-btn:hover {
  background: rgba(33, 150, 243, 0.8);
  transform: scale(1.05);
}

.toggle-btn {
  background: rgba(33, 150, 243, 0.8);
  padding: 10px 15px;
  font-size: 13px;
  white-space: nowrap;
}

.zoom-controls {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.zoom-btn, .reset-btn, .units-btn, .simulate-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
}

.simulate-btn {
  background: rgba(255, 193, 7, 0.8) !important;
}

.simulate-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.simulate-btn:hover:not(:disabled) {
  background: rgba(255, 193, 7, 1) !important;
  transform: scale(1.1);
}

.style-btn {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.8), rgba(255, 193, 7, 0.9)) !important;
  font-size: 16px;
}

.style-btn:hover {
  background: linear-gradient(135deg, rgba(255, 215, 0, 1), rgba(255, 193, 7, 1)) !important;
  transform: scale(1.15) !important;
}

/* Map Style Selector - Botão Principal */
.map-style-selector {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1001;
}

.map-style-toggle-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(26, 26, 46, 0.95));
  border: 2px solid rgba(255, 215, 0, 0.6);
  border-radius: 16px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  min-width: 180px;
}

.map-style-toggle-btn:hover {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 193, 7, 0.05));
  border-color: #FFD700;
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.3);
}

.map-style-toggle-btn:active {
  transform: translateY(0);
}

.style-icon {
  font-size: 2rem;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.style-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.style-name {
  color: #FFD700;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.2;
}

.style-hint {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.map-style-toggle-btn:hover .style-hint {
  opacity: 1;
}

/* Map Info Overlay - Ajustado para não sobrepor */
.map-info {
  position: absolute;
  top: 90px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 1000;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.7);
  padding: 6px 12px;
  border-radius: 6px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.info-label {
  color: #bbb;
  font-size: 11px;
  font-weight: bold;
}

.info-value {
  color: white;
  font-size: 12px;
  font-weight: bold;
}

/* Route Waypoints Info Panel */
.route-info-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 12px;
  padding: 16px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 1000;
  min-width: 240px;
}

.route-header {
  color: white;
  font-size: 14px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.manage-waypoints-btn {
  background: rgba(33, 150, 243, 0.8);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.manage-waypoints-btn:hover {
  background: rgba(33, 150, 243, 1);
  transform: scale(1.1);
}

.waypoints-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.waypoint-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.waypoint-item.origin {
  border-left: 4px solid #4CAF50;
}

.waypoint-item.truck-stop {
  border-left: 4px solid #FF5722;
}

.waypoint-item.destination {
  border-left: 4px solid #F44336;
}

.waypoint-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #2196F3;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 12px;
  flex-shrink: 0;
}

.waypoint-item.origin .waypoint-number {
  background: #4CAF50;
}

.waypoint-item.truck-stop .waypoint-number {
  background: #FF5722;
}

.waypoint-item.destination .waypoint-number {
  background: #F44336;
}

.waypoint-details {
  flex: 1 1;
}

.waypoint-name {
  color: white;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.3;
}

.waypoint-desc {
  color: #bbb;
  font-size: 10px;
  margin-top: 2px;
}

.route-arrow {
  color: #2196F3;
  font-size: 16px;
  text-align: center;
  opacity: 0.7;
}

/* Segment Navigation Styles */
.current-segment {
  margin-top: 8px;
}

.segment-name {
  color: #64B5F6;
  font-size: 11px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
  padding: 4px 8px;
  background: rgba(33, 150, 243, 0.2);
  border-radius: 6px;
}

.segment-progress {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #2196F3);
  transition: width 0.8s ease;
  border-radius: 3px;
}

.progress-text {
  color: white;
  font-size: 11px;
  text-align: center;
  margin-top: 6px;
  font-weight: bold;
}

.next-segment {
  margin-top: 10px;
  padding: 8px;
  background: rgba(255, 193, 7, 0.1);
  border-radius: 6px;
  border-left: 3px solid #FFC107;
}

.next-label {
  color: #FFC107;
  font-size: 10px;
  font-weight: bold;
  margin-bottom: 4px;
}

.next-name {
  color: white;
  font-size: 11px;
  font-weight: normal;
}

/* Optimization & Performance Styles */
.segment-stats {
  display: flex;
  gap: 12px;
  margin: 8px 0;
  padding: 6px;
  background: rgba(33, 150, 243, 0.1);
  border-radius: 6px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1;
}

.stat-label {
  font-size: 12px;
}

.stat-value {
  color: white;
  font-size: 11px;
  font-weight: bold;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  color: #bbb;
  font-size: 10px;
}

.progress-numbers {
  color: #2196F3;
  font-weight: bold;
}

.optimization-info {
  margin: 10px 0;
  padding: 8px;
  background: rgba(76, 175, 80, 0.1);
  border-radius: 6px;
  border-left: 3px solid #4CAF50;
}

.opt-label {
  color: #4CAF50;
  font-size: 10px;
  font-weight: bold;
  margin-bottom: 4px;
}

.opt-desc {
  color: #bbb;
  font-size: 9px;
  line-height: 1.3;
}

.opt-desc small {
  opacity: 0.7;
}

.next-stats {
  color: #bbb;
  font-size: 9px;
  margin-top: 2px;
}

.journey-complete {
  text-align: center;
  padding: 20px 10px;
}

.complete-icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.complete-title {
  color: #4CAF50;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 6px;
}

.complete-desc {
  color: #bbb;
  font-size: 11px;
}

/* Mapbox Attribution */
.mapbox-attribution {
  position: absolute;
  bottom: 5px;
  left: 5px;
  z-index: 1000;
  opacity: 0.6;
  font-size: 10px;
}

.mapbox-attribution a {
  color: white;
  text-decoration: none;
}

.mapbox-attribution a:hover {
  text-decoration: underline;
}

/* Responsividade Mobile */
@media (max-width: 768px) {
  /* Map Style Selector Mobile */
  .map-style-selector {
    top: 10px;
    left: 10px;
    right: 10px;
  }
  
  .map-style-toggle-btn {
    min-width: auto;
    width: 100%;
    max-width: 200px;
    padding: 10px 12px;
    gap: 10px;
  }
  
  .style-icon {
    font-size: 1.5rem;
  }
  
  .style-name {
    font-size: 0.9rem;
  }
  
  .style-hint {
    font-size: 0.7rem;
  }
  
  /* Map Info Mobile */
  .map-info {
    top: 70px;
    left: 10px;
    right: 10px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .info-item {
    flex: 1 1;
    min-width: calc(50% - 4px);
    padding: 4px 8px;
  }
  
  .info-label {
    font-size: 10px;
  }
  
  .info-value {
    font-size: 11px;
  }
  
  /* Route Info Panel Mobile */
  .route-info-panel {
    top: 120px;
    right: 10px;
    min-width: 200px;
    font-size: 11px;
  }
  
  .route-header {
    font-size: 12px;
  }
  
  .waypoint-name {
    font-size: 11px;
  }
  
  .waypoint-desc {
    font-size: 9px;
  }
}

/* Tablet Landscape */
@media (min-width: 769px) and (max-width: 1024px) {
  .map-style-toggle-btn {
    min-width: 160px;
    padding: 10px 14px;
  }
  
  .style-icon {
    font-size: 1.8rem;
  }
  
  .map-info {
    top: 80px;
  }
}

.map-background {
  width: 100%;
  height: 100%;
  position: relative;
  background-image: 
    linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.1) 25%, transparent 25%);
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
  z-index: 15;
}

.route-line {
  position: absolute;
  top: 50%;
  left: 5%;
  right: 5%;
  height: 8px;
  background: rgba(255,255,255,0.3);
  border-radius: 4px;
  transform: translateY(-50%);
  border: 2px solid var(--border-primary);
}

.route-progress {
  height: 100%;
  background: linear-gradient(to right, var(--map-route), var(--accent-gold));
  border-radius: 4px;
  transition: width 0.5s ease;
  box-shadow: 0 0 10px var(--accent-gold);
}

/* Rota em modo completo */
.route-line.full-map-route {
  transition: all 0.8s ease-in-out;
}

/* Botão de Toggle Mapa Completo - Lado Esquerdo */
.full-map-toggle-btn {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, var(--primary-gold), var(--accent-gold));
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: 16px 12px;
  cursor: pointer;
  z-index: 99999 !important;
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(251, 191, 36, 0.3);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 90px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  pointer-events: auto !important;
}

.full-map-toggle-btn:hover {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 
    0 12px 35px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(251, 191, 36, 0.5);
  border-color: rgba(255, 255, 255, 0.5);
}

.full-map-toggle-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.toggle-icon {
  font-size: 1.8rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  animation: toggleFloat 3s ease-in-out infinite;
}

.toggle-text {
  color: rgba(0, 0, 0, 0.8);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
  line-height: 1.2;
}

@keyframes toggleFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-4px); }
}

/* Responsividade Mobile para Botão Toggle */
@media (max-width: 768px) {
  .full-map-toggle-btn {
    left: 15px;
    padding: 12px 8px;
    min-width: 70px;
    border-radius: 15px;
  }
  
  .toggle-icon {
    font-size: 1.5rem;
  }
  
  .toggle-text {
    font-size: 0.65rem;
  }
}

/* Botão de Toggle de Unidades */
.control-btn.units-toggle {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  font-weight: 700;
  font-size: 0.9rem;
  border: 2px solid rgba(59, 130, 246, 0.3);
  min-width: 45px;
}

.control-btn.units-toggle:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  border-color: rgba(59, 130, 246, 0.6);
  transform: translateY(-2px);
}

.truck-position {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  z-index: 10;
  transition: left 0.5s ease;
  cursor: pointer;
}

.truck-info {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 0.5rem;
  font-size: 0.8rem;
  white-space: nowrap;
  box-shadow: 0 2px 8px var(--shadow-soft);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.truck-position:hover .truck-info {
  opacity: 1;
}

.poi-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 5;
}

.poi-icon {
  font-size: 1.5rem;
  background: var(--bg-primary);
  border: 2px solid var(--border-primary);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px var(--shadow-soft);
  transition: transform 0.2s ease;
}

.poi-marker:hover .poi-icon {
  transform: scale(1.2);
}

.poi-tooltip {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-primary);
  color: var(--button-text);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.poi-marker:hover .poi-tooltip {
  opacity: 1;
}

.alert-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 0.5rem;
  border-radius: 50%;
  border: 2px solid;
  background: #1a1a2e;
  animation: pulse 2s infinite;
  z-index: 6;
}

.severity-high {
  border-color: var(--alert-danger);
  color: var(--alert-danger);
}

.severity-medium {
  border-color: var(--alert-warning);
  color: var(--alert-warning);
}

@keyframes pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.1); }
}

.distance-markers {
  position: absolute;
  top: 55%;
  left: 5%;
  right: 5%;
}

.marker {
  position: absolute;
  transform: translateX(-50%);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  box-shadow: 0 1px 4px var(--shadow-soft);
}

/* Controles de Zoom Aprimorados */
.map-controls {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 99999 !important;
  background: rgba(26, 26, 46, 0.9);
  border-radius: 16px;
  padding: 12px;
  border: 2px solid rgba(255, 215, 0, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  pointer-events: auto !important;
}

.control-btn {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border: 2px solid rgba(255, 215, 0, 0.3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.4rem;
  color: #FFD700;
  transition: all 0.3s ease;
  font-weight: bold;
}

.control-btn:hover {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
  border-color: #FFD700;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.control-btn:active {
  transform: translateY(0);
}

.zoom-level {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.75rem;
  text-align: center;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  margin: 4px 0;
  font-weight: 600;
}

/* Marcadores Customizados */
.custom-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 15;
  cursor: pointer;
  animation: markerPop 0.5s ease-out;
}

@keyframes markerPop {
  0% { 
    opacity: 0; 
    transform: translate(-50%, -50%) scale(0.5); 
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.2); 
  }
  100% { 
    opacity: 1; 
    transform: translate(-50%, -50%) scale(1); 
  }
}

.custom-marker-icon {
  font-size: 2rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-8px); }
  60% { transform: translateY(-4px); }
}

.custom-marker-tooltip {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.custom-marker:hover .custom-marker-tooltip {
  opacity: 1;
}

/* Ponto Clicado */
.clicked-point {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 25;
  pointer-events: none;
}

.clicked-point-pulse {
  width: 20px;
  height: 20px;
  background: rgba(255, 215, 0, 0.6);
  border: 3px solid #FFD700;
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* Menu Contextual */
.context-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: rgba(0, 0, 0, 0.1);
}

.context-menu {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f1419 100%);
  border: 2px solid rgba(255, 215, 0, 0.4);
  border-radius: 16px;
  min-width: 280px;
  z-index: 101;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  animation: contextMenuSlide 0.3s ease-out;
}

@keyframes contextMenuSlide {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.context-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
  background: rgba(255, 215, 0, 0.1);
}

.context-menu-title {
  color: #FFD700;
  font-size: 1.1rem;
  font-weight: 700;
}

.close-context-menu {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.close-context-menu:hover {
  color: #FFD700;
  background: rgba(255, 215, 0, 0.1);
}

.context-menu-content {
  padding: 20px;
}

.point-info {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.point-address {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 6px;
  line-height: 1.4;
}

.point-coords {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  font-family: monospace;
  background: rgba(0, 0, 0, 0.3);
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
}

.context-menu-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.context-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
}

.context-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.context-action.navigate {
  border-color: rgba(0, 123, 255, 0.4);
  background: rgba(0, 123, 255, 0.1);
}

.context-action.navigate:hover {
  border-color: #007bff;
  background: rgba(0, 123, 255, 0.2);
  color: #007bff;
}

.context-action.save {
  border-color: rgba(40, 167, 69, 0.4);
  background: rgba(40, 167, 69, 0.1);
}

.context-action.save:hover {
  border-color: #28a745;
  background: rgba(40, 167, 69, 0.2);
  color: #28a745;
}

.context-action.waypoint {
  border-color: rgba(255, 193, 7, 0.4);
  background: rgba(255, 193, 7, 0.1);
}

.context-action.waypoint:hover {
  border-color: #ffc107;
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
}

/* Responsividade */
@media (max-width: 768px) {
  .map-controls {
    bottom: 0.5rem;
    right: 0.5rem;
    padding: 8px;
  }
  
  .control-btn {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  
  .context-menu {
    min-width: 250px;
    max-width: 90vw;
  }
  
  .context-menu-content {
    padding: 16px;
  }
  
  .context-action {
    padding: 12px 14px;
    font-size: 0.9rem;
  }
}

.route-overlay {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 4px 16px var(--shadow-soft);
}

.route-progress-bar {
  height: 8px;
  background: rgba(196, 147, 75, 0.3);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(to right, var(--map-route), var(--accent-gold));
  transition: width 0.5s ease;
}

.route-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-align: center;
}

/* Estados de Edição de Rota */
.map-container.route-editing-mode {
  cursor: crosshair;
}

.map-container.route-editing-mode .route-line {
  animation: routeEditGlow 1s ease-in-out infinite alternate;
  cursor: grab;
}

.map-container.route-editing-mode .route-line:hover {
  cursor: grabbing;
}

@keyframes routeEditGlow {
  0% {
    box-shadow: 0 0 10px var(--accent-gold);
  }
  100% {
    box-shadow: 0 0 20px var(--accent-gold), 0 0 30px rgba(255, 215, 0, 0.5);
  }
}

/* Indicador de Long Press */
.long-press-indicator {
  position: absolute;
  z-index: 250;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.9);
  color: #FFD700;
  padding: 12px 16px;
  border-radius: 12px;
  border: 2px solid #FFD700;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  animation: longPressAppear 0.3s ease-out;
  transform: translate(-50%, -50%);
}

.long-press-indicator .indicator-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.long-press-indicator .indicator-icon {
  font-size: 1.5rem;
  animation: indicatorPulse 0.8s ease-in-out infinite;
}

.long-press-indicator .indicator-text {
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}

@keyframes longPressAppear {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes indicatorPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* Linha de Arrastar Rota */
.route-drag-line {
  position: absolute;
  z-index: 40;
  pointer-events: none;
  stroke: #FF9800;
  stroke-width: 4;
  stroke-dasharray: 8, 4;
  animation: routeDragAnimation 1s ease-in-out infinite;
}

@keyframes routeDragAnimation {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 12;
  }
}

/* Destino de Drop da Rota */
.route-drop-target {
  position: absolute;
  z-index: 30;
  width: 16px;
  height: 16px;
  background: #FF9800;
  border: 3px solid #FFF;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: dropTargetPulse 1s ease-in-out infinite;
}

@keyframes dropTargetPulse {
  0%, 100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.5);
  }
}

/* Toast de Confirmação de Edição de Rota */
.route-edit-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
  padding: 16px 20px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  animation: toastSlideIn 0.4s ease-out;
  max-width: 350px;
  border-left: 4px solid #2E7D32;
}

.toast-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toast-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.toast-message {
  flex: 1 1;
}

.toast-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.toast-details {
  font-size: 0.9rem;
  opacity: 0.9;
  margin-bottom: 2px;
}

.toast-stats {
  font-size: 0.8rem;
  opacity: 0.8;
  font-weight: 500;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Suporte para gestos touch */
.map-background.touch-pan {
  cursor: move;
}

.map-background.touch-zoom {
  cursor: zoom-in;
}

/* Indicadores visuais para diferentes tipos de gestos */
.gesture-indicator {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #FFD700;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 60;
  animation: gestureIndicatorFade 2s ease-out forwards;
}

@keyframes gestureIndicatorFade {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Responsividade para funcionalidades touch */
@media (max-width: 768px) {
  .long-press-indicator {
    padding: 10px 14px;
    font-size: 0.85rem;
  }
  
  .long-press-indicator .indicator-icon {
    font-size: 1.3rem;
  }
  
  .route-edit-toast {
    top: 10px;
    right: 10px;
    left: 10px;
    max-width: none;
  }
  
  .gesture-indicator {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
}

/* Estados especiais para diferentes tipos de interação */
.map-container.pinch-zooming .route-line {
  pointer-events: none;
}

.map-container.panning .route-line {
  cursor: inherit;
}

.map-container.route-dragging {
  cursor: grabbing;
}

.map-container.route-dragging .route-line {
  cursor: grabbing;
}

/* Desabilitar pointer events durante sistema de drag */
.draggable-element.drag-mode-active * {
  pointer-events: none !important;
}

.draggable-element.drag-mode-active {
  pointer-events: auto !important;
}

/* Garantir que controles críticos sempre funcionem */
.full-map-toggle-btn,
.map-controls,
.control-btn {
  pointer-events: auto !important;
  z-index: 99999 !important;
}

.full-map-toggle-btn *,
.map-controls *,
.control-btn * {
  pointer-events: auto !important;
  z-index: inherit !important;
}

/* Widgets que podem interferir com controles */
.truck-stops-widget,
.border-crossings-widget {
  pointer-events: auto;
  z-index: 1000;
}

/* Emergency OndeEstou Button - Fallback for long press */
.emergency-ondeestou-btn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: linear-gradient(135deg, #ff4757 0%, #c44569 100%);
  color: white;
  border: none;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(255, 71, 87, 0.3);
  z-index: 1000;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.emergency-ondeestou-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4);
  background: linear-gradient(135deg, #ff3742 0%, #b83e5a 100%);
}

.emergency-ondeestou-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
}
/* Exit Markers Styles */

/* Pulsing animation for red X markers */
@keyframes pulseRedX {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.2);
  }
}

.mapboxgl-marker.wrong-exit-marker {
  animation: pulseRedX 1.5s ease-in-out infinite;
}

/* Green lane highlight glow effect */
@keyframes glowGreen {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(0, 255, 0, 0.8));
  }
  50% {
    filter: drop-shadow(0 0 16px rgba(0, 255, 0, 1));
  }
}

.correct-exit-lane {
  animation: glowGreen 2s ease-in-out infinite;
}

/* Ensure markers are always visible */
.mapboxgl-marker {
  z-index: 1000 !important;
}

/* Exit Popup Styles */

.exit-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.exit-popup-container {
  background-color: white;
  border-radius: 16px;
  padding: 24px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.exit-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.exit-number-large {
  background-color: #2e7d32;
  color: white;
  font-size: 48px;
  font-weight: bold;
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
  min-width: 120px;
  text-align: center;
  font-family: 'Arial', 'Helvetica', sans-serif;
}

.exit-popup-close {
  background: none;
  border: none;
  font-size: 28px;
  color: #666;
  cursor: pointer;
  padding: 8px;
  line-height: 1;
  transition: color 0.2s;
}

.exit-popup-close:hover {
  color: #333;
}

.exit-popup-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.exit-popup-coordinates {
  font-size: 14px;
  color: #666;
  margin-bottom: 24px;
  font-family: monospace;
}

.exit-popup-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.exit-popup-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 24px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.button-icon {
  font-size: 20px;
}

.navigate-button {
  background-color: #1976d2;
  color: white;
}

.navigate-button:hover {
  background-color: #1565c0;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
}

.waypoint-button {
  background-color: #2e7d32;
  color: white;
}

.waypoint-button:hover {
  background-color: #1b5e20;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
}

.exit-popup-hint {
  text-align: center;
  font-size: 14px;
  color: #999;
  padding: 12px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

/* Responsive */
@media (max-width: 480px) {
  .exit-popup-container {
    padding: 20px;
    max-width: 95%;
  }

  .exit-number-large {
    font-size: 36px;
    padding: 12px 20px;
    min-width: 100px;
  }

  .exit-popup-button {
    padding: 14px 20px;
    font-size: 15px;
  }
}

/* Sidebar KingRoad - FIXA NO LADO DIREITO ESTILO TOMTOM */

/* 
 * HIERARQUIA DE Z-INDEX ATUALIZADA:
 * - Mapa base: 0
 * - Widgets diversos: 900-10000
 * - Sidebar: 100000 (DEVE ESTAR SEMPRE VISÍVEL E CLICÁVEL)
 * - Eventos temporários críticos (se houver): 100100+
 * - Modais críticos (OndeEstou, Settings): 999999
 * 
 * NOTA: Sidebar precisa estar ACIMA de todos os widgets (z-index 99999) para permitir cliques.
 */

/* TomTom-style Route Info Header - Top section with SOLID dark background */
/* This section OVERLAYS the translucent sidebar - separate layer like TomTom */
.sidebar-route-header {
  position: relative;
  padding: 20px 15px;
  background: #2D2D2D;  /* SOLID dark grey like TomTom (not translucent) */
  border-bottom: 2px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 2;  /* Layer above translucent sidebar */
}

/* ETA - LARGE white time (like 1:54 in TomTom) */
.sidebar-eta {
  font-size: 48px !important;
  font-weight: 700;
  color: #FFFFFF !important;
  line-height: 1;
  letter-spacing: -1px;
  text-align: right;
  font-family: 'Arial', 'Helvetica', sans-serif;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.timezone-offset {
  font-size: 18px;
  vertical-align: super;
  margin-left: 2px;
  opacity: 0.9;
}

/* Total Distance - MEDIUM white (like 1598 km) */
.sidebar-distance {
  font-size: 28px !important;
  font-weight: 600;
  color: #FFFFFF !important;
  line-height: 1.1;
  text-align: right;
  font-family: 'Arial', 'Helvetica', sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Time Remaining - SMALL white (like 16 hr 25 mi) */
.sidebar-time-remaining {
  font-size: 16px !important;
  font-weight: 500;
  color: #FFFFFF !important;
  line-height: 1.2;
  text-align: right;
  opacity: 0.95;
  font-family: 'Arial', 'Helvetica', sans-serif;
}

.sidebar {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 220px;  /* TomTom style - narrow sidebar */
  background: rgba(31, 31, 31, 0.75);  /* MORE TRANSLUCENT like TomTom glass effect */
  backdrop-filter: blur(12px);  /* Stronger glass blur effect */
  -webkit-backdrop-filter: blur(12px);  /* Safari support */
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease;
  pointer-events: auto;
}

.sidebar.collapsed {
  transform: translateX(100%);
}

.sidebar-header {
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: #1F1F1F;
  flex-shrink: 0;
}

.sidebar-header h2 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: #FFFFFF;
  font-weight: 600;
}

.live-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.1); }
}

.tab-navigation {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: #1F1F1F;
}

.tab-btn {
  flex: 1 1;
  padding: 0.875rem 0.5rem;
  border: none;
  background: none;
  color: #999999;
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  border-bottom: 3px solid transparent;
  font-weight: 500;
}

.tab-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #FFFFFF;
}

.tab-btn.active {
  background: #2C2C2C;
  color: #FFFFFF;
  font-weight: 600;
  border-bottom-color: #00A8E1;
}

.filter-section {
  padding: 1rem;
  border-bottom: 1px solid var(--border-primary);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--bg-jupiter);
}

.filter-select {
  flex: 1 1;
  padding: 0.5rem;
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.85rem;
}

.direction-legend {
  padding: 0.75rem 1rem;
  background: var(--bg-jupiter);
  border-bottom: 1px solid var(--border-primary);
  display: flex;
  justify-content: space-around;
  font-size: 0.8rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.same-direction {
  background: #22c55e;
}

.opposite-direction {
  background: #f59e0b;
}

.content-section {
  flex: 1 1;
  overflow-y: auto;
  padding: 1rem;
  background: transparent;  /* Transparent - let sidebar translucent background show through */
}

.content-section::-webkit-scrollbar {
  width: 6px;
}

.content-section::-webkit-scrollbar-track {
  background: #1F1F1F;
}

.content-section::-webkit-scrollbar-thumb {
  background: #555555;
  border-radius: 3px;
}

.content-section::-webkit-scrollbar-thumb:hover {
  background: #777777;
}

.directional-pois {
  display: flex;
  gap: 0.5rem;
  padding: 0;
}

.pois-same-side {
  flex: 1 1;
  padding: 0.5rem;
}

.direction-divider {
  width: 2px;
  background: linear-gradient(to bottom, var(--accent-gold), var(--highlight));
  margin: 0.5rem 0;
  border-radius: 1px;
}

.pois-opposite-side {
  flex: 1 1;
  padding: 0.5rem;
}

.poi-item {
  margin-bottom: 0.75rem;
  transition: transform 0.2s ease;
}

.poi-item:hover {
  transform: translateX(4px);
}

.same-side {
  border-left: 3px solid #22c55e;
}

.opposite-side {
  border-left: 3px solid #f59e0b;
  background: rgba(245, 158, 11, 0.05);
}

.poi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.poi-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.poi-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.poi-details {
  flex: 1 1;
}

.poi-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.poi-distance-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.poi-distance {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.access-distance {
  color: #f59e0b;
  font-size: 0.7rem;
  font-weight: 600;
}

.favorite-btn {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: background 0.2s ease;
  font-size: 1.1rem;
}

.favorite-btn:hover {
  background: rgba(196, 147, 75, 0.1);
}

.favorite-btn.active {
  background: rgba(196, 147, 75, 0.2);
}

.poi-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.poi-rating, .poi-eta, .access-type {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.access-type {
  color: #f59e0b;
  font-weight: 600;
  font-size: 0.75rem;
}

.poi-services {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.service-tag {
  background: var(--accent-gold);
  color: var(--button-text);
  padding: 0.125rem 0.375rem;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 500;
}

.poi-special {
  background: rgba(217, 131, 36, 0.1);
  border: 1px solid var(--alert-warning);
  border-radius: 6px;
  padding: 0.5rem;
  font-size: 0.8rem;
  color: var(--alert-warning);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  min-height: 300px;
}

.empty-text {
  font-size: 1rem;
  color: #FFFFFF;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.empty-hint {
  font-size: 0.85rem;
  color: #999999;
  line-height: 1.5;
}

/* Responsividade */
@media (min-width: 1920px) {
  .sidebar {
    width: 450px;
  }
}

@media (min-width: 1600px) and (max-width: 1919px) {
  .sidebar {
    width: 400px;
  }
}

/* Route Events Styles - TomTom-like */
.route-event-item {
  background: rgba(58, 58, 58, 0.6);  /* Semi-transparent cards */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 8px;
  padding: 0.875rem;
  margin-bottom: 0.75rem;
  transition: all 0.2s ease;
  border-left: 4px solid #555555;
  cursor: pointer;
}

.route-event-item:hover {
  background: rgba(66, 66, 66, 0.8);  /* Slightly more opaque on hover */
  transform: translateX(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.event-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.event-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.event-info {
  flex: 1 1;
  min-width: 0;
}

.event-name {
  font-weight: 600;
  color: #FFFFFF;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.event-customer {
  color: #FF9500;
  font-size: 0.75rem;
  font-weight: 500;
  margin-top: 0.15rem;
}

.event-distance {
  color: #AAAAAA;
  font-size: 0.8rem;
  margin-top: 0.15rem;
}

.event-time {
  font-size: 1rem;
  font-weight: bold;
  min-width: 50px;
  text-align: right;
  flex-shrink: 0;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.2);
}

.event-description {
  font-size: 0.8rem;
  color: #AAAAAA;
  margin-bottom: 0.5rem;
  padding-left: 48px;
  line-height: 1.4;
}

.event-details {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  padding: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
}

.event-detail-item {
  color: #AAAAAA;
  margin-bottom: 0.25rem;
  line-height: 1.4;
}

.event-detail-item:last-child {
  margin-bottom: 0;
}

.event-services {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
  padding-left: 48px;
}

.service-tag {
  background: rgba(0, 168, 225, 0.2);
  color: #00A8E1;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 500;


/* ========================================
   TOMTOM-STYLE TRIP INFO - TOP SECTION
   ======================================== */

.tomtom-trip-info {
  background: transparent;  /* Translucent - see map through */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 0;
  flex-shrink: 0;
  display: flex;
  justify-content: center;  /* CENTER the info bar */
  position: relative;
}

/* CENTERED Info Bar - Events will appear on left and right sides */
.trip-info-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 120px;  /* Center bar width */
  padding: 0 12px;
  position: relative;
  z-index: 1;
}

/* ETA - Big time display like TomTom (1:54) */
.trip-eta {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
}

.eta-time {
  font-size: 56px;
  font-weight: bold;
  color: #FFFFFF;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  line-height: 1;
  letter-spacing: -2px;
}

.eta-timezone {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
  font-weight: 500;
}

/* Distance and Time Stats - Simple large numbers */
.trip-stat {
  text-align: center;
  margin-bottom: 16px;
  width: 100%;
}

.stat-value {
  font-size: 32px;
  font-weight: bold;
  color: #00D4FF;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.2;
}

/* Events containers - left and right of center bar */
.trip-events-left,
.trip-events-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
}

.trip-events-left {
  left: 0;
}

.trip-events-right {
  right: 0;
}

/* No route state */
.trip-no-route {
  text-align: center;
  padding: 40px 20px;
  opacity: 0.5;
}

.no-route-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.no-route-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

/* ========================================
   TOMTOM-STYLE CANCEL ROUTE BUTTON
   ======================================== */

.sidebar-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1F1F1F;
  border-top: 2px solid rgba(255, 255, 255, 0.1);
  padding: 16px;
  flex-shrink: 0;
}

.cancel-route-btn-tomtom {
  width: 100%;
  height: 56px;
  background: #DC3545;
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.cancel-route-btn-tomtom:hover {
  background: #C82333;
  box-shadow: 0 6px 16px rgba(220, 53, 69, 0.5);
  transform: translateY(-2px);
}

.cancel-route-btn-tomtom:active {
  transform: translateY(0);
}

.cancel-icon {
  font-size: 28px;
  font-weight: bold;
}

.cancel-text {
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .tomtom-trip-info {
    padding: 12px;
  }
  
  .time-display {
    font-size: 28px;
  }
  
  .trip-value {
    font-size: 20px;
  }
  
  .cancel-route-btn-tomtom {
    height: 48px;
    font-size: 14px;
  }
  
  .cancel-icon {
    font-size: 24px;
  }
}

}
.route-planner {
  padding: 2rem;
  height: 100vh;
  overflow-y: auto;
  background: var(--bg-jupiter);
}

.planner-header {
  text-align: center;
  margin-bottom: 2rem;
}

.planner-header h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.planner-header p {
  color: var(--text-secondary);
  font-size: 1.1rem;
}

.planner-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 2rem;
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.planning-form {
  padding: 2rem;
}

.planning-form h2 {
  color: var(--text-primary);
  margin-bottom: 2rem;
  font-size: 1.5rem;
  border-bottom: 2px solid var(--accent-gold);
  padding-bottom: 0.5rem;
}

.form-section {
  margin-bottom: 2rem;
}

.form-section h3 {
  color: var(--text-primary);
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.input-group {
  margin-bottom: 1.5rem;
}

.input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  gap: 1rem;
}

.input-group label {
  display: block;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.form-input, .form-select {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.form-input:focus, .form-select:focus {
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 3px rgba(196, 147, 75, 0.1);
}

.waypoint-group {
  border-left: 3px solid var(--accent-gold);
  padding-left: 1rem;
  margin: 1rem 0;
}

.waypoint-input {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.waypoint-input .form-input {
  flex: 1 1;
}

.remove-waypoint {
  background: var(--alert-danger);
  border: none;
  color: white;
  padding: 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.remove-waypoint:hover {
  transform: scale(1.1);
}

.add-waypoint-btn {
  background: var(--accent-gold);
  color: var(--button-text);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 1.5rem;
  transition: all 0.2s ease;
}

.add-waypoint-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--shadow-soft);
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-primary);
  padding: 0.5rem;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.checkbox-label:hover {
  background: rgba(196, 147, 75, 0.05);
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-gold);
}

.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-primary);
}

.preview-btn {
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--accent-gold);
  background: transparent;
  color: var(--accent-gold);
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.preview-btn:hover {
  background: var(--accent-gold);
  color: var(--button-text);
}

.saved-routes {
  padding: 2rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  height: -webkit-fit-content;
  height: fit-content;
}

.saved-routes h2 {
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  font-size: 1.3rem;
  border-bottom: 2px solid var(--accent-gold);
  padding-bottom: 0.5rem;
}

.routes-list {
  margin-bottom: 2rem;
}

.route-item {
  padding: 1.5rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border-primary);
}

.route-name {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.route-details {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.route-actions {
  display: flex;
  gap: 0.5rem;
}

.action-btn {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--border-primary);
  background: var(--bg-jupiter);
  color: var(--text-primary);
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: var(--accent-gold);
  color: var(--button-text);
  border-color: var(--accent-gold);
}

.action-btn.danger:hover {
  background: var(--alert-danger);
  border-color: var(--alert-danger);
}

@media (max-width: 1024px) {
  .planner-content {
    grid-template-columns: 1fr;
  }
}

/* Rotas Alternativas */
.route-alternatives {
  grid-column: 1 / -1;
  margin-top: 3rem;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.8));
  border-radius: 20px;
  border: 2px solid rgba(255, 215, 0, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.alternatives-header {
  text-align: center;
  margin-bottom: 2rem;
}

.alternatives-header h2 {
  color: #FFD700;
  font-size: 2rem;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.route-summary-info {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1rem;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
}

.routes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-gap: 2rem;
  gap: 2rem;
  margin-bottom: 2rem;
}

.route-option {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.route-option:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 215, 0, 0.5);
}

.route-option.fastest {
  border-left: 5px solid #28a745;
}

.route-option.shortest {
  border-left: 5px solid #007bff;
}

.route-option.economic {
  border-left: 5px solid #ffc107;
}

.route-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.route-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.route-icon {
  font-size: 2rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.route-title h3 {
  color: #fff;
  font-size: 1.3rem;
  margin: 0;
  font-weight: 700;
}

.route-desc {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  margin: 0.25rem 0 0 0;
}

.select-route-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.select-route-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.route-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  position: relative;
}

.metric-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  font-weight: 600;
}

.metric-value {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
}

.metric-diff {
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.metric-diff.positive {
  background: #28a745;
  color: #fff;
}

.metric-diff.negative {
  background: #dc3545;
  color: #fff;
}

.route-details-expand {
  margin-bottom: 1rem;
}

.highways-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.highways-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  font-weight: 600;
}

.highways-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.highway-tag {
  background: rgba(255, 215, 0, 0.2);
  color: #FFD700;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.route-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.action-secondary {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 215, 0, 0.4);
}

.alternatives-footer {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.secondary-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.secondary-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 215, 0, 0.4);
}

.gradient-button.calculating {
  background: linear-gradient(45deg, #6c757d, #adb5bd);
  cursor: not-allowed;
  opacity: 0.7;
}

.gradient-button.calculating:hover {
  transform: none;
}

@media (max-width: 1200px) {
  .routes-grid {
    grid-template-columns: 1fr;
  }
  
  .route-summary-info {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* Validação de Restrições para Caminhão */
.truck-validation-info {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 8px;
}

.truck-validation-info h4 {
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.validation-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.check-item {
  font-size: 0.8rem;
  color: #22c55e;
  font-weight: 600;
}

.validation-note {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin: 0;
  font-style: italic;
}

.route-validation-section {
  margin: 2rem 0;
  background: var(--bg-primary);
  border: 2px solid var(--border-primary);
  border-radius: 16px;
  overflow: hidden;
}

.validation-header {
  padding: 1.5rem;
  background: linear-gradient(135deg, #1e40af, #3b82f6);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.validation-header h2 {
  margin: 0;
  font-size: 1.3rem;
}

.validation-status {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
}

.validation-status.valid {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.validation-status.invalid {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.validation-blockers,
.validation-warnings,
.validation-recommendations {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-primary);
}

.validation-blockers:last-child,
.validation-warnings:last-child,
.validation-recommendations:last-child {
  border-bottom: none;
}

.validation-blockers h3,
.validation-warnings h3,
.validation-recommendations h3 {
  color: var(--text-primary);
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.blocker-item,
.warning-item {
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: 8px;
  border-left: 4px solid;
}

.blocker-item.critical {
  background: rgba(239, 68, 68, 0.1);
  border-left-color: #ef4444;
}

.warning-item.high {
  background: rgba(245, 158, 11, 0.1);
  border-left-color: #f59e0b;
}

.warning-item.medium {
  background: rgba(59, 130, 246, 0.1);
  border-left-color: #3b82f6;
}

.blocker-message,
.warning-message {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.blocker-solution {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-style: italic;
}

.warning-conditions {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

.recommendation-item {
  margin-bottom: 1rem;
  padding: 1rem;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 8px;
}

.recommendation-item.priority-high {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
}

.rec-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.rec-icon {
  font-size: 1.2rem;
}

.rec-title {
  font-weight: 700;
  color: var(--text-primary);
}

.rec-description {
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.rec-actions {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.action-item {
  font-size: 0.85rem;
  color: var(--text-primary);
}

/* Responsive */
@media (max-width: 768px) {
  .route-planner {
    padding: 1rem;
  }
  
  .planner-content {
    grid-template-columns: 1fr;
  }
  
  .planner-header h1 {
    font-size: 2rem;
  }
  
  .input-row {
    flex-direction: column;
  }
  
  .waypoint-input {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .waypoint-input .form-input {
    margin-right: 0;
  }
  
  .route-alternatives {
    padding: 1rem;
    margin-top: 2rem;
  }
  
  .routes-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .route-option {
    padding: 1rem;
  }
  
  .route-metrics {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .alternatives-footer {
    flex-direction: column;
    align-items: center;
  }
}
.route-history {
  padding: 2rem;
  height: 100vh;
  overflow-y: auto;
  background: var(--bg-jupiter);
}

.history-header {
  text-align: center;
  margin-bottom: 2rem;
}

.history-header h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.history-header p {
  color: var(--text-secondary);
  font-size: 1.1rem;
}

.stats-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: transform 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-icon {
  font-size: 2.5rem;
  background: linear-gradient(135deg, var(--accent-gold), var(--highlight));
  padding: 0.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px var(--shadow-soft);
}

.stat-content {
  flex: 1 1;
}

.stat-number {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--accent-gold);
  line-height: 1;
}

.stat-label {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.history-content {
  max-width: 1200px;
  margin: 0 auto;
}

.filters-section {
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.filters-header h3 {
  color: var(--text-primary);
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.filters-controls {
  display: flex;
  gap: 2rem;
  align-items: end;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter-group label {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.form-select {
  padding: 0.5rem;
  border: 2px solid var(--border-primary);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.9rem;
}

.export-btn {
  margin-left: auto;
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
}

.trips-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.trip-item {
  padding: 1.5rem;
  transition: all 0.2s ease;
}

.trip-item:hover {
  transform: translateY(-2px);
}

.trip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.trip-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.trip-date {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.status-badge {
  padding: 0.375rem 0.75rem;
  border-radius: 20px;
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
}

.trip-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--bg-jupiter);
  border-radius: 8px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.detail-icon {
  font-size: 1.1rem;
}

.detail-label {
  color: var(--text-secondary);
}

.detail-value {
  font-weight: 600;
  color: var(--text-primary);
  margin-left: auto;
}

.trip-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

.action-btn {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-primary);
  background: var(--bg-jupiter);
  color: var(--text-primary);
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: var(--accent-gold);
  color: var(--button-text);
  border-color: var(--accent-gold);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .filters-controls {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .trip-details {
    grid-template-columns: 1fr;
  }

  .trip-actions {
    flex-direction: column;
  }
}
/* Lane Visualization Component Styles */

.lane-visualization-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background: #1a1a1a;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.lane-canvas {
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #2c2c2c;
}

.lane-info {
  margin-top: 15px;
  padding: 15px;
  background: #2c2c2c;
  border-radius: 8px;
  color: #ffffff;
}

.lane-stat {
  display: flex;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
  border-bottom: 1px solid #3a3a3a;
}

.lane-stat:last-child {
  border-bottom: none;
}

.lane-stat strong {
  min-width: 120px;
  color: #d4af37;
}

.lane-stat .icon {
  margin-right: 8px;
  font-size: 18px;
}

.divider-indicator {
  color: #ff9800;
  font-weight: 500;
}

.oneway-indicator {
  color: #2196f3;
  font-weight: 500;
}

.lane-visualization-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: #ffffff;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(212, 175, 55, 0.3);
  border-top-color: #d4af37;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.lane-visualization-error {
  padding: 20px;
  background: #ffebee;
  border: 2px solid #f44336;
  border-radius: 8px;
  color: #c62828;
  text-align: center;
}

.error-icon {
  font-size: 32px;
  display: block;
  margin-bottom: 10px;
}

/* Responsive */
@media (max-width: 768px) {
  .lane-visualization-container {
    max-width: 100%;
    padding: 15px;
  }

  .lane-info {
    padding: 10px;
  }

  .lane-stat {
    font-size: 12px;
  }

  .lane-stat strong {
    min-width: 100px;
  }
}

/* Prohibited Segments Overlay Styles */

.prohibited-segments-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.prohibited-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}

.prohibited-segment {
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

/* Alert Modal */
.prohibited-alert-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-in-out;
}

.alert-content {
  background: #1a1a1a;
  padding: 30px;
  border-radius: 12px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(255, 102, 178, 0.3);
  border: 3px solid #FF66B2;
  color: #ffffff;
}

.alert-icon {
  font-size: 48px;
  text-align: center;
  margin-bottom: 15px;
}

.alert-message {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
  color: #FF66B2;
}

.alert-details {
  margin: 15px 0;
  padding: 10px;
  background: #2c2c2c;
  border-radius: 6px;
  font-size: 14px;
}

.alert-details strong {
  color: #d4af37;
}

.alert-tags {
  margin: 15px 0;
  padding: 10px;
  background: #2c2c2c;
  border-radius: 6px;
  font-size: 13px;
}

.alert-tags ul {
  margin: 10px 0 0 20px;
  padding: 0;
}

.alert-tags li {
  margin: 5px 0;
}

.alert-close-btn {
  width: 100%;
  padding: 12px;
  margin-top: 20px;
  background: #FF66B2;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
}

.alert-close-btn:hover {
  background: #FF77C2;
}

/* Prohibited Indicator Badge */
.prohibited-indicator {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1001;
  animation: slideInRight 0.5s ease-out;
}

.prohibited-badge {
  display: inline-block;
  padding: 10px 20px;
  background: linear-gradient(135deg, #FF66B2 0%, #FF4499 100%);
  color: #ffffff;
  border-radius: 25px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(255, 102, 178, 0.4);
  animation: pulse 2s infinite;
}

/* Loading State */
.prohibited-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.spinner-small {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 102, 178, 0.3);
  border-top-color: #FF66B2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Error State */
.prohibited-error {
  padding: 10px;
  background: #ffebee;
  border: 1px solid #f44336;
  border-radius: 6px;
  color: #c62828;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.error-icon-small {
  font-size: 16px;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Night Mode Auto-Contrast */
@media (prefers-color-scheme: dark) {
  .alert-content {
    background: #0a0a0a;
  }

  .alert-details,
  .alert-tags {
    background: #1a1a1a;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .alert-content {
    padding: 20px;
    max-width: 90%;
  }

  .alert-message {
    font-size: 16px;
  }

  .prohibited-indicator {
    top: 10px;
    right: 10px;
  }

  .prohibited-badge {
    padding: 8px 15px;
    font-size: 12px;
  }
}

.style-switcher {
  padding: 20px;
  /* MUDANÇA CRÍTICA: Fundo bege seguro - NÃO BRANCO */
  background: #f5f5dc; /* Bege suave - seguro para motoristas */
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.style-switcher h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  color: #2c3e50;
}

.styles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.style-card {
  padding: 16px;
  /* MUDANÇA: Fundo bege mais escuro */
  background: #e8e8dc; /* Bege escuro suave */
  border: 2px solid #d3d3d3; /* Cinza claro suave */
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.style-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-color: #3498db;
}

.style-card.active {
  /* MUDANÇA: Fundo azul suave */
  background: #d6e8f0; /* Azul acinzentado muito claro */
  border-color: #4a90a4; /* Azul acinzentado suave */
  box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.2);
}

.style-badge {
  display: inline-block;
  padding: 4px 12px;
  background: #3498db;
  color: white;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 8px;
}

.style-card.active .style-badge {
  background: #2196f3;
}

.style-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.style-name {
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 4px;
}

.style-desc {
  font-size: 11px;
  color: #7f8c8d;
  line-height: 1.4;
}

.style-switcher.loading {
  text-align: center;
  padding: 40px;
  color: #7f8c8d;
}

.style-info {
  font-size: 13px;
  color: #666;
  margin: 0 0 16px 0;
  padding: 12px;
  background: #f0f9ff;
  border-left: 4px solid #3b82f6;
  border-radius: 4px;
}

.default-style {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

.usage-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #ef4444;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
}

.style-footer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e5e5;
  text-align: center;
  color: #666;
}

.style-footer small {
  display: block;
  margin: 4px 0;
}

@media (max-width: 768px) {
  .styles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.settings-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.settings-modal {
  background: var(--bg-primary);
  border: 2px solid var(--border-primary);
  border-radius: 16px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  box-shadow: 0 20px 40px var(--shadow-soft);
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.settings-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to right, var(--bg-primary), var(--bg-jupiter));
  border-radius: 16px 16px 0 0;
}

.settings-header h2 {
  font-size: 1.5rem;
}

.close-btn {
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 8px;
  transition: all 0.2s ease;
  font-size: 1.2rem;
}

.close-btn:hover {
  color: var(--text-primary);
  background: rgba(196, 147, 75, 0.1);
}

.settings-content {
  display: flex;
  flex: 1 1;
  min-height: 400px;
}

.settings-nav {
  width: 150px;
  background: var(--bg-jupiter);
  border-right: 1px solid var(--border-primary);
  padding: 1rem 0;
}

.nav-btn {
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  background: none;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.nav-btn:hover {
  background: rgba(196, 147, 75, 0.1);
  color: var(--text-primary);
}

.nav-btn.active {
  background: linear-gradient(to right, var(--accent-gold), var(--highlight));
  color: var(--button-text);
  font-weight: 600;
}

.settings-form {
  flex: 1 1;
  padding: 2rem;
  overflow-y: auto;
}

.form-section h3 {
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  border-bottom: 2px solid var(--accent-gold);
  padding-bottom: 0.5rem;
}

.input-group {
  margin-bottom: 1.5rem;
}

.input-row {
  display: flex;
  gap: 1rem;
}

.input-row .input-group {
  flex: 1 1;
}

.input-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.form-input, .form-select {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.9rem;
  transition: border-color 0.2s ease;
}

.form-input:focus, .form-select:focus {
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 3px rgba(196, 147, 75, 0.1);
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-primary);
  padding: 0.5rem;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.checkbox-label:hover {
  background: rgba(196, 147, 75, 0.05);
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-gold);
}

.settings-footer {
  padding: 1.5rem;
  border-top: 1px solid var(--border-primary);
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  background: var(--bg-jupiter);
  border-radius: 0 0 16px 16px;
}

.cancel-btn {
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--border-primary);
  background: var(--bg-primary);
  color: var(--text-primary);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}

.cancel-btn:hover {
  background: var(--border-primary);
  color: var(--button-text);
}

.gradient-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Estilos para Validação de Altura NA */
.height-input-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.units-toggle-small {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 40px;
}

.units-toggle-small:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  transform: scale(1.05);
}

.height-conversion {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 5px;
  font-weight: 600;
}

.height-validation {
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.validation-message {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.validation-message.success {
  color: #22c55e;
}

.validation-message.warning {
  color: #f59e0b;
}

.validation-message.critical {
  color: #ef4444;
  font-weight: 700;
}

.warning-icon {
  font-size: 1rem;
}

.warning-text {
  flex: 1 1;
}

.height-recommendation {
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(251, 191, 36, 0.2);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 6px;
  color: #d97706;
  font-size: 0.85rem;
  font-weight: 600;
}

.na-standard {
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 4px;
  color: #6366f1;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
  .settings-modal {
    width: 95%;
    max-height: 90vh;
  }
  
  .settings-content {
    flex-direction: column;
  }
  
  .settings-nav {
    width: 100%;
    display: flex;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--border-primary);
  }
  
  .nav-btn {
    min-width: 120px;
    text-align: center;
    justify-content: center;
  }
  
  .settings-form {
    padding: 1rem;
  }
  
  .input-row {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .height-input-container {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  
  .units-toggle-small {
    align-self: flex-start;
    min-width: 60px;
  }
}
.maps-downloader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.3s ease;
}

.maps-downloader-modal {
  background: var(--bg-primary);
  border: 2px solid var(--border-primary);
  border-radius: 16px;
  width: 95%;
  max-width: 1200px;
  max-height: 90vh;
  box-shadow: 0 20px 40px var(--shadow-soft);
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;
  overflow: hidden;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.maps-header {
  padding: 1.5rem;
  border-bottom: 2px solid var(--border-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to right, var(--bg-primary), var(--bg-jupiter));
}

.maps-header h2 {
  font-size: 1.5rem;
  color: var(--text-primary);
  margin: 0;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.close-btn:hover {
  color: var(--text-primary);
  background: rgba(196, 147, 75, 0.1);
}

.maps-content {
  flex: 1 1;
  overflow-y: auto;
  padding: 2rem;
}

/* Providers Section */
.providers-section {
  margin-bottom: 2rem;
}

.providers-section h3 {
  color: var(--text-primary);
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--accent-gold);
  padding-bottom: 0.5rem;
}

.providers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.provider-card {
  padding: 1rem;
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  background: var(--bg-jupiter);
  transition: all 0.2s ease;
}

.provider-card.active {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
}

.provider-card.inactive {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.provider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.provider-name {
  font-weight: 600;
  color: var(--text-primary);
}

.provider-status {
  font-size: 0.9rem;
  font-weight: 500;
}

.provider-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}

.provider-cost {
  color: var(--text-secondary);
}

.api-key-input {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  font-size: 0.8rem;
  width: 120px;
}

/* Map Type Section */
.map-type-section {
  margin-bottom: 2rem;
}

.map-type-section h3 {
  color: var(--text-primary);
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--accent-gold);
  padding-bottom: 0.5rem;
}

.map-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.map-type-card {
  padding: 1.5rem;
  border: 2px solid var(--border-primary);
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--bg-jupiter);
}

.map-type-card.active {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.2);
}

.map-type-card.inactive {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.05);
  opacity: 0.7;
}

.map-type-card:hover.active {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.3);
}

.map-type-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.map-type-name {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
}

.map-type-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.map-type-card.active .map-type-desc {
  color: #059669;
}

.map-type-card.inactive .map-type-desc {
  color: #dc2626;
}

/* Region Section */
.region-section {
  margin-bottom: 2rem;
}

.region-section h3 {
  color: var(--text-primary);
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--accent-gold);
  padding-bottom: 0.5rem;
}

.region-tabs {
  display: flex;
  gap: 1rem;
}

.region-tab {
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--border-primary);
  background: var(--bg-jupiter);
  color: var(--text-primary);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.region-tab:hover {
  background: var(--accent-gold);
  color: var(--button-text);
}

.region-tab.active {
  background: linear-gradient(135deg, var(--accent-gold), var(--highlight));
  color: var(--button-text);
  border-color: var(--accent-gold);
}

/* Maps Section */
.maps-section {
  margin-bottom: 2rem;
}

.maps-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.maps-controls h3 {
  color: var(--text-primary);
  margin: 0;
}

.selection-controls {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.select-all-btn, .clear-btn {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-primary);
  background: var(--bg-jupiter);
  color: var(--text-primary);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.select-all-btn:hover, .clear-btn:hover {
  background: var(--accent-gold);
  color: var(--button-text);
}

.selection-count {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
}

.maps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 1rem;
  background: rgba(196, 147, 75, 0.05);
}

.map-item {
  padding: 1rem;
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  background: var(--bg-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.map-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--shadow-soft);
}

.map-item.selected {
  border-color: var(--accent-gold);
  background: rgba(196, 147, 75, 0.1);
}

.map-item.downloaded {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
}

.map-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.map-name {
  font-weight: 500;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.downloaded-badge {
  font-size: 1.2rem;
}

.download-progress {
  margin-top: 0.5rem;
}

.progress-bar {
  height: 4px;
  background: rgba(196, 147, 75, 0.3);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0.25rem;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(to right, var(--accent-gold), var(--highlight));
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

/* Download Section */
.download-section {
  border-top: 2px solid var(--border-primary);
  padding-top: 2rem;
}

.download-btn {
  width: 100%;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, var(--accent-gold), var(--highlight));
  color: var(--button-text);
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 1rem;
  transition: all 0.2s ease;
}

.download-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--shadow-soft);
}

.download-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.download-info {
  background: rgba(196, 147, 75, 0.1);
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--accent-gold);
}

.download-info p {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Downloaded Section */
.downloaded-section {
  border-top: 2px solid var(--border-primary);
  padding-top: 2rem;
}

.downloaded-section h3 {
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.downloaded-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.downloaded-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  background: var(--bg-jupiter);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
}

.downloaded-name {
  font-weight: 500;
  color: var(--text-primary);
}

.downloaded-region {
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
}

.downloaded-size {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.delete-map-btn {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.delete-map-btn:hover {
  background: rgba(239, 68, 68, 0.1);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .maps-downloader-modal {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
  
  .providers-grid {
    grid-template-columns: 1fr;
  }
  
  .region-tabs {
    flex-direction: column;
  }
  
  .maps-controls {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  
  .selection-controls {
    justify-content: center;
  }
  
  .maps-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.navigation-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  animation: fadeIn 0.3s ease;
}

.navigation-modal {
  background: var(--bg-primary);
  border: 3px solid var(--accent-gold);
  border-radius: 20px;
  width: 95%;
  max-width: 800px;
  max-height: 95vh;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  animation: slideUp 0.4s ease;
  overflow: hidden;
}

.navigation-header {
  padding: 2rem;
  border-bottom: 3px solid var(--accent-gold);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--bg-jupiter), var(--border-primary));
}

.navigation-header h2 {
  font-size: 2rem;
  color: var(--accent-gold);
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.close-btn {
  background: var(--alert-danger);
  border: none;
  font-size: 1.8rem;
  color: white;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: all 0.2s ease;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.navigation-content {
  flex: 1 1;
  overflow-y: auto;
  padding: 2rem;
}

/* Cache Status */
.cache-status {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: rgba(34, 197, 94, 0.1);
  border: 2px solid #22c55e;
  border-radius: 12px;
}

.cache-status h3 {
  color: #22c55e;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.cache-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.stat-item {
  text-align: center;
  padding: 1rem;
  background: var(--bg-primary);
  border-radius: 8px;
  border: 1px solid #22c55e;
}

.stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  color: #22c55e;
  line-height: 1;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

/* Route Setup */
.route-setup h3 {
  color: var(--accent-gold);
  margin-bottom: 1.5rem;
  font-size: 1.3rem;
  border-bottom: 2px solid var(--accent-gold);
  padding-bottom: 0.5rem;
}

.input-group {
  margin-bottom: 1.5rem;
}

.input-group label {
  display: block;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.address-input {
  width: 100%;
  padding: 1rem;
  border: 2px solid var(--border-primary);
  border-radius: 10px;
  background: var(--bg-jupiter);
  color: var(--text-primary);
  font-size: 1rem;
  transition: all 0.2s ease;
}

.address-input:focus {
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 3px rgba(201, 161, 75, 0.2);
}

.error-message {
  background: rgba(239, 68, 68, 0.1);
  border: 2px solid var(--alert-danger);
  color: var(--alert-danger);
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-weight: 500;
}

.route-options {
  margin: 2rem 0;
  padding: 1.5rem;
  background: rgba(196, 147, 75, 0.1);
  border: 1px solid var(--accent-gold);
  border-radius: 10px;
}

.route-options h4 {
  color: var(--accent-gold);
  margin-bottom: 1rem;
}

.truck-specs {
  display: flex;
  gap: 1.5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.start-navigation-btn {
  width: 100%;
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 2rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3);
}

.start-navigation-btn:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.4);
}

.start-navigation-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.navigation-info {
  background: rgba(196, 147, 75, 0.1);
  padding: 1.5rem;
  border-radius: 10px;
  border: 1px solid var(--accent-gold);
}

.navigation-info p {
  margin: 0.5rem 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* Active Navigation */
.active-navigation {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(22, 163, 74, 0.05));
  border: 2px solid #22c55e;
  border-radius: 16px;
  padding: 2rem;
}

.navigation-display h3 {
  color: #22c55e;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.route-progress {
  margin-bottom: 2rem;
}

.progress-bar {
  height: 12px;
  background: rgba(34, 197, 94, 0.2);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(to right, #22c55e, #16a34a);
  transition: width 0.5s ease;
}

.progress-text {
  font-weight: 600;
  color: #22c55e;
  font-size: 0.9rem;
}

.current-status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 2rem;
}

.status-item {
  background: var(--bg-primary);
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid #22c55e;
  text-align: center;
}

.status-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.status-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: #22c55e;
}

.next-instruction {
  background: var(--bg-primary);
  padding: 1.5rem;
  border-radius: 12px;
  border: 2px solid var(--accent-gold);
  margin-bottom: 2rem;
}

.next-instruction h4 {
  color: var(--accent-gold);
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.instruction-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.instruction-text {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-primary);
}

.instruction-distance {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--accent-gold);
}

.eta-display {
  background: rgba(196, 147, 75, 0.2);
  padding: 1rem;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.eta-label {
  color: var(--text-secondary);
  font-weight: 500;
}

.eta-time {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--accent-gold);
}

.navigation-controls {
  text-align: center;
}

.stop-navigation-btn {
  padding: 1rem 2rem;
  background: linear-gradient(135deg, var(--alert-danger), #dc2626);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.stop-navigation-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

/* Example Destinations */
.example-destinations {
  margin-top: 2rem;
  padding: 1.5rem;
  background: rgba(196, 147, 75, 0.05);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
}

.example-destinations h4 {
  color: var(--text-primary);
  margin-bottom: 1rem;
  font-size: 1rem;
}

.example-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.example-country {
  font-size: 0.9rem;
  line-height: 1.4;
}

.example-country strong {
  color: var(--accent-gold);
  display: inline-block;
  margin-bottom: 0.25rem;
  width: 100px;
}

.example-country span {
  color: var(--text-secondary);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .navigation-modal {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
  
  .navigation-header {
    padding: 1rem;
  }
  
  .navigation-header h2 {
    font-size: 1.5rem;
  }
  
  .navigation-content {
    padding: 1rem;
  }
  
  .cache-stats {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .truck-specs {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .instruction-content {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
}
/* 📍 KingRoad GPS - Recent Destinations Styles */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease-out;
}

.recent-destinations-modal {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border-radius: 20px;
  border: 2px solid rgba(255, 215, 0, 0.3);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: slideIn 0.4s ease-out;
  overflow: hidden;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { 
    opacity: 0; 
    transform: translateY(-30px) scale(0.95); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}

/* Header */
.modal-header {
  padding: 24px 28px;
  border-bottom: 2px solid rgba(255, 215, 0, 0.2);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.05));
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.modal-title {
  color: #FFD700;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 12px;
}

.destinations-count {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
}

.close-button {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 8px 12px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-button:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #FFD700;
  color: #FFD700;
  transform: scale(1.1);
}

/* Search and Filter */
.search-filter-section {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.search-bar {
  flex: 1 1;
  min-width: 250px;
  position: relative;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.1rem;
}

.search-input {
  width: 100%;
  padding: 12px 12px 12px 40px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: #fff;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: #FFD700;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.category-filter {
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 180px;
}

.category-filter:focus {
  outline: none;
  border-color: #FFD700;
  background: rgba(255, 255, 255, 0.15);
}

.category-filter option {
  background: #1a1a2e;
  color: #fff;
}

/* Bulk Actions */
.bulk-actions {
  padding: 16px 28px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.bulk-select {
  display: flex;
  align-items: center;
}

.checkbox-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #fff;
  font-size: 1rem;
  gap: 8px;
  -webkit-user-select: none;
          user-select: none;
}

.checkbox-container input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}

.bulk-buttons {
  display: flex;
  gap: 12px;
}

.bulk-delete-btn, .clear-all-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 2px solid;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.bulk-delete-btn {
  background: rgba(220, 53, 69, 0.2);
  border-color: #dc3545;
  color: #dc3545;
}

.bulk-delete-btn:hover {
  background: #dc3545;
  color: #fff;
  transform: translateY(-2px);
}

.clear-all-btn {
  background: rgba(255, 193, 7, 0.2);
  border-color: #ffc107;
  color: #ffc107;
}

.clear-all-btn:hover {
  background: #ffc107;
  color: #000;
  transform: translateY(-2px);
}

/* Destinations List */
.destinations-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 20px 28px;
  max-height: 500px;
}

.destinations-list::-webkit-scrollbar {
  width: 6px;
}

.destinations-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.destinations-list::-webkit-scrollbar-thumb {
  background: #FFD700;
  border-radius: 3px;
}

.destinations-list::-webkit-scrollbar-thumb:hover {
  background: #FFA500;
}

.loading-state, .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}

.loading-spinner {
  font-size: 3rem;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
  color: #FFD700;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state h3 {
  color: #fff;
  margin-bottom: 8px;
  font-size: 1.4rem;
}

/* Destination Card */
.destination-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  margin-bottom: 16px;
  transition: all 0.3s ease;
  overflow: hidden;
}

.destination-card:hover {
  border-color: rgba(255, 215, 0, 0.4);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.05));
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.2);
}

.card-content {
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.destination-select {
  margin-top: 4px;
}

.destination-info {
  flex: 1 1;
}

.destination-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.category-icon {
  font-size: 1.2rem;
}

.destination-name {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

.favorite-star {
  color: #FFD700;
  font-size: 1.1rem;
}

.destination-address {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.destination-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.status-badge, .frequency-badge, .date-badge {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.status-entered {
  background: rgba(108, 117, 125, 0.3);
  color: #6c757d;
}

.status-navigated {
  background: rgba(0, 123, 255, 0.3);
  color: #007bff;
}

.status-completed {
  background: rgba(40, 167, 69, 0.3);
  color: #28a745;
}

.status-cancelled {
  background: rgba(220, 53, 69, 0.3);
  color: #dc3545;
}

.frequency-badge {
  background: rgba(255, 193, 7, 0.3);
  color: #ffc107;
}

.date-badge {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.coordinates {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  font-family: monospace;
}

.destination-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-left: auto;
  transition: all 0.3s ease;
}

/* Desktop: hover effect */
@media (hover: hover) and (pointer: fine) {
  .destination-actions {
    opacity: 0;
    transform: translateX(10px);
    pointer-events: none;
  }

  .destination-card:hover .destination-actions {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }
}

/* Mobile/Tablet: sistema de menu expansível */
@media (hover: none) or (pointer: coarse) {
  .destination-actions {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    flex-direction: row;
    align-items: center;
  }
  
  .mobile-only {
    display: flex;
  }
  
  .actions-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    position: absolute;
    right: 0;
    top: 100%;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 8px;
    padding: 0;
    z-index: 10;
  }
  
  .destination-actions.expanded .actions-group {
    max-height: 200px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .action-btn {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }
  
  .destination-actions {
    position: relative;
  }
}

/* Desktop: esconder botão de menu */
@media (hover: hover) and (pointer: fine) {
  .mobile-only {
    display: none;
  }
  
  .actions-group {
    display: contents;
  }
}

.action-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 2px solid;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.action-btn:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.favorite-btn {
  border-color: rgba(255, 215, 0, 0.6);
  color: rgba(255, 215, 0, 0.8);
}

.favorite-btn.favorited {
  border-color: #FFD700;
  color: #FFD700;
  background: rgba(255, 215, 0, 0.2);
}

.favorite-btn:hover {
  background: rgba(255, 215, 0, 0.3);
  border-color: #FFD700;
  color: #FFD700;
}

.save-btn {
  border-color: rgba(76, 175, 80, 0.6);
  color: rgba(76, 175, 80, 0.9);
}

.save-btn:hover {
  background: rgba(76, 175, 80, 0.3);
  border-color: #4CAF50;
  color: #4CAF50;
}

.share-btn {
  border-color: rgba(33, 150, 243, 0.6);
  color: rgba(33, 150, 243, 0.9);
}

.share-btn:hover {
  background: rgba(33, 150, 243, 0.3);
  border-color: #2196F3;
  color: #2196F3;
}

.delete-btn {
  border-color: rgba(220, 53, 69, 0.6);
  color: rgba(220, 53, 69, 0.8);
}

.delete-btn:hover {
  background: rgba(220, 53, 69, 0.3);
  border-color: #dc3545;
  color: #dc3545;
}

.navigate-btn {
  border-color: rgba(255, 193, 7, 0.6);
  color: rgba(255, 193, 7, 0.9);
}

.navigate-btn:hover {
  background: rgba(255, 193, 7, 0.3);
  border-color: #FFC107;
  color: #FFC107;
}

.menu-toggle-btn {
  border-color: rgba(255, 255, 255, 0.6);
  color: rgba(255, 255, 255, 0.9);
  font-weight: bold;
  letter-spacing: 1px;
}

.menu-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #fff;
  color: #fff;
}

/* Delete Confirmation Modal */
.delete-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}

.delete-confirm-modal {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border-radius: 16px;
  border: 2px solid rgba(220, 53, 69, 0.5);
  padding: 32px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  animation: slideIn 0.3s ease-out;
}

.delete-confirm-modal h3 {
  color: #dc3545;
  margin-bottom: 16px;
  font-size: 1.4rem;
}

.delete-confirm-modal p {
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.5;
}

.warning-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  font-style: italic;
}

.confirm-buttons {
  display: flex;
  gap: 16px;
  margin-top: 24px;
  justify-content: center;
}

.cancel-btn, .confirm-delete-btn {
  padding: 12px 24px;
  border-radius: 8px;
  border: 2px solid;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cancel-btn {
  background: rgba(108, 117, 125, 0.2);
  border-color: #6c757d;
  color: #6c757d;
}

.cancel-btn:hover {
  background: #6c757d;
  color: #fff;
}

.confirm-delete-btn {
  background: rgba(220, 53, 69, 0.2);
  border-color: #dc3545;
  color: #dc3545;
}

.confirm-delete-btn:hover {
  background: #dc3545;
  color: #fff;
}

/* Footer */
.modal-footer {
  padding: 16px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
}

.footer-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
  .recent-destinations-modal {
    width: 95%;
    max-height: 95vh;
    margin: 20px;
  }
  
  .modal-header {
    padding: 20px;
  }
  
  .modal-title {
    font-size: 1.5rem;
  }
  
  .search-filter-section {
    flex-direction: column;
    gap: 12px;
  }
  
  .search-bar, .category-filter {
    width: 100%;
    min-width: 0;
    min-width: initial;
  }
  
  .bulk-actions {
    padding: 12px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .destinations-list {
    padding: 16px 20px;
  }
  
  .card-content {
    padding: 16px;
    flex-direction: column;
    gap: 12px;
  }
  
  .destination-actions {
    flex-direction: row;
    align-self: center;
  }
  
  .destination-meta {
    justify-content: center;
    text-align: center;
  }
  
  .confirm-buttons {
    flex-direction: column;
  }
}
/* POI Filter Settings Component */
.poi-filter-settings {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #1A1A1A;
  z-index: 1000;
  overflow-y: auto;
  color: white;
}

/* Header */
.poi-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: #2A2A2A;
  border-bottom: 1px solid #3A3A3A;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.poi-filter-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.back-button,
.save-button {
  min-height: 44px;
  min-width: 44px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.back-button {
  background: transparent;
  color: #4A90E2;
}

.back-button:hover {
  background: rgba(74, 144, 226, 0.1);
}

.save-button {
  background: #4A90E2;
  color: white;
}

.save-button:hover {
  background: #357ABD;
}

.save-button:active {
  background: #2868A8;
}

/* User Context Section */
.user-context {
  padding: 16px;
  background: #2A2A2A;
  border-bottom: 1px solid #3A3A3A;
}

.context-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}

.context-label {
  font-size: 14px;
  color: #B0B0B0;
}

.context-value {
  font-size: 16px;
  font-weight: 600;
  color: white;
}

/* Show All Toggle */
.show-all-toggle {
  padding: 16px;
  background: #2A2A2A;
  border-bottom: 2px solid #4A90E2;
  margin-bottom: 8px;
}

.toggle-container {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.toggle-container input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  cursor: pointer;
}

.toggle-label {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: white;
}

.toggle-icon {
  font-size: 20px;
  margin-right: 8px;
}

/* POI Sections */
.poi-sections {
  padding: 16px;
}

.poi-section {
  margin-bottom: 24px;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #3A3A3A;
}

.section-icon {
  font-size: 20px;
}

.section-title {
  flex: 1 1;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: white;
}

.section-count {
  font-size: 14px;
  color: #B0B0B0;
}

/* Category List */
.category-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.category-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 12px;
  background: #2A2A2A;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-user-select: none;
          user-select: none;
}

.category-item:hover {
  background: #333333;
}

.category-item.active {
  background: rgba(74, 144, 226, 0.15);
  border: 1px solid #4A90E2;
}

/* Custom Checkbox */
.category-checkbox {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.category-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.checkmark {
  width: 24px;
  height: 24px;
  background: #3A3A3A;
  border: 2px solid #4A90E2;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.category-checkbox input[type="checkbox"]:checked ~ .checkmark {
  background: #4A90E2;
}

.category-checkbox input[type="checkbox"]:checked ~ .checkmark::after {
  content: '✓';
  color: white;
  font-size: 16px;
  font-weight: bold;
}

/* Category Icon */
.category-icon {
  font-size: 28px;
  min-width: 40px;
  text-align: center;
}

/* Category Info */
.category-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.category-label {
  font-size: 16px;
  font-weight: 500;
  color: white;
  line-height: 1.2;
}

.category-description {
  font-size: 12px;
  color: #B0B0B0;
  line-height: 1.3;
}

/* Footer */
.poi-filter-footer {
  padding: 16px;
  background: #2A2A2A;
  border-top: 1px solid #3A3A3A;
}

.info-message {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  background: rgba(74, 144, 226, 0.1);
  border-radius: 8px;
  border-left: 3px solid #4A90E2;
}

.info-icon {
  font-size: 20px;
  margin-top: 2px;
}

.info-text {
  flex: 1 1;
  font-size: 14px;
  color: #B0B0B0;
  line-height: 1.4;
}

/* Loading State */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  font-size: 16px;
  color: #B0B0B0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .poi-filter-header h2 {
    font-size: 18px;
  }

  .context-value {
    font-size: 14px;
  }

  .category-item {
    min-height: 52px;
  }

  .category-icon {
    font-size: 24px;
    min-width: 36px;
  }

  .category-label {
    font-size: 15px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .category-item,
  .back-button,
  .save-button,
  .checkmark {
    transition: none;
  }
}

/* Focus States for Keyboard Navigation */
.back-button:focus,
.save-button:focus,
.toggle-container:focus-within,
.category-item:focus-within {
  outline: 2px solid #4A90E2;
  outline-offset: 2px;
}

/* 🚨 KingRoad GPS - Direction Alerts & Chevron System */

.direction-alert {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: alertFadeIn 0.5s ease-out;
}

.direction-alert.prepare {
  opacity: 0.4;
}

.direction-alert.warning {
  opacity: 0.7;
}

.direction-alert.critical {
  opacity: 0.95;
}

/* CHEVRON GIGANTE - Toma a Tela Toda */
.chevron-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.1);
}

/* Chevron Pattern - Divisa de Sargento Gigante */
.chevron-pattern {
  font-size: 25vw; /* 25% da largura da viewport - GIGANTE */
  font-weight: 900;
  text-shadow: 
    0 0 20px rgba(255, 255, 255, 0.8),
    0 0 40px rgba(255, 255, 255, 0.6),
    0 0 60px rgba(255, 255, 255, 0.4);
  filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.7));
}

/* ANIMAÇÕES POR DIREÇÃO */

/* Sair à DIREITA - Chevron corre ESQUERDA → DIREITA */
.chevron-overlay.right .chevron-pattern {
  color: #22c55e; /* Verde */
  animation: slideRightChevron 2s ease-in-out infinite;
}

.chevron-overlay.right.warning .chevron-pattern {
  color: #f59e0b; /* Amarelo */
  animation: slideRightChevron 1.5s ease-in-out infinite;
}

.chevron-overlay.right.critical .chevron-pattern {
  color: #ef4444; /* Vermelho */
  animation: slideRightChevron 0.6s ease-in-out infinite;
}

/* Sair à ESQUERDA - Chevron corre DIREITA → ESQUERDA */
.chevron-overlay.left .chevron-pattern {
  color: #22c55e; /* Verde */
  animation: slideLeftChevron 2s ease-in-out infinite;
}

.chevron-overlay.left.warning .chevron-pattern {
  color: #f59e0b; /* Amarelo */
  animation: slideLeftChevron 1.5s ease-in-out infinite;
}

.chevron-overlay.left.critical .chevron-pattern {
  color: #ef4444; /* Vermelho */
  animation: slideLeftChevron 0.6s ease-in-out infinite;
}

/* Seguir em FRENTE - Chevron pulsa no centro */
.chevron-overlay.straight .chevron-pattern {
  color: #3b82f6; /* Azul */
  animation: pulseStraightChevron 2s ease-in-out infinite;
}

.chevron-overlay.straight.warning .chevron-pattern {
  color: #f59e0b; /* Amarelo */
  animation: pulseStraightChevron 1.5s ease-in-out infinite;
}

.chevron-overlay.straight.critical .chevron-pattern {
  color: #ef4444; /* Vermelho */
  animation: pulseStraightChevron 0.6s ease-in-out infinite;
}

/* KEYFRAMES - CHEVRON CORRENDO PELA TELA */

/* Direita: Esquerda → Direita */
@keyframes slideRightChevron {
  0% {
    transform: translateX(-120vw);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  50% {
    transform: translateX(0);
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateX(120vw);
    opacity: 0;
  }
}

/* Esquerda: Direita → Esquerda */
@keyframes slideLeftChevron {
  0% {
    transform: translateX(120vw) scaleX(-1);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  50% {
    transform: translateX(0) scaleX(-1);
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateX(-120vw) scaleX(-1);
    opacity: 0;
  }
}

/* Frente: Pulsar no centro */
@keyframes pulseStraightChevron {
  0%, 100% {
    transform: scale(0.8) rotate(0deg);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2) rotate(0deg);
    opacity: 1;
  }
}

/* INFORMAÇÕES DO EXIT */
.exit-info {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: white;
  z-index: 1001;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 20px 30px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.distance-display {
  font-size: 4rem;
  font-weight: 900;
  color: #fbbf24; /* Dourado */
  text-shadow: 
    0 0 10px rgba(251, 191, 36, 0.8),
    0 4px 8px rgba(0, 0, 0, 0.3);
  margin-bottom: 10px;
}

.exit-name {
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  margin-bottom: 8px;
}

.exit-description {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* BARRA DE PROGRESSO */
.alert-progress {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 12px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.4);
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e);
  border-radius: 4px;
  transition: width 0.3s ease;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

/* MODO NOTURNO - Mais Intenso */
.direction-alert.night-mode .chevron-pattern {
  font-size: 30vw; /* Ainda maior à noite */
  text-shadow: 
    0 0 30px rgba(255, 255, 255, 1),
    0 0 60px rgba(255, 255, 255, 0.8),
    0 0 90px rgba(255, 255, 255, 0.6);
  filter: 
    drop-shadow(0 0 50px rgba(255, 255, 255, 0.9))
    brightness(1.3)
    contrast(1.2);
}

.direction-alert.night-mode .exit-info {
  background: rgba(0, 0, 0, 0.9);
  border: 3px solid rgba(255, 255, 255, 0.6);
  box-shadow: 
    0 15px 40px rgba(0, 0, 0, 0.8),
    0 0 25px rgba(255, 255, 255, 0.3);
}

.direction-alert.night-mode .distance-display {
  font-size: 5rem;
  text-shadow: 
    0 0 20px rgba(251, 191, 36, 1),
    0 0 40px rgba(251, 191, 36, 0.8),
    0 4px 8px rgba(0, 0, 0, 0.5);
}

/* MODO DIURNO - Mais Sutil */
.direction-alert.day-mode .chevron-overlay {
  background: rgba(0, 0, 0, 0.05);
}

.direction-alert.day-mode .chevron-pattern {
  text-shadow: 
    0 0 15px rgba(255, 255, 255, 0.6),
    0 0 30px rgba(255, 255, 255, 0.4);
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
}

/* RESPONSIVIDADE MOBILE */
@media (max-width: 768px) {
  .chevron-pattern {
    font-size: 35vw; /* Ainda maior no mobile */
  }
  
  .direction-alert.night-mode .chevron-pattern {
    font-size: 40vw;
  }
  
  .exit-info {
    top: 15%;
    padding: 15px 20px;
  }
  
  .distance-display {
    font-size: 3rem;
  }
  
  .exit-name {
    font-size: 1.4rem;
  }
  
  .exit-description {
    font-size: 1rem;
  }
}

/* ANIMAÇÃO DE ENTRADA */
@keyframes alertFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* EFEITOS ESPECIAIS PARA ALERTAS CRÍTICOS */
.direction-alert.critical .chevron-overlay {
  animation: criticalPulse 0.5s ease-in-out infinite alternate;
}

@keyframes criticalPulse {
  0% {
    background: rgba(239, 68, 68, 0.1);
  }
  100% {
    background: rgba(239, 68, 68, 0.2);
  }
}
/* 🚛 KingRoad GPS - Smart Reroute Alert Styles */

.smart-reroute-alert-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-out;
}

.smart-reroute-alert {
  background: linear-gradient(135deg, #1e293b, #334155);
  border: 3px solid var(--accent-gold);
  border-radius: 20px;
  max-width: 800px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  color: white;
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(251, 191, 36, 0.3);
  animation: slideUp 0.4s ease-out;
}

/* Header */
.alert-header {
  padding: 1.5rem;
  background: linear-gradient(135deg, var(--primary-gold), var(--accent-gold));
  color: #000;
  border-radius: 17px 17px 0 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.alert-icon {
  font-size: 2.5rem;
  animation: pulse 2s ease-in-out infinite;
}

.alert-title h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
  font-weight: 800;
}

.countdown {
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.8;
  animation: countdownPulse 1s ease-in-out infinite;
}

/* Strategy Sections */
.reroute-strategy {
  padding: 1.5rem;
}

.strategy-section {
  margin-bottom: 1.5rem;
}

.strategy-section h3 {
  color: var(--accent-gold);
  margin-bottom: 1rem;
  font-size: 1.1rem;
  font-weight: 700;
  border-bottom: 2px solid rgba(251, 191, 36, 0.3);
  padding-bottom: 0.5rem;
}

/* Return Point */
.return-point {
  background: rgba(34, 197, 94, 0.1);
  border: 2px solid rgba(34, 197, 94, 0.3);
  border-radius: 10px;
  padding: 1rem;
}

.point-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #22c55e;
  margin-bottom: 0.5rem;
}

.point-distance {
  font-size: 0.9rem;
  color: #a1a1aa;
  margin-bottom: 0.5rem;
}

.point-instructions {
  font-size: 0.9rem;
  color: #e4e4e7;
  font-style: italic;
}

.no-return-point {
  background: rgba(245, 158, 11, 0.1);
  border: 2px solid rgba(245, 158, 11, 0.3);
  border-radius: 10px;
  padding: 1rem;
  color: #f59e0b;
  font-weight: 600;
}

/* Phases */
.phases {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
}

.phase {
  background: rgba(59, 130, 246, 0.1);
  border: 2px solid rgba(59, 130, 246, 0.3);
  border-radius: 10px;
  padding: 1rem;
}

.phase-1 {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.1);
}

.phase-2 {
  border-color: rgba(59, 130, 246, 0.4);
  background: rgba(59, 130, 246, 0.1);
}

.phase-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.phase-number {
  background: var(--accent-gold);
  color: #000;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
}

.phase-title {
  font-size: 1rem;
  font-weight: 700;
  color: #f1f5f9;
}

.phase-description {
  color: #cbd5e1;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.phase-time {
  font-size: 0.8rem;
  color: var(--accent-gold);
  font-weight: 600;
}

/* Impact Grid */
.impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.impact-item {
  background: rgba(99, 102, 241, 0.1);
  border: 2px solid rgba(99, 102, 241, 0.3);
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
}

.impact-icon {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.impact-label {
  font-size: 0.8rem;
  color: #a1a1aa;
  margin-bottom: 0.25rem;
}

.impact-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-gold);
}

/* Safety Philosophy */
.safety-philosophy {
  background: rgba(251, 191, 36, 0.1);
  border: 2px solid rgba(251, 191, 36, 0.3);
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.philosophy-icon {
  font-size: 2rem;
}

.philosophy-text {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #f1f5f9;
}

.philosophy-text strong {
  color: var(--accent-gold);
}

/* Action Buttons */
.alert-actions {
  padding: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  gap: 1rem;
  justify-content: stretch;
}

.btn-accept,
.btn-dismiss {
  flex: 1 1;
  padding: 1rem 1.5rem;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-accept {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.btn-accept:hover {
  background: linear-gradient(135deg, #16a34a, #15803d);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(34, 197, 94, 0.4);
}

.btn-dismiss {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.btn-dismiss:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4);
}

/* Immediate Instructions */
.immediate-instructions {
  background: rgba(15, 23, 42, 0.8);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
  margin-top: 1rem;
}

.immediate-instructions h4 {
  color: var(--accent-gold);
  margin-bottom: 1rem;
  font-size: 1rem;
}

.instruction-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.instruction-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
}

.instruction-step {
  background: var(--accent-gold);
  color: #000;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.instruction-text {
  font-size: 0.9rem;
  color: #e4e4e7;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(50px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes countdownPulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* Responsive */
@media (max-width: 768px) {
  .smart-reroute-alert {
    width: 95%;
    max-height: 95vh;
  }
  
  .alert-header {
    padding: 1rem;
  }
  
  .alert-icon {
    font-size: 2rem;
  }
  
  .alert-title h2 {
    font-size: 1.2rem;
  }
  
  .reroute-strategy {
    padding: 1rem;
  }
  
  .impact-grid {
    grid-template-columns: 1fr;
  }
  
  .alert-actions {
    flex-direction: column;
    padding: 1rem;
  }
  
  .safety-philosophy {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
}
/* 🚫 KingRoad GPS - Prohibited Exit Alert Styles */

.prohibited-exit-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* Não bloquear interações */
  z-index: 2900;
}

/* POSICIONAMENTO CONTEXTUAL DOS ALERTAS */

/* Saída à DIREITA - Alerta no canto superior direito */
.alert-position-right {
  position: absolute;
  top: 8%;
  right: 3%;
  transform: none;
}

/* Saída à ESQUERDA - Alerta no canto superior esquerdo */
.alert-position-left {
  position: absolute;
  top: 8%;
  left: 3%;
  transform: none;
}

/* Seguir em FRENTE - Alerta no centro superior */
.alert-position-center {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
}

/* ALERTA PRINCIPAL DE SAÍDA PROIBIDA */
.prohibited-exit-alert {
  /* CRITICAL: Position at BOTTOM to never block navigation instructions */
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;  /* Lower z-index - navigation has priority */
  
  background: linear-gradient(135deg, 
    rgba(255, 105, 180, 0.95), /* Rosa */
    rgba(255, 20, 147, 0.90)   /* Rosa mais escuro */
  );
  border: 4px solid #FF1493;
  border-radius: 20px;
  box-shadow: 
    0 15px 40px rgba(255, 20, 147, 0.4),
    0 0 30px rgba(255, 105, 180, 0.6),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  animation: slideUpAlert 0.5s ease-out, alertPulse 2s ease-in-out infinite;
  width: 320px;
  padding: 16px;
  overflow: hidden;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

@keyframes slideUpAlert {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.alert-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.alert-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

/* Auto-hide progress bar */
.prohibited-exit-alert .auto-hide-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 0 0 16px 16px;
  overflow: hidden;
}

.prohibited-exit-alert .auto-hide-progress::after {
  content: '';
  display: block;
  height: 100%;
  background: #ffffff;
  animation: progressBar 4s linear;
}

/* X PULSANTE GRANDE E VERMELHO */
.prohibited-x-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 auto 1rem auto;
  background: radial-gradient(circle, #FF0000, #CC0000);
  border-radius: 50%;
  box-shadow: 
    0 8px 25px rgba(255, 0, 0, 0.5),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

.x-symbol {
  font-size: 2.5rem;
  font-weight: 900;
  color: white;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
  animation: xPulse 1s ease-in-out infinite;
}

.pulse-ring {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 3px solid rgba(255, 0, 0, 0.6);
  border-radius: 50%;
  animation: pulseRing 2s ease-in-out infinite;
}

/* PAINEL DE INFORMAÇÕES */
.exit-info-panel {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
  color: white;
}

.exit-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.exit-icon {
  font-size: 1.5rem;
}

.exit-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: #FFFFFF;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.prohibition-info {
  margin-bottom: 1rem;
}

.parkway-name {
  font-size: 1rem;
  font-weight: 700;
  color: #FFE4E1;
  margin-bottom: 0.5rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.prohibition-reason {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.distance-info {
  font-size: 0.85rem;
  color: #FFFF99;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.warning-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.fine-warning {
  font-size: 0.8rem;
  color: #FFFF99;
  font-weight: 600;
}

.severity-badge {
  background: rgba(255, 0, 0, 0.8);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* INDICADOR DE DIREÇÃO */
.direction-indicator {
  position: absolute;
  top: -15px;
  right: -15px;
  background: rgba(255, 215, 0, 0.9);
  border: 3px solid #FFD700;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
  animation: directionPulse 1.5s ease-in-out infinite;
}

.direction-arrow {
  font-size: 1.3rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* ALERTAS PREVENTIVOS (ALTA VELOCIDADE) */
.preventive-alert {
  background: linear-gradient(135deg, 
    rgba(255, 165, 0, 0.9), /* Laranja */
    rgba(255, 140, 0, 0.85)
  );
  border: 3px solid #FF8C00;
  border-radius: 15px;
  padding: 1rem 1.5rem;
  box-shadow: 
    0 10px 25px rgba(255, 140, 0, 0.3),
    0 0 20px rgba(255, 165, 0, 0.4);
  animation: preventiveEntrance 0.4s ease-out, preventivePulse 1.5s ease-in-out infinite;
  width: 220px;
}

.preventive-x {
  font-size: 2rem;
  font-weight: 900;
  color: #FF0000;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  animation: xPulse 1s ease-in-out infinite;
  margin-bottom: 0.5rem;
}

.preventive-info {
  text-align: center;
  color: white;
}

.preventive-text {
  font-size: 0.85rem;
  font-weight: 700;
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  margin-bottom: 0.25rem;
}

.preventive-distance {
  font-size: 1rem;
  font-weight: 800;
  color: #FFFF99;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* INDICADOR DE VELOCIDADE ALTA */
.high-speed-indicator {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(220, 20, 60, 0.9);
  border: 2px solid #DC143C;
  border-radius: 12px;
  padding: 0.75rem 1.5rem;
  text-align: center;
  color: white;
  animation: speedIndicatorPulse 2s ease-in-out infinite;
  box-shadow: 0 8px 20px rgba(220, 20, 60, 0.4);
}

.speed-warning {
  font-size: 0.9rem;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  margin-bottom: 0.25rem;
}

.preventive-mode {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

/* ANIMAÇÕES */

@keyframes alertEntrance {
  0% {
    opacity: 0;
    transform: translateY(-50px) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes alertPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 
      0 15px 40px rgba(255, 20, 147, 0.4),
      0 0 30px rgba(255, 105, 180, 0.6);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 
      0 20px 50px rgba(255, 20, 147, 0.6),
      0 0 40px rgba(255, 105, 180, 0.8);
  }
}

@keyframes xPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

@keyframes pulseRing {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

@keyframes directionPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

@keyframes preventiveEntrance {
  0% {
    opacity: 0;
    transform: translateY(-30px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes preventivePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

@keyframes speedIndicatorPulse {
  0%, 100% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.05);
  }
}

/* RESPONSIVIDADE MOBILE */
@media (max-width: 768px) {
  .prohibited-exit-alert {
    width: 280px;
  }
  
  .alert-position-right {
    right: 2%;
  }
  
  .alert-position-left {
    left: 2%;
  }
  
  .prohibited-x-icon {
    width: 60px;
    height: 60px;
  }
  
  .x-symbol {
    font-size: 2rem;
  }
  
  .exit-name {
    font-size: 1rem;
  }
  
  .preventive-alert {
    width: 180px;
  }
  
  .direction-indicator {
    width: 40px;
    height: 40px;
    top: -10px;
    right: -10px;
  }
  
  .direction-arrow {
    font-size: 1.1rem;
  }
}

/* MODO NOTURNO - Mais intenso */
@media (prefers-color-scheme: dark) {
  .prohibited-exit-alert {
    box-shadow: 
      0 20px 50px rgba(255, 20, 147, 0.6),
      0 0 40px rgba(255, 105, 180, 0.8),
      inset 0 2px 0 rgba(255, 255, 255, 0.4);
  }
  
  .prohibited-x-icon {
    box-shadow: 
      0 10px 30px rgba(255, 0, 0, 0.7),
      inset 0 2px 0 rgba(255, 255, 255, 0.4);
  }
  
  .preventive-alert {
    box-shadow: 
      0 15px 35px rgba(255, 140, 0, 0.5),
      0 0 30px rgba(255, 165, 0, 0.6);
  }
}
/* 🛣️ KingRoad GPS - Next Road Display System (Top Center) */

.next-road-display {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 100px)); /* Centered horizontally, positioned above center line */
  background: linear-gradient(135deg, 
    rgba(26, 26, 46, 0.95), 
    rgba(17, 17, 35, 0.95)
  );
  border: 2px solid var(--accent-gold);
  border-radius: 16px;
  padding: 12px 20px;
  z-index: 999;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 15px rgba(255, 215, 0, 0.2);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: white;
  min-width: 250px;
  max-width: 400px;
}

.next-road-display.loading {
  border-color: #FF9800;
  animation: nextRoadPulse 1.5s ease-in-out infinite;
}

@keyframes nextRoadPulse {
  0%, 100% {
    box-shadow: 
      0 6px 20px rgba(0, 0, 0, 0.3),
      0 0 15px rgba(255, 152, 0, 0.3);
  }
  50% {
    box-shadow: 
      0 6px 20px rgba(0, 0, 0, 0.3),
      0 0 25px rgba(255, 152, 0, 0.5);
  }
}

/* Conteúdo principal */
.next-road-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Ícone de direção */
.direction-icon {
  font-size: 1.5rem;
  color: var(--accent-gold);
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
  animation: directionPulse 2s ease-in-out infinite;
}

@keyframes directionPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

/* Informações da próxima estrada */
.next-road-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Nome da próxima estrada */
.next-road-name {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--accent-gold);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  letter-spacing: 0.5px;
  line-height: 1.1;
}

/* Distância até a próxima estrada */
.next-road-distance {
  font-size: 0.85rem;
  color: #4CAF50;
  font-weight: 600;
  margin-top: 2px;
}

/* Cidade de destino */
.next-road-city {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 500;
  opacity: 0.8;
}

/* Estados especiais */
.loading-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #FF9800;
  font-size: 0.9rem;
  font-weight: 600;
}

.loading-indicator::before {
  content: '⏳';
  animation: loadingSpin 1s linear infinite;
}

@keyframes loadingSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.no-next-road {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-style: italic;
  text-align: center;
}

/* Variações por país */
.next-road-display.br .next-road-name {
  color: #FFD700; /* Dourado para Brasil */
}

.next-road-display.us .next-road-name {
  color: #4169E1; /* Azul para EUA */
}

.next-road-display.ca .next-road-name {
  color: #FF0000; /* Vermelho para Canadá */
}

.next-road-display.fr .next-road-name {
  color: #0055A4; /* Azul França */
}

.next-road-display.de .next-road-name {
  color: #FFCC00; /* Amarelo Alemanha */
}

/* Bordas específicas por país */
.next-road-display.br {
  border-color: #FFD700;
}

.next-road-display.us {
  border-color: #4169E1;
}

.next-road-display.ca {
  border-color: #FF0000;
}

.next-road-display.fr {
  border-color: #0055A4;
}

.next-road-display.de {
  border-color: #FFCC00;
}

/* Responsividade para mobile */
@media (max-width: 768px) {
  .next-road-display {
    top: 15px;
    min-width: 220px;
    max-width: 90vw;
    padding: 10px 16px;
  }
  
  .next-road-content {
    gap: 10px;
  }
  
  .direction-icon {
    font-size: 1.3rem;
  }
  
  .next-road-name {
    font-size: 1.1rem;
  }
  
  .next-road-distance {
    font-size: 0.8rem;
  }
  
  .next-road-city {
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .next-road-display {
    top: 10px;
    min-width: 200px;
    padding: 8px 14px;
  }
  
  .next-road-content {
    gap: 8px;
  }
  
  .direction-icon {
    font-size: 1.2rem;
  }
  
  .next-road-name {
    font-size: 1rem;
  }
  
  .next-road-distance {
    font-size: 0.75rem;
  }
  
  .next-road-city {
    font-size: 0.65rem;
  }
}

/* Animação de entrada */
.next-road-display {
  animation: nextRoadEntrance 0.6s ease-out;
}

@keyframes nextRoadEntrance {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* Animação de atualização de dados */
.next-road-info.updating {
  animation: nextDataUpdate 0.4s ease-in-out;
}

@keyframes nextDataUpdate {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.7;
  }
}

/* Efeito hover para interatividade */
.next-road-display:hover {
  transform: translateX(-50%) scale(1.02);
  transition: transform 0.2s ease;
}

.next-road-display:hover .direction-icon {
  animation: directionHover 0.3s ease-in-out;
}

@keyframes directionHover {
  0%, 100% {
    transform: scale(1) translateX(0);
  }
  50% {
    transform: scale(1.2) translateX(3px);
  }
}

/* Indicador de proximidade */
.next-road-display.near {
  border-color: #FF5722;
  animation: nearWarning 1s ease-in-out infinite;
}

@keyframes nearWarning {
  0%, 100% {
    box-shadow: 
      0 6px 20px rgba(0, 0, 0, 0.3),
      0 0 15px rgba(255, 87, 34, 0.4);
  }
  50% {
    box-shadow: 
      0 6px 20px rgba(0, 0, 0, 0.3),
      0 0 30px rgba(255, 87, 34, 0.7);
  }
}

.next-road-display.near .next-road-distance {
  color: #FF5722;
  font-weight: 700;
  animation: distanceWarning 0.5s ease-in-out infinite;
}

@keyframes distanceWarning {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Indicador de conexão/atualização */
.next-road-display::before {
  content: '🧭';
  position: absolute;
  top: -8px;
  right: -8px;
  background: rgba(76, 175, 80, 0.9);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  animation: compassSpin 4s linear infinite;
}

@keyframes compassSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.next-road-display.loading::before {
  background: rgba(255, 152, 0, 0.9);
  animation: compassSearching 1s linear infinite;
}

@keyframes compassSearching {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Variações para diferentes tipos de estrada */
.next-road-display.highway {
  border-width: 3px;
}

.next-road-display.highway .next-road-name {
  text-transform: uppercase;
  letter-spacing: 1px;
}

.next-road-display.urban .next-road-name {
  font-style: italic;
}

.next-road-display.toll {
  border-style: dashed;
}

.next-road-display.toll::after {
  content: '💰';
  position: absolute;
  bottom: -8px;
  left: -8px;
  background: rgba(255, 193, 7, 0.9);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
}
/* 🛣️ KingRoad GPS - Current Road Display System (Bottom Center) */

.current-road-display {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 100px)); /* Centered horizontally, positioned below center line */
  background: linear-gradient(135deg, 
    rgba(26, 26, 46, 0.95), 
    rgba(17, 17, 35, 0.95)
  );
  border: 2px solid var(--accent-gold);
  border-radius: 20px;
  padding: 16px 20px;
  z-index: 1000;
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(255, 215, 0, 0.2);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: white;
  min-width: 280px;
  max-width: 400px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.current-road-display.loading {
  border-color: #FF9800;
  animation: loadingPulse 1.5s ease-in-out infinite;
}

@keyframes loadingPulse {
  0%, 100% {
    box-shadow: 
      0 8px 25px rgba(0, 0, 0, 0.3),
      0 0 20px rgba(255, 152, 0, 0.3);
  }
  50% {
    box-shadow: 
      0 8px 25px rgba(0, 0, 0, 0.3),
      0 0 30px rgba(255, 152, 0, 0.5);
  }
}

/* Informações da estrada */
.road-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Linha 1: Rodovia + Direção */
.highway-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 2px;
}

.highway-number {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--accent-gold);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  letter-spacing: 0.5px;
}

.direction {
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Linha 2: Cidade + Estado/Província */
.location-line {
  display: flex;
  align-items: center;
  font-size: 1rem;
  color: var(--text-secondary);
}

.city {
  font-weight: 600;
  color: #E0E0E0;
}

.region {
  font-weight: 700;
  color: var(--accent-gold);
  margin-left: 2px;
}

/* Indicador do veículo */
.vehicle-indicator {
  font-size: 2rem;
  animation: vehicleBounce 2s ease-in-out infinite;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

@keyframes vehicleBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

/* Estados especiais */
.loading-text {
  font-size: 1rem;
  color: #FF9800;
  font-weight: 600;
  animation: loadingDots 1.5s linear infinite;
}

@keyframes loadingDots {
  0% { content: ''; }
  33% { content: '.'; }
  66% { content: '..'; }
  100% { content: '...'; }
}

.no-data {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* Variações por país/região */
.current-road-display[data-country="BR"] .highway-number {
  color: #FFD700; /* Dourado para Brasil */
}

.current-road-display[data-country="US"] .highway-number {
  color: #4169E1; /* Azul para EUA */
}

.current-road-display[data-country="CA"] .highway-number {
  color: #FF0000; /* Vermelho para Canadá */
}

.current-road-display[data-country="FR"] .highway-number {
  color: #0055A4; /* Azul França */
}

.current-road-display[data-country="DE"] .highway-number {
  color: #FFCC00; /* Amarelo Alemanha */
}

/* Direções por idioma */
.direction[data-lang="pt"] {
  background: linear-gradient(135deg, #228B22, #006400);
}

.direction[data-lang="en"] {
  background: linear-gradient(135deg, #4169E1, #191970);
}

.direction[data-lang="fr"] {
  background: linear-gradient(135deg, #0055A4, #003875);
}

.direction[data-lang="de"] {
  background: linear-gradient(135deg, #000000, #DD0000);
}

/* Responsividade para mobile */
@media (max-width: 768px) {
  .current-road-display {
    transform: translate(-50%, calc(-50% + 80px)); /* Adjusted for mobile */
    min-width: 260px;
    max-width: 90vw;
    padding: 12px 16px;
    gap: 12px;
  }
  
  .highway-number {
    font-size: 1.2rem;
  }
  
  .direction {
    padding: 3px 8px;
    font-size: 0.7rem;
  }
  
  .location-line {
    font-size: 0.9rem;
  }
  
  .vehicle-indicator {
    font-size: 1.6rem;
  }
}

@media (max-width: 480px) {
  .current-road-display {
    transform: translate(-50%, calc(-50% + 70px)); /* Adjusted for small mobile */
    min-width: 240px;
    padding: 10px 14px;
    gap: 10px;
  }
  
  .highway-number {
    font-size: 1.1rem;
  }
  
  .location-line {
    font-size: 0.8rem;
  }
  
  .vehicle-indicator {
    font-size: 1.4rem;
  }
}

/* Animação de entrada */
.current-road-display {
  animation: roadDisplayEntrance 0.6s ease-out;
}

@keyframes roadDisplayEntrance {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* Animação de mudança de dados */
.road-info.updating {
  animation: dataUpdate 0.4s ease-in-out;
}

@keyframes dataUpdate {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

/* Efeitos especiais para trechos urbanos */
.current-road-display.urban-segment {
  border-color: #9C27B0;
}

.current-road-display.urban-segment .highway-number {
  color: #9C27B0;
}

/* Efeitos para rodovias de alta velocidade */
.current-road-display.high-speed {
  border-color: #F44336;
  animation: highSpeedGlow 2s ease-in-out infinite;
}

@keyframes highSpeedGlow {
  0%, 100% {
    box-shadow: 
      0 8px 25px rgba(0, 0, 0, 0.3),
      0 0 20px rgba(244, 67, 54, 0.3);
  }
  50% {
    box-shadow: 
      0 8px 25px rgba(0, 0, 0, 0.3),
      0 0 35px rgba(244, 67, 54, 0.6);
  }
}

/* Hover states para interatividade */
.current-road-display:hover {
  transform: translateX(-50%) scale(1.02);
  transition: transform 0.2s ease;
}

/* Indicador de conexão GPS */
.current-road-display::before {
  content: '📡';
  position: absolute;
  top: -8px;
  right: -8px;
  background: rgba(76, 175, 80, 0.9);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  animation: gpsSignal 2s ease-in-out infinite;
}

@keyframes gpsSignal {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

.current-road-display.loading::before {
  background: rgba(255, 152, 0, 0.9);
  animation: gpsSearching 1s linear infinite;
}

@keyframes gpsSearching {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1); }
}
/* 🌟 KingRoad GPS - Criador de POIs Personalizados */

.add-custom-poi-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

.add-custom-poi-modal {
  background: linear-gradient(135deg, 
    rgba(26, 26, 46, 0.98), 
    rgba(17, 17, 35, 0.98)
  );
  border: 2px solid var(--accent-gold);
  border-radius: 20px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 
    0 15px 50px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(255, 215, 0, 0.3);
  color: white;
  animation: modalSlideIn 0.4s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-30px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Header */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.header-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent-gold);
}

.title-icon {
  font-size: 1.5rem;
}

.close-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 1rem;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

/* Indicador de etapas */
.steps-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  gap: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.5;
  transition: all 0.3s ease;
}

.step.active {
  opacity: 1;
}

.step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  transition: all 0.3s ease;
}

.step.active .step-number {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: black;
}

.step-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.step.active .step-label {
  color: var(--accent-gold);
}

/* Conteúdo */
.modal-content {
  padding: 24px;
  min-height: 300px;
}

.step-content h3 {
  font-size: 1.1rem;
  color: var(--accent-gold);
  margin-bottom: 20px;
  font-weight: 700;
}

/* Formulário */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #E0E0E0;
  margin-bottom: 8px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: white;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--accent-gold);
  background: rgba(255, 215, 0, 0.05);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-secondary);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

/* Avaliação por estrelas */
.rating-stars {
  display: flex;
  gap: 4px;
}

.star-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  opacity: 0.3;
  transition: all 0.2s ease;
}

.star-btn:hover,
.star-btn.active {
  opacity: 1;
  transform: scale(1.1);
}

/* Preview do ícone */
.icon-preview-section {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.preview-label {
  font-weight: 600;
  color: var(--accent-gold);
}

.preview-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  border: 2px solid rgba(255, 215, 0, 0.3);
}

.icon-preview {
  font-size: 1.8rem;
  text-align: center;
}

.icon-preview.emoji-preview {
  font-size: 2rem;
}

/* Seletor de tipo de ícone */
.icon-type-selector {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.type-btn {
  flex: 1 1;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
}

.type-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.type-btn.active {
  background: rgba(255, 215, 0, 0.1);
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

/* Seletores de forma e cor */
.shape-color-selector {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.selector-section label {
  margin-bottom: 12px;
}

.shapes-grid,
.colors-grid,
.emojis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.shape-btn,
.color-btn,
.emoji-btn {
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.shape-btn {
  background: rgba(255, 255, 255, 0.05);
  color: white;
}

.color-btn {
  border-radius: 50%;
}

.emoji-btn {
  background: rgba(255, 255, 255, 0.05);
  font-size: 1.4rem;
}

.shape-btn:hover,
.color-btn:hover,
.emoji-btn:hover {
  transform: scale(1.1);
  border-color: var(--accent-gold);
}

.shape-btn.active,
.color-btn.active,
.emoji-btn.active {
  border-color: var(--accent-gold);
  border-width: 3px;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

/* Emoji selector */
.emoji-selector label {
  margin-bottom: 12px;
}

.emojis-grid {
  grid-template-columns: repeat(auto-fit, minmax(45px, 1fr));
}

.emojis-grid .emoji-btn {
  width: 45px;
  height: 45px;
  font-size: 1.6rem;
}

/* Preview final */
.final-preview {
  margin-bottom: 24px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 215, 0, 0.2);
}

.preview-poi-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.poi-icon {
  flex-shrink: 0;
}

.poi-details {
  flex: 1 1;
}

.poi-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-gold);
  margin-bottom: 4px;
}

.poi-category {
  font-size: 0.85rem;
  color: #4CAF50;
  margin-bottom: 6px;
  font-weight: 600;
}

.poi-description {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
  line-height: 1.4;
}

.poi-location {
  font-size: 0.8rem;
  color: #FF9800;
  font-family: monospace;
  margin-bottom: 6px;
}

.poi-rating {
  font-size: 0.9rem;
}

/* Footer */
.modal-footer {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  gap: 12px;
}

.footer-spacer {
  flex: 1 1;
}

.btn {
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-gold), #DAA520);
  color: black;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.btn-success {
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
}

.btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.loading-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Scrollbar personalizada */
.add-custom-poi-modal::-webkit-scrollbar {
  width: 6px;
}

.add-custom-poi-modal::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.add-custom-poi-modal::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.4);
  border-radius: 3px;
}

/* Responsividade */
@media (max-width: 768px) {
  .add-custom-poi-modal {
    width: 95%;
    max-height: 95vh;
  }
  
  .modal-header,
  .modal-content,
  .modal-footer {
    padding: 16px;
  }
  
  .steps-indicator {
    padding: 16px;
    gap: 16px;
  }
  
  .step-number {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }
  
  .step-label {
    font-size: 0.7rem;
  }
  
  .shapes-grid,
  .colors-grid {
    grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
  }
  
  .shape-btn,
  .color-btn,
  .emoji-btn {
    width: 35px;
    height: 35px;
    font-size: 1rem;
  }
  
  .emojis-grid .emoji-btn {
    width: 40px;
    height: 40px;
  }
}
/* 🛣️ KingRoad GPS - Roundabout System with Exit Numbering */

.roundabout-alert {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, 
    rgba(26, 26, 46, 0.95), 
    rgba(17, 17, 35, 0.95)
  );
  border: 3px solid var(--accent-gold);
  border-radius: 24px;
  padding: 24px;
  z-index: 50000;
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(255, 215, 0, 0.3);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  color: white;
  min-width: 400px;
  max-width: 500px;
  opacity: 0;
  transform: translateX(-50%) translateY(-100px) scale(0.8);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.roundabout-alert.active {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Estados da rotatória */
.roundabout-alert.approaching {
  border-color: #FF9800;
}

.roundabout-alert.entering {
  border-color: #FFD700;
  animation: roundaboutPulse 1.5s ease-in-out infinite;
}

.roundabout-alert.exiting {
  border-color: #4CAF50;
}

@keyframes roundaboutPulse {
  0%, 100% {
    box-shadow: 
      0 12px 40px rgba(0, 0, 0, 0.4),
      0 0 30px rgba(255, 215, 0, 0.3);
  }
  50% {
    box-shadow: 
      0 12px 40px rgba(0, 0, 0, 0.4),
      0 0 45px rgba(255, 215, 0, 0.6);
  }
}

/* Header da rotatória */
.roundabout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.roundabout-icon {
  font-size: 2rem;
  margin-right: 12px;
  animation: rotateIcon 3s linear infinite;
}

@keyframes rotateIcon {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.roundabout-info {
  flex: 1 1;
}

.roundabout-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent-gold);
  margin-bottom: 4px;
}

.roundabout-subtitle {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.roundabout-distance {
  text-align: right;
}

.distance-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: #FFD700;
}

.distance-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Visualização da rotatória */
.roundabout-visualization {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 24px 0;
  position: relative;
  height: 200px;
}

.roundabout-container {
  position: relative;
  width: 180px;
  height: 180px;
}

/* Círculo principal da rotatória */
.roundabout-circle {
  width: 100px;
  height: 100px;
  border: 4px solid var(--accent-gold);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, 
    rgba(255, 215, 0, 0.1), 
    rgba(255, 215, 0, 0.05)
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Número da saída no centro */
.exit-number-center {
  text-align: center;
}

.exit-number {
  font-size: 2.2rem;
  font-weight: 900;
  color: #FFD700;
  line-height: 1;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.exit-label {
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: 1px;
  margin-top: 2px;
}

/* Seta de entrada */
.entry-arrow {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.arrow-shaft {
  width: 3px;
  height: 20px;
  background: #FFD700;
  border-radius: 2px;
}

.arrow-head {
  color: #FFD700;
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: -2px;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

/* Pontos das saídas */
.exit-point {
  position: absolute;
  z-index: 10;
}

.exit-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.regular-exit .exit-dot {
  background: linear-gradient(135deg, #666, #555);
  color: #CCC;
  border: 2px solid #888;
}

.target-exit .exit-dot {
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
  border: 3px solid #2E7D32;
  animation: targetExitPulse 1.5s ease-in-out infinite;
  transform: scale(1.2);
}

@keyframes targetExitPulse {
  0%, 100% {
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.3),
      0 0 15px rgba(76, 175, 80, 0.4);
  }
  50% {
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.3),
      0 0 25px rgba(76, 175, 80, 0.7);
  }
}

.exit-dot-number {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

/* Seta da saída alvo */
.exit-arrow {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  color: #4CAF50;
  font-size: 1.5rem;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(76, 175, 80, 0.6);
  animation: exitArrowBounce 1s ease-in-out infinite;
}

@keyframes exitArrowBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-5px); }
}

/* Nome da rua da saída */
.target-exit-indicator {
  position: absolute;
  z-index: 15;
}

.target-street-name {
  background: rgba(76, 175, 80, 0.9);
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  margin-top: 35px;
  text-align: center;
  border: 1px solid #2E7D32;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Instruções */
.roundabout-instructions {
  text-align: center;
  margin: 20px 0;
}

.instruction-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: #FFD700;
  margin-bottom: 8px;
  line-height: 1.3;
}

.exit-details {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
}

.exit-street {
  display: flex;
  align-items: center;
  background: rgba(76, 175, 80, 0.2);
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(76, 175, 80, 0.4);
}

.exit-icon {
  margin-right: 8px;
  font-size: 1rem;
}

.street-name {
  font-weight: 600;
  color: #4CAF50;
}

/* Botão fechar */
.roundabout-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.roundabout-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  transform: scale(1.1);
}

/* Indicador de progresso */
.roundabout-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 215, 0, 0.2);
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1;
  position: relative;
}

.progress-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 8px;
  right: -50%;
  width: 100%;
  height: 2px;
  background: rgba(255, 215, 0, 0.2);
}

.progress-step.active::after,
.progress-step.completed::after {
  background: var(--accent-gold);
}

.step-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 215, 0, 0.2);
  border: 2px solid rgba(255, 215, 0, 0.3);
  transition: all 0.3s ease;
  margin-bottom: 6px;
}

.progress-step.active .step-dot {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  animation: stepDotPulse 1s ease-in-out infinite;
}

.progress-step.completed .step-dot {
  background: #4CAF50;
  border-color: #4CAF50;
}

@keyframes stepDotPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.step-label {
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-weight: 500;
  text-align: center;
}

.progress-step.active .step-label {
  color: var(--accent-gold);
  font-weight: 600;
}

.progress-step.completed .step-label {
  color: #4CAF50;
}

/* Responsividade */
@media (max-width: 768px) {
  .roundabout-alert {
    min-width: 320px;
    max-width: 90vw;
    padding: 20px;
    top: 10px;
  }
  
  .roundabout-header {
    margin-bottom: 16px;
  }
  
  .roundabout-title {
    font-size: 1.1rem;
  }
  
  .distance-value {
    font-size: 1.2rem;
  }
  
  .roundabout-visualization {
    height: 160px;
    margin: 20px 0;
  }
  
  .roundabout-container {
    width: 150px;
    height: 150px;
  }
  
  .roundabout-circle {
    width: 80px;
    height: 80px;
  }
  
  .exit-number {
    font-size: 1.8rem;
  }
  
  .exit-dot {
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
  }
  
  .instruction-text {
    font-size: 1rem;
  }
}

/* Animações de entrada específicas por estado */
.roundabout-alert.approaching.active {
  animation: approachingEntrance 0.6s ease-out;
}

.roundabout-alert.entering.active {
  animation: enteringEntrance 0.4s ease-out;
}

.roundabout-alert.exiting.active {
  animation: exitingEntrance 0.5s ease-out;
}

@keyframes approachingEntrance {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-50px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes enteringEntrance {
  0% {
    border-color: #FF9800;
  }
  100% {
    border-color: #FFD700;
  }
}

@keyframes exitingEntrance {
  0% {
    border-color: #FFD700;
  }
  100% {
    border-color: #4CAF50;
  }
}
/* 📍 KingRoad GPS - Mile Marker Display Styles */

/* European-style Mile Marker (Blue sign with white text) */
.mile-marker-display.mile-marker-european {
  position: fixed;
  bottom: 100px;
  left: 20px;
  
  /* European highway blue background */
  background: #0053A0; /* EU highway sign blue */
  border: 4px solid #FFFFFF;
  border-radius: 12px;
  
  padding: 12px 20px;
  color: #FFFFFF;
  font-family: 'Arial', 'Helvetica', sans-serif;
  
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  
  z-index: 1500;
  min-width: 100px;
  max-width: 140px;
  
  cursor: grab;
  -webkit-user-select: none;
          user-select: none;
  
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mile-marker-display.mile-marker-european:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 6px 16px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.mile-marker-display.mile-marker-european:active {
  cursor: grabbing;
  transform: scale(0.98);
}

/* European Marker Container */
.euro-marker-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Highway Name (Top - e.g., "I-95", "A5") */
.euro-highway-name {
  font-size: 24px;
  font-weight: 700;
  color: #FFFFFF;
  text-align: center;
  letter-spacing: 1px;
  line-height: 1;
}

/* White Divider Line */
.euro-divider {
  width: 100%;
  height: 2px;
  background: #FFFFFF;
  opacity: 0.9;
}

/* Kilometer Number (Bottom) */
.euro-kilometer {
  font-size: 36px;
  font-weight: 700;
  color: #FFFFFF;
  text-align: center;
  line-height: 1;
  letter-spacing: -1px;
}

/* OLD STYLE - Keep for compatibility but hidden */
.mile-marker-display {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: linear-gradient(135deg, 
    rgba(15, 23, 42, 0.95), 
    rgba(30, 41, 59, 0.90)
  );
  border: 3px solid var(--accent-gold);
  border-radius: 20px;
  padding: 1rem 1.5rem;
  color: white;
  font-family: 'Arial', sans-serif;
  box-shadow: 
    0 15px 40px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(251, 191, 36, 0.2),
    inset 0 2px 0 rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  z-index: 1500;
  min-width: 280px;
  animation: markerEntrance 0.8s ease-out;
  cursor: grab;
  -webkit-user-select: none;
          user-select: none;
}

.mile-marker-display:active {
  cursor: grabbing;
}

.marker-container {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto auto;
  grid-gap: 0.75rem;
  gap: 0.75rem;
  align-items: center;
}

/* ÍCONE PRINCIPAL */
.marker-icon {
  grid-row: 1 / 4;
  font-size: 2.5rem;
  filter: drop-shadow(0 3px 6px rgba(251, 191, 36, 0.4));
  animation: markerPulse 3s ease-in-out infinite;
}

/* MILE/KM PRINCIPAL */
.marker-main {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.marker-number {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--accent-gold);
  text-shadow: 
    0 0 10px rgba(251, 191, 36, 0.6),
    0 3px 6px rgba(0, 0, 0, 0.3);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.marker-unit {
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* INFORMAÇÕES DA HIGHWAY */
.marker-info {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.highway-name {
  font-size: 1rem;
  font-weight: 700;
  color: #60a5fa; /* Azul claro */
  background: rgba(96, 165, 250, 0.15);
  padding: 0.25rem 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(96, 165, 250, 0.3);
}

.highway-direction {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.1);
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ESTADO/PROVÍNCIA */
.marker-location {
  grid-column: 3;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.state-badge {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 800;
  text-align: center;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
  min-width: 40px;
}

/* PRÓXIMO MARCO */
.next-milestone {
  grid-column: 1 / 4;
  grid-row: 3;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.milestone-icon {
  font-size: 1.2rem;
}

.milestone-text {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  flex: 1 1;
}

/* INDICADOR DE ATUALIZAÇÃO */
.update-indicator {
  position: absolute;
  top: -12px;
  right: 15px;
  background: rgba(34, 197, 94, 0.9);
  border: 2px solid #22c55e;
  border-radius: 12px;
  padding: 0.25rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.update-dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  animation: updatePulse 2s ease-in-out infinite;
}

.update-time {
  color: white;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* ANIMAÇÕES */

@keyframes markerEntrance {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes markerPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes updatePulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.8);
  }
}

/* MODO NOTURNO - Mais brilhante */
@media (prefers-color-scheme: dark) {
  .mile-marker-display {
    box-shadow: 
      0 20px 50px rgba(0, 0, 0, 0.5),
      0 0 35px rgba(251, 191, 36, 0.3),
      inset 0 2px 0 rgba(255, 255, 255, 0.2);
  }
  
  .marker-number {
    text-shadow: 
      0 0 15px rgba(251, 191, 36, 0.8),
      0 3px 6px rgba(0, 0, 0, 0.5);
  }
  
  .state-badge {
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.5);
  }
}

/* RESPONSIVIDADE MOBILE */
@media (max-width: 768px) {
  .mile-marker-display {
    bottom: 15px;
    left: 15px;
    padding: 0.75rem 1rem;
    min-width: 240px;
    border-radius: 15px;
  }
  
  .marker-container {
    gap: 0.5rem;
  }
  
  .marker-icon {
    font-size: 2rem;
  }
  
  .marker-number {
    font-size: 1.8rem;
  }
  
  .highway-name {
    font-size: 0.85rem;
    padding: 0.2rem 0.5rem;
  }
  
  .highway-direction {
    font-size: 0.75rem;
    padding: 0.15rem 0.4rem;
  }
  
  .state-badge {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
  }
  
  .milestone-text {
    font-size: 0.75rem;
  }
  
  .update-indicator {
    top: -10px;
    right: 10px;
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
  }
}

/* MODO LANDSCAPE MOBILE */
@media (max-width: 768px) and (orientation: landscape) {
  .mile-marker-display {
    bottom: 10px;
    left: 10px;
    padding: 0.5rem 0.75rem;
    min-width: 200px;
  }
  
  .marker-number {
    font-size: 1.5rem;
  }
  
  .marker-icon {
    font-size: 1.8rem;
  }
}

/* HOVER EFFECTS (Desktop) */
@media (hover: hover) {
  .mile-marker-display:hover {
    transform: scale(1.02);
    box-shadow: 
      0 20px 50px rgba(0, 0, 0, 0.4),
      0 0 30px rgba(251, 191, 36, 0.4),
      inset 0 2px 0 rgba(255, 255, 255, 0.2);
  }
  
  .mile-marker-display:hover .marker-number {
    color: #fbbf24;
    text-shadow: 
      0 0 15px rgba(251, 191, 36, 0.8),
      0 3px 6px rgba(0, 0, 0, 0.3);
  }
}

/* MODO COMPACTO (para telas muito pequenas) */
@media (max-width: 480px) {
  .mile-marker-display {
    min-width: 180px;
    padding: 0.5rem;
  }
  
  .marker-container {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto auto;
  }
  
  .marker-icon {
    grid-row: 1 / 3;
  }
  
  .marker-location {
    grid-column: 2;
    grid-row: 3;
    align-items: flex-start;
    margin-top: 0.5rem;
  }
  
  .next-milestone {
    grid-column: 1 / 3;
    grid-row: 4;
  }
}
/**
 * Speed Limit Widgets CSS
 * Circular speed displays styled like real traffic signs
 */

.speed-widgets-container {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.widget-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.widget-label {
  font-size: 12px;
  color: #666;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Speed Limit Circle - Red traffic sign style */
.speed-limit-circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: white;
  border: 6px solid #E31E24;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position: relative;
}

.speed-limit-circle-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.speed-limit-value {
  font-size: 36px;
  font-weight: 700;
  color: #000000;
  line-height: 1;
  font-family: 'Arial', sans-serif;
}

.speed-limit-unit {
  font-size: 10px;
  font-weight: 600;
  color: #000000;
  margin-top: 2px;
  text-transform: lowercase;
}

/* Current Speed Circle - White when normal, red when speeding */
.current-speed-circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  position: relative;
}

/* Normal state - white background, black text */
.current-speed-circle.normal {
  background: white;
  border: 4px solid #333333;
}

.current-speed-circle.normal .current-speed-value,
.current-speed-circle.normal .current-speed-unit {
  color: #000000;
}

/* Speeding state - red background, white text */
.current-speed-circle.speeding {
  background: #E31E24;
  border: 4px solid #B71C1C;
  animation: pulse-red 1s ease-in-out infinite;
}

.current-speed-circle.speeding .current-speed-value,
.current-speed-circle.speeding .current-speed-unit {
  color: #FFFFFF;
}

.current-speed-circle-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.current-speed-value {
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  font-family: 'Arial', sans-serif;
}

.current-speed-unit {
  font-size: 10px;
  font-weight: 600;
  margin-top: 2px;
  text-transform: lowercase;
}

/* Pulse animation for speeding */
@keyframes pulse-red {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(227, 30, 36, 0.4);
  }
  50% {
    box-shadow: 0 4px 20px rgba(227, 30, 36, 0.8);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .speed-widgets-container {
    gap: 15px;
  }
  
  .speed-limit-circle,
  .current-speed-circle {
    width: 80px;
    height: 80px;
  }
  
  .speed-limit-value,
  .current-speed-value {
    font-size: 32px;
  }
  
  .speed-limit-unit,
  .current-speed-unit {
    font-size: 9px;
  }
}

@media (max-width: 480px) {
  .speed-widgets-container {
    gap: 10px;
  }
  
  .speed-limit-circle,
  .current-speed-circle {
    width: 70px;
    height: 70px;
    border-width: 4px;
  }
  
  .speed-limit-value,
  .current-speed-value {
    font-size: 28px;
  }
  
  .speed-limit-unit,
  .current-speed-unit {
    font-size: 8px;
  }
  
  .widget-label {
    font-size: 10px;
  }
}

/* Draggable Widget - Snap-to-Grid System */

.draggable-widget {
  cursor: grab;
  -webkit-user-select: none;
          user-select: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.draggable-widget:active {
  cursor: grabbing;
}

/* Widget in Footer */
.draggable-widget.footer-btn {
  width: 60px;
  height: 60px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  background: rgba(40, 40, 40, 0.95);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  
  flex-shrink: 0;
  
  transition: all 0.2s ease;
}

.draggable-widget.footer-btn:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.5);
  transform: scale(1.05);
}

.draggable-widget.footer-btn:active {
  transform: scale(0.95);
}

/* Floating Widget on Map (Snapped to Grid) */
.draggable-widget.floating {
  width: 60px;
  height: 60px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  background: rgba(40, 40, 40, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  
  transition: all 0.3s ease;
}

.draggable-widget.floating:hover {
  background: rgba(50, 50, 50, 0.98);
  border-color: rgba(59, 130, 246, 0.5);
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

.draggable-widget.floating:active {
  transform: scale(0.95);
  cursor: grabbing;
}

/* Widget Icon */
.widget-icon {
  font-size: 24px;
  color: #ffffff;
  line-height: 1;
}

/* Snap animation when dropped */
@keyframes snapToGrid {
  0% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.draggable-widget.snapping {
  animation: snapToGrid 0.3s ease;
}

/* Visual feedback during drag */
.draggable-widget.dragging {
  opacity: 0.5;
  transform: scale(0.9);
}

/* Drop zone highlights (invisible grid becomes visible during drag) */
.drop-zone-active {
  position: fixed;
  width: 80px;
  height: 80px;
  border: 2px dashed rgba(59, 130, 246, 0.5);
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.1);
  pointer-events: none;
  z-index: 899;
  animation: pulseDropZone 1s ease infinite;
}

@keyframes pulseDropZone {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
}

/* 🚪 KingRoad GPS - Exit Direction Lock Styles */

.exit-direction-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeInOverlay 0.4s ease-out;
}

@keyframes fadeInOverlay {
  from { opacity: 0; }
  to { opacity: 1; }
}

.exit-direction-modal {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f1419 100%);
  border: 3px solid rgba(255, 215, 0, 0.4);
  border-radius: 24px;
  min-width: 500px;
  max-width: 800px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
  animation: slideInModal 0.5s ease-out;
}

@keyframes slideInModal {
  from {
    opacity: 0;
    transform: translateY(-50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Header */
.exit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  border-bottom: 2px solid rgba(255, 215, 0, 0.3);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.08));
}

.exit-title {
  display: flex;
  align-items: center;
  gap: 16px;
}

.exit-icon {
  font-size: 3rem;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.exit-title h3 {
  color: #FFD700;
  font-size: 1.5rem;
  margin: 0 0 4px 0;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.exit-title p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-size: 1rem;
}

.close-exit {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 8px 12px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-exit:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #FFD700;
  color: #FFD700;
  transform: scale(1.1);
}

/* Status */
.exit-status {
  padding: 20px 28px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 16px;
}

.status-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.status-info.locked {
  background: rgba(255, 215, 0, 0.1);
  border-color: rgba(255, 215, 0, 0.3);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.status-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.status-value {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
}

/* Seleção de Direção */
.direction-selection {
  padding: 28px;
}

.selection-header {
  text-align: center;
  margin-bottom: 28px;
}

.selection-header h4 {
  color: #FFD700;
  font-size: 1.4rem;
  margin: 0 0 8px 0;
  font-weight: 700;
}

.selection-header p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-size: 1rem;
}

.direction-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
}

.direction-btn {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 24px 20px;
  cursor: pointer;
  transition: all 0.4s ease;
  text-align: center;
  min-width: 180px;
  position: relative;
  overflow: hidden;
}

.direction-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent);
  transition: left 0.5s ease;
}

.direction-btn:hover::before {
  left: 100%;
}

.direction-btn.left {
  border-color: rgba(40, 167, 69, 0.4);
}

.direction-btn.right {
  border-color: rgba(0, 123, 255, 0.4);
}

.direction-btn:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.direction-btn.left:hover {
  border-color: #28a745;
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.2), rgba(40, 167, 69, 0.1));
}

.direction-btn.right:hover {
  border-color: #007bff;
  background: linear-gradient(135deg, rgba(0, 123, 255, 0.2), rgba(0, 123, 255, 0.1));
}

.direction-icon {
  font-size: 3.5rem;
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.direction-label {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.direction-desc {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  line-height: 1.3;
}

.direction-separator {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

.truck-icon {
  font-size: 2.5rem;
  margin-bottom: 8px;
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

.current-location {
  font-size: 0.9rem;
  font-weight: 600;
  max-width: 120px;
  line-height: 1.2;
}

/* Direção Travada */
.direction-locked {
  padding: 28px;
}

.locked-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding: 16px;
  background: rgba(255, 215, 0, 0.1);
  border-radius: 16px;
  border: 2px solid rgba(255, 215, 0, 0.3);
}

.locked-icon {
  font-size: 2.5rem;
  color: #FFD700;
  animation: lockShake 2s ease-in-out infinite;
}

@keyframes lockShake {
  0%, 50%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

.locked-header h4 {
  color: #FFD700;
  margin: 0 0 4px 0;
  font-size: 1.3rem;
  font-weight: 700;
}

.locked-header p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-size: 0.95rem;
}

.locked-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 16px;
  margin-bottom: 24px;
  text-align: center;
}

.direction-arrow {
  font-size: 5rem;
  animation: arrowPulse 1.5s ease-in-out infinite;
}

@keyframes arrowPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.locked-text {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
}

.locked-text span {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.progress-info {
  margin-bottom: 24px;
  padding: 16px;
  border-radius: 12px;
  text-align: center;
}

.moving-indicator {
  color: #28a745;
  background: rgba(40, 167, 69, 0.1);
  border: 2px solid rgba(40, 167, 69, 0.3);
  padding: 12px;
  border-radius: 12px;
}

.waiting-indicator {
  color: #ffc107;
  background: rgba(255, 193, 7, 0.1);
  border: 2px solid rgba(255, 193, 7, 0.3);
  padding: 12px;
  border-radius: 12px;
}

.moving-icon, .waiting-icon {
  font-size: 1.2rem;
  margin-right: 8px;
}

.locked-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.confirm-btn, .unlock-btn {
  padding: 16px 24px;
  border-radius: 12px;
  border: 2px solid;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 700;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.confirm-btn {
  background: rgba(40, 167, 69, 0.2);
  border-color: #28a745;
  color: #28a745;
}

.confirm-btn:hover:not(:disabled) {
  background: #28a745;
  color: #fff;
  transform: translateY(-2px);
}

.confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.unlock-btn {
  background: rgba(255, 193, 7, 0.2);
  border-color: #ffc107;
  color: #ffc107;
}

.unlock-btn:hover {
  background: #ffc107;
  color: #000;
  transform: translateY(-2px);
}

.auto-confirm-info {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

/* Help e Footer */
.help-text {
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  line-height: 1.4;
}

.exit-footer {
  padding: 20px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
}

.footer-tip {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Responsivo */
@media (max-width: 768px) {
  .exit-direction-modal {
    min-width: 0;
    min-width: initial;
    width: 95%;
    margin: 20px;
  }

  .exit-header {
    padding: 20px;
  }

  .direction-buttons {
    flex-direction: column;
    gap: 16px;
  }

  .direction-btn {
    min-width: 0;
    min-width: initial;
    width: 100%;
    max-width: 250px;
  }

  .locked-visual {
    flex-direction: column;
    gap: 16px;
  }

  .direction-arrow {
    font-size: 4rem;
  }

  .exit-status {
    padding: 16px 20px;
  }

  .direction-selection, .direction-locked {
    padding: 20px;
  }
}
/* 🌍 WhereAmI - Onde Estou? Component Styles */

/* Botão flutuante */
.where-am-i-button {
  position: fixed;
  top: 50%;  /* Vertically centered */
  left: 20px;  /* Left side */
  transform: translateY(-50%);  /* Center adjustment */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #2196F3;  /* Solid blue circle */
  color: white;  /* White question mark */
  border: 3px solid white;  /* White border */
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(33, 150, 243, 0.4);
  transition: all 0.3s ease;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.where-am-i-button:hover {
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 25px rgba(33, 150, 243, 0.6);
  background: #1976D2;  /* Darker blue on hover */
  border: 3px solid white;
}

.where-am-i-button:active {
  transform: translateY(-50%) scale(0.95);
}

/* Modal Overlay */
.where-am-i-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
  padding: 20px;
}

.where-am-i-modal {
  background: linear-gradient(145deg, rgba(20, 20, 20, 0.98), rgba(30, 30, 30, 0.98));
  border-radius: 20px;
  padding: 24px;
  width: 100%;
  max-width: 500px;
  max-height: 85vh;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}

/* Header */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-title {
  color: white;
  font-size: 18px;
  font-weight: bold;
}

.close-btn {
  background: rgba(244, 67, 54, 0.8);
  color: white;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  background: rgba(244, 67, 54, 1);
  transform: scale(1.1);
}

/* Loading */
.loading-section {
  text-align: center;
  padding: 40px 20px;
}

.loading-spinner {
  font-size: 48px;
  animation: spin 2s linear infinite;
  margin-bottom: 16px;
}

.loading-text {
  color: #bbb;
  font-size: 14px;
}

/* Error */
.error-section {
  text-align: center;
  padding: 30px 20px;
}

.error-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.error-text {
  color: #FF5722;
  font-size: 14px;
  margin-bottom: 16px;
}

.retry-btn {
  background: rgba(33, 150, 243, 0.8);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
}

.retry-btn:hover {
  background: rgba(33, 150, 243, 1);
  transform: scale(1.02);
}

/* Location Content */
.location-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.section-title {
  color: #2196F3;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(33, 150, 243, 0.3);
}

/* Current Location */
.current-location {
  background: rgba(33, 150, 243, 0.1);
  border-radius: 12px;
  padding: 16px;
  border-left: 4px solid #2196F3;
}

.location-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.location-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.location-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.location-info {
  flex: 1 1;
}

.location-primary {
  color: white;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 2px;
}

.location-secondary {
  color: #bbb;
  font-size: 12px;
}

.coordinates-section, .road-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.coordinates-label, .road-label {
  color: #64B5F6;
  font-size: 11px;
  font-weight: bold;
}

.coordinates-value {
  color: white;
  font-size: 13px;
  font-family: 'Courier New', monospace;
  background: rgba(255, 255, 255, 0.1);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.coordinates-value:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.01);
}

.road-value {
  color: white;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.1);
  padding: 6px 10px;
  border-radius: 6px;
}

/* Nearby Cities */
.nearby-cities {
  background: rgba(76, 175, 80, 0.1);
  border-radius: 12px;
  padding: 16px;
  border-left: 4px solid #4CAF50;
}

.cities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 12px;
  gap: 12px;
}

.city-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  transition: all 0.2s ease;
}

.city-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.city-direction {
  color: #4CAF50;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 8px;
}

.city-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.city-name {
  color: white;
  font-size: 13px;
  font-weight: bold;
}

.city-state {
  color: #bbb;
  font-size: 10px;
}

.city-distance {
  color: #4CAF50;
  font-size: 10px;
  font-weight: bold;
}

/* Sharing Section */
.sharing-section {
  background: rgba(255, 193, 7, 0.1);
  border-radius: 12px;
  padding: 16px;
  border-left: 4px solid #FFC107;
}

/* Quick Actions */
.quick-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.action-btn {
  flex: 1 1;
  min-width: 100px;
  padding: 10px 8px;
  border: none;
  border-radius: 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.emergency-btn {
  background: linear-gradient(135deg, #F44336, #D32F2F);
  color: white;
}

.emergency-btn:hover {
  background: linear-gradient(135deg, #D32F2F, #B71C1C);
  transform: scale(1.02);
}

.maps-btn {
  background: linear-gradient(135deg, #4CAF50, #388E3C);
  color: white;
}

.maps-btn:hover {
  background: linear-gradient(135deg, #388E3C, #2E7D32);
  transform: scale(1.02);
}

.copy-btn {
  background: linear-gradient(135deg, #2196F3, #1976D2);
  color: white;
}

.copy-btn:hover {
  background: linear-gradient(135deg, #1976D2, #1565C0);
  transform: scale(1.02);
}

/* Sharing Options */
.sharing-options {
  margin-bottom: 16px;
}

.sharing-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.sharing-row:last-child {
  margin-bottom: 0;
}

.share-btn {
  flex: 1 1;
  padding: 8px 4px;
  border: none;
  border-radius: 6px;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  color: white;
}

.whatsapp-btn {
  background: linear-gradient(135deg, #25D366, #128C7E);
}

.whatsapp-btn:hover {
  background: linear-gradient(135deg, #128C7E, #075E54);
  transform: scale(1.02);
}

.email-btn {
  background: linear-gradient(135deg, #1976D2, #1565C0);
}

.email-btn:hover {
  background: linear-gradient(135deg, #1565C0, #0D47A1);
  transform: scale(1.02);
}

.sms-btn {
  background: linear-gradient(135deg, #FF9800, #F57C00);
}

.sms-btn:hover {
  background: linear-gradient(135deg, #F57C00, #E65100);
  transform: scale(1.02);
}

.telegram-btn {
  background: linear-gradient(135deg, #0088CC, #006BA6);
}

.telegram-btn:hover {
  background: linear-gradient(135deg, #006BA6, #005580);
  transform: scale(1.02);
}

.twitter-btn {
  background: linear-gradient(135deg, #1DA1F2, #1991DA);
}

.twitter-btn:hover {
  background: linear-gradient(135deg, #1991DA, #1681C2);
  transform: scale(1.02);
}

.facebook-btn {
  background: linear-gradient(135deg, #4267B2, #365899);
}

.facebook-btn:hover {
  background: linear-gradient(135deg, #365899, #2D4A80);
  transform: scale(1.02);
}

/* Emergency Section */
.emergency-section {
  background: rgba(244, 67, 54, 0.1);
  border-radius: 8px;
  padding: 12px;
  border: 1px solid rgba(244, 67, 54, 0.3);
}

.emergency-header {
  color: #F44336;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 4px;
}

.emergency-description {
  color: #bbb;
  font-size: 10px;
  margin-bottom: 12px;
  line-height: 1.3;
}

.emergency-options {
  display: flex;
  gap: 6px;
}

.emergency-share-btn {
  flex: 1 1;
  padding: 8px 4px;
  border: none;
  border-radius: 6px;
  font-size: 9px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  color: white;
}

.email-emergency {
  background: linear-gradient(135deg, #F44336, #D32F2F);
}

.email-emergency:hover {
  background: linear-gradient(135deg, #D32F2F, #B71C1C);
  transform: scale(1.02);
}

.sms-emergency {
  background: linear-gradient(135deg, #FF5722, #E64A19);
}

.sms-emergency:hover {
  background: linear-gradient(135deg, #E64A19, #D84315);
  transform: scale(1.02);
}

.copy-emergency {
  background: linear-gradient(135deg, #9C27B0, #7B1FA2);
}

.copy-emergency:hover {
  background: linear-gradient(135deg, #7B1FA2, #6A1B9A);
  transform: scale(1.02);
}

/* Additional Info */
.additional-info {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.info-label {
  color: #bbb;
  font-size: 11px;
  font-weight: bold;
}

.info-value {
  color: white;
  font-size: 11px;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .where-am-i-button {
    bottom: 100px;
    right: 15px;
    width: 45px;
    height: 45px;
    font-size: 20px;
  }
  
  .where-am-i-overlay {
    padding: 10px;
  }
  
  .where-am-i-modal {
    padding: 16px;
    max-height: 90vh;
  }
  
  .header-title {
    font-size: 16px;
  }
  
  .cities-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .location-primary {
    font-size: 14px;
  }
  
  .coordinates-value, .road-value {
    font-size: 12px;
  }

  /* Sharing responsive */
  .quick-actions {
    flex-direction: column;
    gap: 6px;
  }
  
  .action-btn {
    min-width: auto;
    padding: 12px 16px;
    font-size: 12px;
  }
  
  .sharing-row {
    flex-direction: column;
    gap: 6px;
  }
  
  .share-btn {
    padding: 12px 16px;
    font-size: 12px;
  }
  
  .emergency-options {
    flex-direction: column;
    gap: 6px;
  }
  
  .emergency-share-btn {
    padding: 10px 16px;
    font-size: 11px;
  }
}

/* Touch-friendly for mobile */
@media (hover: none) and (pointer: coarse) {
  .where-am-i-button {
    width: 55px;
    height: 55px;
  }
  
  .city-item {
    padding: 16px 12px;
    touch-action: manipulation;
  }
  
  .coordinates-value {
    padding: 10px 12px;
  }

  /* Touch-friendly sharing buttons */
  .action-btn, .share-btn, .emergency-share-btn {
    touch-action: manipulation;
    min-height: 44px;
  }
  
  .share-btn {
    padding: 14px 12px;
  }
  
  .emergency-share-btn {
    padding: 12px 10px;
  }
}
.driving-time-calculator {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

.calculator-header {
  text-align: center;
  margin-bottom: 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40px 20px;
  border-radius: 15px 15px 0 0;
  color: white;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content {
  flex: 1 1;
  text-align: center;
}

.calculator-header h1 {
  margin: 0 0 10px 0;
  font-size: 2.5rem;
  font-weight: 700;
}

.calculator-header p {
  margin: 0;
  font-size: 1.1rem;
  opacity: 0.95;
}

.free-nav-button {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: white;
  padding: 12px 24px;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  white-space: nowrap;
}

.free-nav-button:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.calculator-form {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
}

.form-group input[type="text"],
.form-group input[type="number"] {
  width: 100%;
  padding: 12px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

.form-group input[type="text"]:focus,
.form-group input[type="number"]:focus {
  outline: none;
  border-color: #3498db;
}

.form-group input[type="text"]:disabled {
  background-color: #f8f9fa;
  cursor: not-allowed;
}

.time-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
  margin-right: 10px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.calculate-button {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.calculate-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(102, 126, 234, 0.4);
}

.calculate-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #95a5a6;
}

.input-hint {
  display: block;
  margin-top: 5px;
  font-size: 0.85rem;
  color: #7f8c8d;
  font-style: italic;
}

.success-message {
  padding: 15px 20px;
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  border-radius: 8px;
  margin-bottom: 20px;
  font-weight: 500;
  animation: slideIn 0.3s ease-out;
}

.error-message {
  padding: 15px 20px;
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  border-radius: 8px;
  margin-bottom: 20px;
  font-weight: 500;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.urgent-warning {
  background: linear-gradient(135deg, #f39c12 0%, #e74c3c 100%);
  color: white;
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 6px 12px rgba(231, 76, 60, 0.3);
}

.urgent-warning h2 {
  font-size: 2rem;
  margin-bottom: 15px;
}

.results-container {
  margin-top: 30px;
}

.results-summary {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 25px;
}

.results-summary h2 {
  color: #2c3e50;
  margin-bottom: 20px;
}

.summary-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.stat {
  display: flex;
  flex-direction: column;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.stat-label {
  font-size: 0.9rem;
  color: #7f8c8d;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #3498db;
}

.recommendation {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 25px;
  box-shadow: 0 6px 12px rgba(102, 126, 234, 0.3);
}

.recommendation h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.recommended-stop h4 {
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.recommended-stop p {
  font-size: 1rem;
  margin-bottom: 15px;
  opacity: 0.95;
}

.stop-details {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  font-size: 0.95rem;
}

.stop-details span {
  background: rgba(255, 255, 255, 0.2);
  padding: 8px 12px;
  border-radius: 6px;
}

.truck-stops-list {
  margin-top: 30px;
}

.truck-stops-list h3 {
  color: #2c3e50;
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.stops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.stop-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}

.stop-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.stop-card.selected {
  border: 3px solid #3498db;
  box-shadow: 0 6px 16px rgba(52, 152, 219, 0.3);
}

.stop-rank {
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}

.stop-card h4 {
  color: #2c3e50;
  font-size: 1.1rem;
  margin-bottom: 8px;
  margin-right: 50px;
}

.stop-brand {
  color: #7f8c8d;
  font-size: 0.9rem;
  margin-bottom: 12px;
}

.stop-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: #555;
}

.stop-services {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  margin-bottom: 12px;
}

.service-tag {
  background: #ecf0f1;
  color: #2c3e50;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.stop-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.create-route-button {
  width: 100%;
  padding: 10px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.create-route-button:hover {
  background: #2980b9;
}

.record-button {
  width: 100%;
  padding: 10px;
  background: #27ae60;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.record-button:hover {
  background: #229954;
}

@media (max-width: 768px) {
  .calculator-header h1 {
    font-size: 2rem;
  }

  .time-inputs {
    grid-template-columns: 1fr;
  }

  .stops-grid {
    grid-template-columns: 1fr;
  }

  .summary-stats {
    grid-template-columns: 1fr;
  }
}

/* Botão Flutuante Sempre Visível */
.highway-control-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: linear-gradient(135deg, var(--accent-gold), var(--highlight));
  border: 3px solid var(--border-primary);
  border-radius: 16px;
  padding: 12px 16px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  transition: all 0.3s ease;
  min-width: 140px;
  -webkit-user-select: none;
          user-select: none;
}

.highway-control-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  border-color: var(--accent-gold);
}

.highway-control-button:active {
  transform: translateY(-2px);
}

.highway-icon {
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 4px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.highway-status {
  text-align: center;
}

.status-text {
  display: block;
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--button-text);
  line-height: 1;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.segments-count {
  display: block;
  font-size: 0.7rem;
  color: var(--button-text);
  opacity: 0.9;
  margin-top: 2px;
}

/* Modal de Controle */
.highway-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.3s ease;
  padding: 20px;
}

.highway-modal {
  background: var(--bg-primary);
  border: 3px solid var(--accent-gold);
  border-radius: 20px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.highway-modal-header {
  padding: 1.5rem 2rem;
  border-bottom: 3px solid var(--accent-gold);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--bg-jupiter), var(--border-primary));
}

.highway-modal-header h3 {
  color: var(--accent-gold);
  margin: 0;
  font-size: 1.4rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.close-modal-btn {
  background: var(--alert-danger);
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-modal-btn:hover {
  transform: scale(1.1);
}

.highway-modal-content {
  flex: 1 1;
  overflow-y: auto;
  padding: 2rem;
}

/* Controle Geral */
.general-control {
  margin-bottom: 2rem;
}

.avoid-all-section {
  text-align: center;
}

.avoid-all-btn {
  width: 100%;
  padding: 1.5rem;
  border: 3px solid;
  border-radius: 12px;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 1rem;
}

.avoid-all-btn:not(.active) {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-color: #22c55e;
  color: white;
}

.avoid-all-btn.active {
  background: linear-gradient(135deg, var(--alert-danger), #dc2626);
  border-color: var(--alert-danger);
  color: white;
}

.avoid-all-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.avoid-all-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

/* Controle de Segmentos */
.segments-control {
  margin-bottom: 2rem;
}

.segments-control h4 {
  color: var(--text-primary);
  margin-bottom: 1rem;
  font-size: 1.1rem;
  border-bottom: 2px solid var(--accent-gold);
  padding-bottom: 0.5rem;
}

.segments-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.segment-item {
  border: 2px solid;
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.2s ease;
}

.segment-item.enabled {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.05);
}

.segment-item.disabled {
  border-color: var(--alert-danger);
  background: rgba(239, 68, 68, 0.05);
}

.segment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.segment-info {
  flex: 1 1;
}

.segment-name {
  display: block;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.segment-distance {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.segment-toggle {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  min-width: 80px;
  transition: all 0.2s ease;
}

.segment-toggle.on {
  background: #22c55e;
  color: white;
}

.segment-toggle.off {
  background: var(--alert-danger);
  color: white;
}

.segment-toggle:hover {
  transform: scale(1.05);
}

.segment-details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.segment-benefits {
  display: flex;
  gap: 1rem;
}

.time-savings {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
}

.toll-cost {
  background: rgba(239, 68, 68, 0.2);
  color: var(--alert-danger);
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
}

.avoiding {
  background: rgba(120, 120, 120, 0.2);
  color: #666;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
}

.segment-restrictions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tolls, .restriction {
  background: rgba(196, 147, 75, 0.2);
  color: var(--accent-gold);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Resumo da Rota */
.route-summary {
  background: rgba(196, 147, 75, 0.1);
  border: 2px solid var(--accent-gold);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.route-summary h4 {
  color: var(--accent-gold);
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.summary-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.stat-item {
  background: var(--bg-primary);
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--accent-gold);
  text-align: center;
}

.stat-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.stat-value {
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
}

.stat-value.time {
  color: #22c55e;
}

.stat-value.cost {
  color: var(--alert-danger);
}

.stat-value.count {
  color: var(--accent-gold);
}

/* Botões de Ação */
.modal-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

.apply-btn, .reset-btn {
  flex: 1 1;
  padding: 1rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.apply-btn {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.reset-btn {
  background: linear-gradient(135deg, var(--accent-gold), var(--highlight));
  color: var(--button-text);
}

.apply-btn:hover, .reset-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Informações */
.highway-info {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid #22c55e;
  border-radius: 8px;
  padding: 1.5rem;
}

.highway-info h5 {
  color: #22c55e;
  margin-bottom: 1rem;
  font-size: 1rem;
}

.highway-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.highway-info li {
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.highway-info strong {
  color: var(--text-primary);
}

/* Animações */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .highway-control-button {
    bottom: 80px; /* Evitar conflito com barra de navegação mobile */
    right: 15px;
    min-width: 120px;
    padding: 10px 12px;
  }
  
  .highway-icon {
    font-size: 1.5rem;
  }
  
  .status-text {
    font-size: 0.7rem;
  }
  
  .highway-modal {
    width: 95%;
    max-height: 85vh;
  }
  
  .highway-modal-header {
    padding: 1rem;
  }
  
  .highway-modal-content {
    padding: 1rem;
  }
  
  .segment-header {
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
  }
  
  .segment-benefits {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .summary-stats {
    grid-template-columns: 1fr;
  }
  
  .modal-actions {
    flex-direction: column;
  }
}
/* Toll Segment Selector - Dropdown Panel */
.toll-segment-selector {
  position: fixed;
  left: 80px;
  top: 50%;
  transform: translateY(-50%);
  width: 400px;
  max-height: 80vh;
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  z-index: 1002;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* Header */
.toll-selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
  color: white;
  border-bottom: 3px solid #1565C0;
}

.toll-selector-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

/* Summary Stats */
.toll-summary {
  display: flex;
  justify-content: space-around;
  padding: 16px;
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

.toll-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.stat-label {
  font-size: 11px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #333;
}

.stat-value.active {
  color: #4CAF50;
}

.stat-value.avoided {
  color: #f44336;
}

/* Toggle All Section */
.toggle-all-section {
  padding: 16px;
  background: white;
  border-bottom: 2px solid #e0e0e0;
}

.toggle-all-btn {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 2px solid;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 600;
}

.toggle-all-btn.enabled {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  border-color: #388E3C;
  color: white;
}

.toggle-all-btn.disabled {
  background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
  border-color: #c62828;
  color: white;
}

.toggle-all-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.toggle-all-btn .icon {
  font-size: 24px;
}

.toggle-all-btn .label {
  flex: 1 1;
  text-align: left;
}

.toggle-all-btn .action {
  font-size: 12px;
  opacity: 0.9;
  font-weight: 400;
}

/* Segments List */
.toll-segments-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 12px;
  background: #fafafa;
}

.list-header {
  margin-bottom: 12px;
}

.list-header h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
  color: #333;
  font-weight: 600;
}

.list-header .hint {
  margin: 0;
  font-size: 12px;
  color: #666;
}

.no-tolls {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #999;
  text-align: center;
}

.no-tolls .icon {
  font-size: 48px;
  margin-bottom: 12px;
}

/* Individual Toll Segment */
.toll-segment-item {
  background: white;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2px solid;
  transition: all 0.3s ease;
}

.toll-segment-item.enabled {
  border-color: #4CAF50;
  background: #f1f8f4;
}

.toll-segment-item.disabled {
  border-color: #f44336;
  background: #ffebee;
  opacity: 0.7;
}

.toll-segment-item:hover {
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.segment-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.segment-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.segment-icon {
  font-size: 18px;
}

.segment-details {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #666;
}

.segment-details span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Toggle Segment Button */
.toggle-segment-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.toggle-segment-btn.enabled {
  background: #4CAF50;
  color: white;
}

.toggle-segment-btn.disabled {
  background: #f44336;
  color: white;
}

.toggle-segment-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.toggle-icon {
  font-size: 14px;
}

/* Footer */
.toll-selector-footer {
  padding: 16px;
  background: white;
  border-top: 2px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.total-cost {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.total-cost .label {
  font-size: 11px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.total-cost .value {
  font-size: 20px;
  font-weight: 700;
  color: #4CAF50;
}

.apply-btn {
  padding: 10px 24px;
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.apply-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .toll-segment-selector {
    left: 10px;
    right: 10px;
    width: calc(100% - 20px);
    max-height: 70vh;
  }

  .toll-summary {
    flex-direction: column;
    gap: 12px;
  }

  .toll-stats {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }

  .toll-segment-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .toggle-segment-btn {
    width: 100%;
    justify-content: center;
  }

  .toll-selector-footer {
    flex-direction: column;
    gap: 12px;
  }

  .apply-btn {
    width: 100%;
  }
}

/* Volume Control Widget */

.volume-control-widget {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  width: 400px;
  max-width: 90vw;
  
  background: rgba(30, 30, 30, 0.98);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 10000;
  
  padding: 20px;
}

.volume-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.volume-header h3 {
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.close-btn {
  width: 32px;
  height: 32px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  background: rgba(239, 68, 68, 0.2);
  border: none;
  border-radius: 50%;
  
  color: #ef4444;
  font-size: 20px;
  font-weight: bold;
  
  cursor: pointer;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: rgba(239, 68, 68, 0.3);
  transform: scale(1.1);
}

.volume-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.volume-option {
  display: flex;
  align-items: center;
  gap: 15px;
  
  padding: 15px;
  background: rgba(50, 50, 50, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  
  cursor: pointer;
  transition: all 0.2s ease;
}

.volume-option:hover {
  background: rgba(60, 60, 60, 0.8);
  border-color: rgba(59, 130, 246, 0.4);
  transform: translateX(4px);
}

.volume-option.active {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.6);
}

.volume-icon {
  font-size: 36px;
  flex-shrink: 0;
}

.volume-info {
  flex: 1 1;
}

.volume-label {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

.volume-description {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.volume-check {
  font-size: 24px;
  color: #10b981;
  font-weight: bold;
}

/* Rendezvous Widget - Meet up with friends */

.rendezvous-widget {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  width: 450px;
  max-width: 90vw;
  max-height: 80vh;
  
  background: rgba(30, 30, 30, 0.98);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 9000;
  
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  pointer-events: auto; /* Widget captures events, doesn't interfere with drag */
}

.rendezvous-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.rendezvous-header h3 {
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.rendezvous-tabs {
  display: flex;
  gap: 0;
  background: rgba(20, 20, 20, 0.8);
  padding: 0;
}

.tab-btn {
  flex: 1 1;
  padding: 12px;
  
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 600;
  
  cursor: pointer;
  transition: all 0.2s ease;
}

.tab-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
}

.tab-btn.active {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

.rendezvous-content {
  flex: 1 1;
  padding: 20px;
  overflow-y: auto;
}

.section-description {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Invite Section */
.invite-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.my-code-display {
  width: 100%;
  padding: 20px;
  background: rgba(59, 130, 246, 0.1);
  border: 2px solid rgba(59, 130, 246, 0.3);
  border-radius: 10px;
  text-align: center;
}

.code-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.code-value {
  color: #3b82f6;
  font-size: 32px;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  letter-spacing: 2px;
}

/* Join Section */
.join-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.code-input {
  width: 100%;
  padding: 15px;
  
  background: rgba(50, 50, 50, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  
  color: #ffffff;
  font-size: 18px;
  font-family: 'Courier New', monospace;
  text-align: center;
  letter-spacing: 2px;
  
  transition: all 0.2s ease;
}

.code-input:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.5);
  background: rgba(50, 50, 50, 0.8);
}

.code-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  letter-spacing: normal;
}

/* Active Section */
.active-section {
  min-height: 200px;
}

.no-friends {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.no-friends-icon {
  font-size: 64px;
  margin-bottom: 15px;
  opacity: 0.3;
}

.no-friends p {
  color: rgba(255, 255, 255, 0.7);
  margin: 5px 0;
}

.no-friends-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.friends-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.friend-item {
  display: flex;
  align-items: center;
  gap: 15px;
  
  padding: 15px;
  background: rgba(50, 50, 50, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  
  transition: all 0.2s ease;
}

.friend-item:hover {
  background: rgba(60, 60, 60, 0.8);
  border-color: rgba(59, 130, 246, 0.3);
}

.friend-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.friend-info {
  flex: 1 1;
}

.friend-name {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

.friend-code {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'Courier New', monospace;
  margin-bottom: 8px;
}

.friend-stats {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.remove-btn {
  width: 32px;
  height: 32px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  background: rgba(239, 68, 68, 0.2);
  border: none;
  border-radius: 50%;
  
  color: #ef4444;
  font-size: 16px;
  font-weight: bold;
  
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.remove-btn:hover {
  background: rgba(239, 68, 68, 0.3);
  transform: scale(1.1);
}

/* Primary Button */
.primary-btn {
  width: 100%;
  padding: 15px 30px;
  
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border: none;
  border-radius: 8px;
  
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  
  cursor: pointer;
  transition: all 0.2s ease;
  
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.primary-btn:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.primary-btn:active {
  transform: translateY(0);
}

/* Emission Zone Banner */

.emission-zone-banner {
  position: fixed;
  /* CRITICAL: BOTTOM position to NEVER block navigation instructions */
  bottom: 80px;  /* Above footer, below navigation instructions */
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;  /* Lower z-index - navigation has priority */
  animation: slideUp 0.4s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(255, 69, 0, 0.95), rgba(255, 107, 0, 0.95));
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(255, 69, 0, 0.5);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  min-width: 300px;
  max-width: 500px;
}

.banner-icon {
  font-size: 28px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.banner-text {
  flex: 1 1;
}

.banner-title {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}

.banner-message {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  line-height: 1.4;
}

.banner-close {
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.banner-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

/* Auto-hide progress bar */
.auto-hide-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}

.auto-hide-progress::after {
  content: '';
  display: block;
  height: 100%;
  background: #ffffff;
  animation: progressBar 4s linear;
}

@keyframes progressBar {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

@media (max-width: 768px) {
  .emission-zone-banner {
    bottom: 70px;  /* Adjusted for mobile */
    left: 10px;
    right: 10px;
    transform: none;
  }

  .banner-content {
    min-width: auto;
    padding: 12px 16px;
  }

  .banner-icon {
    font-size: 24px;
  }

  .banner-title {
    font-size: 14px;
  }

  .banner-message {
    font-size: 12px;
  }
}

/* Toggle Switch Component - TomTom Style */

.toggle-switch-container {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.toggle-label {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
}

/* Toggle Switch Button */
.toggle-switch {
  position: relative;
  width: 56px;
  height: 32px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.toggle-switch:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Slider Track */
.toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(120, 120, 120, 0.5); /* Gray when OFF */
  border: 2px solid rgba(150, 150, 150, 0.6);
  border-radius: 32px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
}

/* Knob */
.toggle-knob {
  position: absolute;
  left: 3px;
  width: 24px;
  height: 24px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Checked State (Blue - TomTom Style) */
.toggle-switch.checked .toggle-slider {
  background: rgba(0, 150, 255, 0.9); /* Blue when ON */
  border-color: rgba(0, 180, 255, 1);
}

.toggle-switch.checked .toggle-knob {
  transform: translateX(24px);
  box-shadow: 0 2px 6px rgba(0, 150, 255, 0.5);
}

/* Hover Effect */
.toggle-switch:not(.disabled):hover .toggle-slider {
  background: rgba(140, 140, 140, 0.6);
}

.toggle-switch.checked:not(.disabled):hover .toggle-slider {
  background: rgba(0, 170, 255, 1);
}

/* Active/Pressed Effect */
.toggle-switch:not(.disabled):active .toggle-knob {
  width: 28px;
}

/* Disabled State */
.toggle-switch.disabled .toggle-slider {
  background: rgba(80, 80, 80, 0.4);
  border-color: rgba(100, 100, 100, 0.4);
}

.toggle-switch.disabled .toggle-knob {
  background: #999999;
}

/* Focus State (Accessibility) */
.toggle-switch:focus {
  outline: none;
}

.toggle-switch:focus .toggle-slider {
  box-shadow: 0 0 0 3px rgba(0, 150, 255, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
  .toggle-switch {
    width: 50px;
    height: 28px;
  }

  .toggle-knob {
    width: 22px;
    height: 22px;
  }

  .toggle-switch.checked .toggle-knob {
    transform: translateX(22px);
  }
}

/* Dangerous Cargo Selector Styles */

.dangerous-cargo-selector {
  margin: 12px 0;
  background: rgba(30, 30, 30, 0.6);
  border-radius: 8px;
  overflow: hidden;
}

.cargo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.cargo-header:hover {
  background: rgba(40, 40, 40, 0.8);
}

.cargo-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.expand-icon {
  color: #00d4ff;
  font-size: 12px;
  transition: transform 0.2s;
}

.cargo-label {
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
}

.cargo-summary {
  color: #00d4ff;
  font-size: 14px;
  font-weight: 500;
}

.cargo-content {
  padding: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(20, 20, 20, 0.4);
}

/* Display Mode Selector */
.display-mode-selector {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.display-mode-label {
  display: block;
  color: #cccccc;
  font-size: 13px;
  margin-bottom: 8px;
}

.display-mode-options {
  display: flex;
  gap: 8px;
}

.mode-btn {
  flex: 1 1;
  padding: 8px 12px;
  background: rgba(50, 50, 50, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #ffffff;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.mode-btn:hover {
  background: rgba(60, 60, 60, 0.8);
  border-color: rgba(0, 212, 255, 0.4);
}

.mode-btn.active {
  background: linear-gradient(135deg, #00d4ff, #0099cc);
  border-color: #00d4ff;
  font-weight: 600;
}

/* Categories List */
.categories-list {
  margin-top: 12px;
}

.categories-header {
  margin-bottom: 12px;
}

.categories-header h4 {
  color: #ffffff;
  font-size: 14px;
  margin: 0 0 4px 0;
}

.categories-info {
  color: #999999;
  font-size: 12px;
  margin: 0;
}

.category-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  margin-bottom: 8px;
  background: rgba(40, 40, 40, 0.4);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.category-item:hover {
  background: rgba(50, 50, 50, 0.6);
  transform: translateX(4px);
}

.category-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: #00d4ff;
}

.category-info {
  flex: 1 1;
}

.category-label-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.category-code {
  display: inline-block;
  min-width: 45px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  /* Background and text colors are applied inline (MANDATORY) */
}

.category-name {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
}

.category-description {
  color: #999999;
  font-size: 12px;
  line-height: 1.4;
}

/* Selected Preview */
.selected-preview {
  margin-top: 16px;
  padding: 12px;
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 6px;
}

.selected-preview strong {
  display: block;
  color: #00d4ff;
  font-size: 13px;
  margin-bottom: 8px;
}

.selected-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.selected-badge {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  /* Background and text colors are applied inline (MANDATORY UN/ADR colors) */
}

/* Responsive */
@media (max-width: 768px) {
  .cargo-header {
    padding: 10px 12px;
  }

  .cargo-content {
    padding: 12px;
  }

  .display-mode-options {
    flex-direction: column;
  }

  .mode-btn {
    width: 100%;
  }

  .category-item {
    padding: 8px;
  }

  .category-code {
    min-width: 35px;
    font-size: 12px;
  }
}

/* My Vehicle Panel - TomTom Style */

.my-vehicle-panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.my-vehicle-panel {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  background: rgba(25, 25, 25, 0.98);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header */
.vehicle-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(30, 30, 30, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.vehicle-panel-header h2 {
  flex: 1 1;
  text-align: center;
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
}

.back-btn,
.close-btn {
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 20px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.back-btn:hover,
.close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Content */
.vehicle-panel-content {
  flex: 1 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.vehicle-panel-content::-webkit-scrollbar {
  width: 6px;
}

.vehicle-panel-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.vehicle-panel-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

/* Config Row (TomTom Style) */
.config-row {
  margin-bottom: 12px;
  background: rgba(30, 30, 30, 0.6);
  border-radius: 8px;
  overflow: hidden;
}

.config-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.config-row-header:hover {
  background: rgba(40, 40, 40, 0.8);
}

.row-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.expand-icon {
  color: #00d4ff;
  font-size: 11px;
  min-width: 12px;
  transition: transform 0.2s;
}

.row-label {
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
}

.row-value {
  color: #00d4ff;
  font-size: 15px;
  font-weight: 600;
}

.config-row-content {
  padding: 12px 16px;
  background: rgba(20, 20, 20, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Vehicle Type Options */
.vehicle-type-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vehicle-type-btn {
  width: 100%;
  padding: 12px 16px;
  background: rgba(50, 50, 50, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
}

.vehicle-type-btn:hover {
  background: rgba(60, 60, 60, 0.8);
  border-color: rgba(0, 212, 255, 0.3);
}

.vehicle-type-btn.active {
  background: rgba(0, 150, 255, 0.2);
  border-color: #00d4ff;
  color: #00d4ff;
}

/* Options List (Engine Type, Fuel Type) */
.options-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.option-btn {
  width: 100%;
  padding: 10px 14px;
  background: rgba(50, 50, 50, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
}

.option-btn:hover {
  background: rgba(60, 60, 60, 0.7);
  border-color: rgba(0, 212, 255, 0.3);
}

.option-btn.active {
  background: rgba(0, 150, 255, 0.15);
  border-color: #00d4ff;
  color: #00d4ff;
  font-weight: 600;
}

/* Config Section (Dimensions, Weights, Speed) */
.config-section {
  margin-bottom: 14px;
}

.section-title {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

/* Dimensions Grid */
.dimensions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  gap: 10px;
}

.dimension-input {
  width: 100%;
  padding: 10px;
  background: rgba(40, 40, 40, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  text-align: right;
  transition: all 0.2s;
}

.dimension-input:focus {
  outline: none;
  border-color: #00d4ff;
  background: rgba(50, 50, 50, 0.8);
}

/* Weights Grid */
.weights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  gap: 10px;
}

.weight-input {
  width: 100%;
  padding: 10px;
  background: rgba(40, 40, 40, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  text-align: right;
  transition: all 0.2s;
}

.weight-input:focus {
  outline: none;
  border-color: #00d4ff;
  background: rgba(50, 50, 50, 0.8);
}

/* Speed Input */
.speed-input {
  width: 100%;
  max-width: 120px;
  padding: 10px;
  background: rgba(40, 40, 40, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  text-align: right;
  transition: all 0.2s;
  float: right;
}

.speed-input:focus {
  outline: none;
  border-color: #00d4ff;
  background: rgba(50, 50, 50, 0.8);
}

/* Year and Axles Select */
.year-select,
.axles-select {
  width: 100%;
  max-width: 180px;
  padding: 10px;
  background: rgba(40, 40, 40, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  float: right;
}

.year-select:focus,
.axles-select:focus {
  outline: none;
  border-color: #00d4ff;
  background: rgba(50, 50, 50, 0.8);
}

.year-select option,
.axles-select option {
  background: #2a2a2a;
  color: #ffffff;
}

/* Emission Info */
.emission-info {
  margin-top: 12px;
  padding: 10px;
  background: rgba(255, 165, 0, 0.1);
  border: 1px solid rgba(255, 165, 0, 0.3);
  border-radius: 6px;
  color: #ffaa00;
  font-size: 12px;
  line-height: 1.4;
}

/* Metadata Form */
.metadata-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  color: #cccccc;
  font-size: 13px;
  font-weight: 500;
}

.form-group input {
  width: 100%;
  padding: 10px;
  background: rgba(40, 40, 40, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  transition: all 0.2s;
}

.form-group input:focus {
  outline: none;
  border-color: #00d4ff;
  background: rgba(50, 50, 50, 0.8);
}

.form-group input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* Footer */
.vehicle-panel-footer {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(30, 30, 30, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cancel-btn,
.save-btn {
  flex: 1 1;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.cancel-btn {
  background: rgba(100, 100, 100, 0.4);
  color: #ffffff;
}

.cancel-btn:hover {
  background: rgba(120, 120, 120, 0.6);
}

.save-btn {
  background: linear-gradient(135deg, #00d4ff, #0099cc);
  color: #ffffff;
}

.save-btn:hover {
  background: linear-gradient(135deg, #00e5ff, #00aadd);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
  .my-vehicle-panel-overlay {
    padding: 0;
  }

  .my-vehicle-panel {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .vehicle-panel-header {
    padding: 14px 16px;
  }

  .vehicle-panel-content {
    padding: 12px 16px;
  }

  .dimensions-grid {
    gap: 8px;
  }

  .weights-grid {
    gap: 8px;
  }

  .dimension-input,
  .weight-input {
    font-size: 14px;
  }
}

/* Accessibility */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* Vehicle Type Selector Styles */

.vehicle-type-selector {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  margin: 0 auto;
}

.selector-header {
  text-align: center;
  margin-bottom: 24px;
}

.selector-header h3 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 1.5rem;
}

.selector-header p {
  margin: 0;
  color: #7f8c8d;
  font-size: 0.95rem;
}

.vehicle-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.vehicle-option {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border: 2px solid #ecf0f1;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.vehicle-option:hover {
  border-color: #3498db;
  background-color: #f8f9fa;
}

.vehicle-option.selected {
  border-color: #27ae60;
  background-color: #e8f5e8;
}

.vehicle-icon {
  font-size: 3rem;
  line-height: 1;
  flex-shrink: 0;
}

.vehicle-info {
  flex: 1 1;
}

.vehicle-info h4 {
  margin: 0 0 12px 0;
  color: #2c3e50;
  font-size: 1.2rem;
}

.vehicle-features {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}

.vehicle-features li {
  padding: 4px 0;
  color: #27ae60;
  font-size: 0.9rem;
}

.truck-settings-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}

.truck-settings-btn:hover {
  background: #2980b9;
}

.car-note {
  margin-top: 8px;
}

.car-note small {
  color: #7f8c8d;
  font-style: italic;
}

.selection-indicator {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 1.5rem;
  color: #27ae60;
}

.selector-footer {
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid #ecf0f1;
}

.current-selection {
  font-size: 1rem;
}

.mode-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 0.9rem;
}

.mode-badge.truck {
  background: #e8f5e8;
  color: #27ae60;
}

.mode-badge.car {
  background: #e3f2fd;
  color: #1976d2;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .vehicle-type-selector {
    padding: 16px;
    margin: 16px;
  }
  
  .vehicle-option {
    padding: 16px;
  }
  
  .vehicle-icon {
    font-size: 2.5rem;
  }
  
  .vehicle-info h4 {
    font-size: 1.1rem;
  }
  
  .vehicle-features li {
    font-size: 0.85rem;
  }
}
/* Vehicle Status Indicator Styles */

.vehicle-status-indicator {
  position: fixed;
  top: 90px; /* Below TopBar */
  right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1000;
}

.vehicle-status-main {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 25px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.vehicle-status-main:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.vehicle-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.vehicle-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
}

.vehicle-name {
  font-size: 0.9rem;
  font-weight: bold;
  color: #2c3e50;
  line-height: 1.2;
}

.vehicle-restrictions {
  font-size: 0.75rem;
  color: #7f8c8d;
  line-height: 1.2;
}

.change-indicator {
  font-size: 1rem;
  color: #7f8c8d;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.vehicle-status-main:hover .change-indicator {
  opacity: 1;
}

.truck-config-btn {
  background: #3498db;
  color: white;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}

.truck-config-btn:hover {
  background: #2980b9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.modal-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalSlideUp 0.3s ease-out;
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.vehicle-selector-modal {
  max-width: 700px;
  width: 100%;
}

.truck-config-modal {
  max-width: 900px;
  width: 100%;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e9ecef;
}

.modal-header h2 {
  margin: 0;
  color: #2c3e50;
  font-size: 1.5rem;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #7f8c8d;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.modal-close-btn:hover {
  background: #f8f9fa;
  color: #2c3e50;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .vehicle-status-indicator {
    top: 80px;
    right: 10px;
  }
  
  .vehicle-status-main {
    padding: 6px 12px;
    gap: 8px;
  }
  
  .vehicle-icon {
    font-size: 1.3rem;
  }
  
  .vehicle-info {
    min-width: 100px;
  }
  
  .vehicle-name {
    font-size: 0.8rem;
  }
  
  .vehicle-restrictions {
    font-size: 0.7rem;
  }
  
  .truck-config-btn {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }
  
  .modal-overlay {
    padding: 10px;
  }
  
  .modal-header {
    padding: 16px 20px;
  }
  
  .modal-header h2 {
    font-size: 1.3rem;
  }
}

@media (max-width: 480px) {
  .vehicle-status-indicator {
    position: relative;
    top: auto;
    right: auto;
    margin: 10px;
    justify-content: center;
  }
  
  .vehicle-info {
    min-width: 80px;
  }
  
  .vehicle-name {
    font-size: 0.75rem;
  }
  
  .vehicle-restrictions {
    font-size: 0.65rem;
  }
}

/* Compact mode for small screens */
@media (max-width: 360px) {
  .vehicle-status-main {
    padding: 4px 8px;
  }
  
  .vehicle-icon {
    font-size: 1.2rem;
  }
  
  .vehicle-info {
    display: none; /* Hide text on very small screens, show only icon */
  }
  
  .change-indicator {
    font-size: 0.9rem;
  }
}
/* Custom Footer - TomTom Style Navigation Footer */

.custom-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: auto;
  width: calc(100vw - 450px);
  max-width: calc(100vw - 450px);
  height: 80px;
  
  display: flex;
  align-items: center;
  gap: 0;
  
  background: #d4b896;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
  
  z-index: 998;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* Hamburger Menu Button - Left Corner - BLACK CIRCLE WITH WHITE LINES */
.footer-hamburger-btn {
  width: 80px;
  height: 80px;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  
  background: transparent;
  border: none;
  
  cursor: pointer;
  transition: all 0.2s ease;
  
  flex-shrink: 0;
  
  position: relative;
}

.footer-hamburger-btn::before {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.95);
  border-radius: 50%;
  z-index: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.footer-hamburger-btn:hover::before {
  background: rgba(20, 20, 20, 0.95);
  transform: scale(1.05);
}

.footer-hamburger-btn:active::before {
  background: rgba(40, 40, 40, 0.95);
  transform: scale(0.98);
}

.hamburger-line {
  width: 24px;
  height: 3px;
  background: #ffffff;
  border-radius: 2px;
  transition: all 0.2s ease;
  position: relative;
  z-index: 1;
}

.footer-hamburger-btn:hover .hamburger-line {
  background: #fbbf24;
}

/* Black Info Bar - Time, Distance, Duration, ETA - BLACK PANELS INSIDE BEIGE FOOTER */
.footer-info-bar {
  flex: 1 1;
  height: 100%;
  
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  
  background: #d4b896;
  padding: 10px 20px;
  padding-left: 15px;
  
  border-left: none;
  border-right: none;
}

.info-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
  
  /* Black window/panel inside beige footer */
  background: rgba(0, 0, 0, 0.95);
  padding: 10px 35px 10px 15px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  
  min-width: 150px;
  height: 60px;
}

.info-icon {
  font-size: 34px;
  opacity: 0.9;
  flex-shrink: 0;
  margin-right: 5px;
}

.info-value {
  font-family: 'Arial', 'Helvetica', sans-serif;
  font-size: 42px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  color: #ffffff !important;
  flex: 1 1;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.info-separator {
  display: none;
}

/* Multiple Stops Feature */
.info-item-eta.has-multiple-stops {
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
}

.info-item-eta.has-multiple-stops:hover {
  background: rgba(20, 20, 20, 0.95);
}

.stops-indicator {
  font-size: 18px;
  font-weight: 700;
  color: #4CAF50;
  margin-left: 8px;
  animation: pulse-indicator 2s ease-in-out infinite;
}

@keyframes pulse-indicator {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Dropup Panel (opens upward from footer) */
.stops-dropup-panel {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 10px;
  
  width: 400px;
  max-height: 500px;
  
  background: rgba(30, 30, 30, 0.98);
  border: 2px solid rgba(76, 175, 80, 0.5);
  border-radius: 12px;
  
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
  
  overflow: hidden;
  z-index: 10000;
  
  animation: dropup-slide 0.3s ease-out;
}

@keyframes dropup-slide {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.stops-dropup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  padding: 15px 20px;
  background: rgba(76, 175, 80, 0.2);
  border-bottom: 1px solid rgba(76, 175, 80, 0.3);
  
  color: #4CAF50;
  font-size: 16px;
  font-weight: 700;
}

.dropup-close-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s ease;
}

.dropup-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.stops-list {
  max-height: 400px;
  overflow-y: auto;
  padding: 10px;
}

.stop-item {
  display: flex;
  align-items: center;
  gap: 15px;
  
  padding: 15px;
  margin-bottom: 8px;
  
  background: rgba(40, 40, 40, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  
  transition: all 0.2s ease;
}

.stop-item:hover {
  background: rgba(50, 50, 50, 0.9);
  border-color: rgba(76, 175, 80, 0.5);
}

.stop-item.current-stop {
  background: rgba(76, 175, 80, 0.2);
  border-color: rgba(76, 175, 80, 0.5);
}

.stop-number {
  display: flex;
  align-items: center;
  justify-content: center;
  
  width: 35px;
  height: 35px;
  
  background: rgba(76, 175, 80, 0.3);
  border-radius: 50%;
  
  color: #4CAF50;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.stop-info {
  flex: 1 1;
  min-width: 0;
}

.stop-name {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stop-eta {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.stop-badge {
  padding: 4px 12px;
  background: rgba(76, 175, 80, 0.3);
  border-radius: 12px;
  color: #4CAF50;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
}

.stop-distance {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
}

.stops-dropup-footer {
  padding: 12px 20px;
  background: rgba(20, 20, 20, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-note {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  font-style: italic;
}

/* Action Buttons - Right Side - Scrollable to show all 11 buttons */
.footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  
  flex-shrink: 0;
  overflow-x: auto; /* Allow horizontal scroll */
  overflow-y: hidden;
  max-width: 100%;
  
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
}

.footer-actions::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.footer-action-btn {
  width: 70px;
  height: 70px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  background: rgba(40, 40, 40, 0.95);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  
  cursor: pointer;
  transition: all 0.2s ease;
  
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.footer-action-btn:hover {
  background: rgba(60, 60, 60, 0.95);
  border-color: rgba(251, 191, 36, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.footer-action-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.action-icon {
  font-size: 32px;
}

/* Optional buttons - always visible if space allows */
.footer-action-btn.optional {
  display: flex;
}

@media (max-width: 768px) {
  .footer-action-btn.optional {
    display: none;
  }
  
  .footer-info-bar {
    gap: 8px;
    padding: 0 12px;
  }
  
  .info-item {
    font-size: 12px;
    gap: 4px;
  }
  
  .info-icon {
    font-size: 14px;
  }
  
  .info-value {
    font-size: 13px;
  }
}

/* Small screens - compact layout */
@media (max-width: 480px) {
  .custom-footer {
    height: 50px;
  }
  
  .footer-hamburger-btn {
    width: 50px;
    height: 50px;
  }
  
  .footer-info-bar {
    gap: 6px;
    padding: 0 8px;
  }
  
  .info-separator {
    margin: 0 2px;
  }
  
  .footer-action-btn {
    width: 40px;
    height: 40px;
  }
  
  .action-icon {
    font-size: 16px;
  }
}

.street-view-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.street-view-modal {
  /* MUDANÇA CRÍTICA: Fundo bege seguro - NÃO BRANCO */
  background: #f5f5dc; /* Bege suave - seguro para motoristas */
  border-radius: 16px;
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.street-view-options {
  max-width: 800px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 2px solid #e5e5e5;
}

.modal-header h2 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.2s;
}

.close-btn:hover {
  background: #f0f0f0;
}

.modal-body {
  padding: 24px;
}

.modal-description {
  font-size: 16px;
  color: #666;
  margin-bottom: 24px;
  text-align: center;
}

.option-card {
  border: 2px solid #e5e5e5;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  transition: all 0.3s;
}

.option-card:hover {
  border-color: #007bff;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.1);
}

.option-free {
  background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
}

.option-integrated {
  background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
}

.option-icon {
  font-size: 48px;
  text-align: center;
  margin-bottom: 16px;
}

.option-card h3 {
  margin: 0 0 12px 0;
  font-size: 20px;
  color: #333;
  text-align: center;
}

.option-card p {
  color: #666;
  margin-bottom: 16px;
  text-align: center;
}

.option-card ul {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.option-card ul li {
  padding: 8px 0;
  font-size: 14px;
  color: #555;
}

.btn-primary,
.btn-secondary {
  width: 100%;
  padding: 14px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 8px;
}

.btn-primary {
  background: #007bff;
  color: white;
}

.btn-primary:hover {
  background: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.btn-primary:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background: #5a6268;
}

.btn-link {
  display: inline-block;
  padding: 8px 16px;
  background: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
  margin-top: 8px;
  transition: background 0.2s;
}

.btn-link:hover {
  background: #0056b3;
}

.street-view-container {
  padding: 24px;
  background: #f8f9fa;
}

.modal-footer {
  display: flex;
  gap: 12px;
  padding: 24px;
  border-top: 2px solid #e5e5e5;
}

.modal-footer button {
  flex: 1 1;
}

/* Tutorial Styles */
.tutorial-body {
  max-height: 70vh;
  overflow-y: auto;
}

.tutorial-body h3 {
  margin: 0 0 24px 0;
  color: #333;
  text-align: center;
  font-size: 22px;
}

.tutorial-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.step {
  display: flex;
  gap: 16px;
  background: #f8f9fa;
  padding: 20px;
  border-radius: 12px;
  border-left: 4px solid #007bff;
}

.step-number {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: #007bff;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
}

.step-content {
  flex: 1 1;
}

.step-content h4 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 16px;
}

.step-content p {
  margin: 0 0 12px 0;
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}

.step-note {
  background: #fff3cd;
  border-left: 3px solid #ffc107;
  padding: 8px 12px;
  margin-top: 8px;
  font-size: 13px;
  color: #856404;
}

.api-key-input {
  width: 100%;
  padding: 12px;
  border: 2px solid #e5e5e5;
  border-radius: 8px;
  font-size: 14px;
  font-family: monospace;
  margin-bottom: 12px;
  transition: border-color 0.2s;
}

.api-key-input:focus {
  outline: none;
  border-color: #007bff;
}

.tutorial-footer {
  padding: 20px 0 0 0;
  border-top: 2px solid #e5e5e5;
  margin-top: 20px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .street-view-modal {
    max-width: 100%;
    max-height: 95vh;
    margin: 0;
    border-radius: 16px 16px 0 0;
  }

  .modal-header h2 {
    font-size: 20px;
  }

  .option-icon {
    font-size: 36px;
  }

  .option-card h3 {
    font-size: 18px;
  }

  .step {
    flex-direction: column;
  }

  .step-number {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .modal-footer {
    flex-direction: column;
  }
}

/* POI Context Menu Styles */

.poi-context-menu {
  position: fixed;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  min-width: 280px;
  z-index: 10000;
  animation: fadeInScale 0.2s ease-out;
  overflow: hidden;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.poi-context-menu-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.poi-icon {
  font-size: 24px;
}

.poi-name {
  font-weight: 600;
  font-size: 16px;
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.poi-context-menu-options {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}

.poi-context-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
  text-align: left;
  width: 100%;
}

.poi-context-option:hover {
  background-color: #f5f5f5;
}

.poi-context-option:active {
  background-color: #e8e8e8;
}

.option-icon {
  font-size: 20px;
  width: 24px;
  text-align: center;
}

.option-text {
  font-size: 15px;
  color: #333;
  font-weight: 500;
}

.poi-context-menu-footer {
  padding: 12px 16px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: flex-end;
}

.poi-context-close {
  padding: 8px 20px;
  background: none;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  transition: all 0.2s;
}

.poi-context-close:hover {
  background-color: #f5f5f5;
  border-color: #999;
}

.poi-context-coordinates {
  padding: 8px 16px;
  background-color: #f9f9f9;
  border-top: 1px solid #e0e0e0;
  font-size: 12px;
  color: #666;
  font-family: monospace;
  text-align: center;
}

/* Overlay to close menu when clicking outside */
.poi-context-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: transparent;
}

/* Add POI Modal Styles */

.add-poi-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10001;
  animation: fadeIn 0.2s ease-out;
}

.add-poi-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 10002;
  animation: slideIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -48%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.add-poi-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px 12px 0 0;
}

.add-poi-icon {
  font-size: 28px;
}

.add-poi-header h2 {
  flex: 1 1;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.add-poi-close {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.add-poi-close:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.add-poi-form {
  padding: 24px;
}

.add-poi-error {
  background-color: #fee;
  border: 1px solid #fcc;
  color: #c33;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 14px;
}

.add-poi-coordinates {
  background-color: #f5f5f5;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 20px;
  font-size: 14px;
  font-family: monospace;
  color: #666;
  text-align: center;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
  font-size: 14px;
}

.form-group input[type="text"],
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.form-group input[type="text"]:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: #667eea;
}

.form-group input[type="text"]:disabled,
.form-group textarea:disabled,
.form-group select:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.form-group textarea {
  resize: vertical;
  font-family: inherit;
}

.form-group-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 10px;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.checkbox-label:hover {
  background-color: #f5f5f5;
}

.checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.checkbox-label span {
  font-size: 14px;
  color: #333;
}

.add-poi-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.btn-primary,
.btn-secondary {
  flex: 1 1;
  padding: 14px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  background: white;
  color: #666;
  border: 1px solid #ddd;
}

.btn-secondary:hover:not(:disabled) {
  background-color: #f5f5f5;
  border-color: #999;
}

.add-poi-note {
  margin-top: 16px;
  padding: 12px;
  background-color: #e3f2fd;
  border-left: 4px solid #2196f3;
  border-radius: 4px;
  font-size: 13px;
  color: #0d47a1;
}

.route-cutting-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.route-cutting-modal {
  background: white;
  border-radius: 12px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 2px solid #eee;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

.modal-header h2 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
}

.close-btn:hover {
  background: #f5f5f5;
  color: #333;
}

.modal-body {
  padding: 20px;
}

.cut-point-info {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.cut-point-info h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: #333;
}

.cut-point-info .coordinates {
  font-family: monospace;
  font-size: 14px;
  color: #666;
  margin: 5px 0;
}

.cut-point-info .description {
  font-size: 16px;
  color: #444;
  font-weight: 500;
  margin: 10px 0 0 0;
}

.time-input-section {
  background: #fff;
  border: 2px solid #eee;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

.time-input-section h3 {
  margin: 0 0 15px 0;
  font-size: 18px;
  color: #333;
}

.time-inputs {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.input-group {
  flex: 1 1;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.input-group input[type="number"] {
  width: 100%;
  padding: 10px;
  font-size: 18px;
  border: 2px solid #ddd;
  border-radius: 6px;
  text-align: center;
  font-weight: bold;
}

.traffic-toggle {
  margin-bottom: 15px;
}

.traffic-toggle label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: #555;
}

.traffic-toggle input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.recalculate-btn {
  width: 100%;
  padding: 12px;
  background: #FFD700;
  color: #000;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

.recalculate-btn:hover {
  background: #FFC700;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.recalculate-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.error-message {
  background: #fee;
  border: 2px solid #fcc;
  border-radius: 8px;
  padding: 15px;
  color: #c33;
  text-align: center;
  margin-bottom: 20px;
}

.loading-message {
  text-align: center;
  padding: 40px 20px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #FFD700;
  border-radius: 50%;
  margin: 0 auto 20px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.results-section {
  margin-top: 20px;
}

.summary {
  background: #f0f8ff;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.summary h3 {
  margin: 0 0 15px 0;
  font-size: 18px;
  color: #333;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  gap: 10px;
}

.summary-item {
  background: white;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ddd;
}

.summary-item.highlight {
  background: #FFD700;
  border-color: #FFC700;
}

.summary-item .label {
  display: block;
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.summary-item .value {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.truck-stops-list h3 {
  margin: 0 0 15px 0;
  font-size: 18px;
  color: #333;
}

.no-results {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-size: 16px;
}

.stops-grid {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.stop-card {
  background: white;
  border: 2px solid #eee;
  border-radius: 8px;
  padding: 15px;
  cursor: pointer;
  transition: all 0.2s;
}

.stop-card:hover {
  border-color: #FFD700;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.stop-header h4 {
  margin: 0;
  font-size: 16px;
  color: #333;
  flex: 1 1;
}

.stop-header .distance {
  font-size: 14px;
  font-weight: bold;
  color: #FFD700;
  background: #FFF9E6;
  padding: 4px 12px;
  border-radius: 12px;
}

.stop-details {
  font-size: 14px;
  color: #666;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.occupancy {
  margin-top: 8px;
}

.occupancy-bar {
  width: 100%;
  height: 8px;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
}

.occupancy-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #FFC107, #F44336);
  transition: width 0.3s;
}

.occupancy span {
  font-size: 12px;
  color: #999;
}

.recommendation {
  background: #e8f5e9;
  padding: 15px;
  border-radius: 8px;
  margin-top: 20px;
}

.recommendation h3 {
  margin: 0 0 15px 0;
  font-size: 18px;
  color: #2e7d32;
}

.recommendation-card {
  background: white;
  padding: 15px;
  border-radius: 6px;
  border-left: 4px solid #4CAF50;
}

.recommendation-card h4 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #333;
}

.recommendation-card p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .route-cutting-modal {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }

  .time-inputs {
    flex-direction: column;
  }
}

.app-container {
  display: flex;
  height: 100vh;
  width: 100vw;
  background: var(--bg-jupiter);
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.main-area {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  margin: 0;
  padding: 0;
  width: 100%;
}

.main-area.with-menu {
  margin: 0;
  padding: 0;
}

.navigation-content {
  flex: 1 1;
  display: flex;
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.main-map-area {
  flex: 1 1;
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  background: #1a1a1a;
}

.dashboard-overview {
  padding: 2rem;
  flex: 1 1;
  overflow-y: auto;
}

.overview-header {
  margin-bottom: 2rem;
  text-align: center;
}

.overview-header h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.overview-header p {
  color: var(--text-secondary);
  font-size: 1.1rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 2rem;
  gap: 2rem;
}

.stat-card {
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: transform 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
}

.stat-icon {
  font-size: 3rem;
  background: linear-gradient(135deg, var(--accent-gold), var(--highlight));
  padding: 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px var(--shadow-soft);
}

.stat-content {
  flex: 1 1;
}

.stat-number {
  font-size: 2rem;
  font-weight: bold;
  color: var(--accent-gold);
  line-height: 1;
}

.stat-label {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

.coming-soon {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.coming-soon-content {
  padding: 3rem;
}

.coming-soon-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.coming-soon h2 {
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-size: 2rem;
}

.coming-soon p {
  color: var(--text-secondary);
  font-size: 1.1rem;
}

/* Botões de Teste (remover em produção) */
.test-buttons {
  position: fixed;
  top: 120px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10500; /* MAIS ALTO que outros widgets para evitar sobreposição */
}

.test-btn {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  min-width: 160px;
  text-align: center;
}

.test-btn:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.test-btn.reroute-test {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.test-btn.reroute-test:hover {
  background: linear-gradient(135deg, #d97706, #b45309);
}

.test-btn.parkway-test {
  background: linear-gradient(135deg, #FF69B4, #FF1493); /* Rosa */
}

.test-btn.parkway-test:hover {
  background: linear-gradient(135deg, #FF1493, #DC143C);
}

.test-btn.floating-test {
  background: linear-gradient(135deg, #3b82f6, #1e40af);
}

.test-btn.floating-test:hover {
  background: linear-gradient(135deg, #1e40af, #1e3a8a);
}

.test-btn.add-poi-test {
  background: linear-gradient(135deg, #10b981, #059669);
}

.test-btn.add-poi-test:hover {
  background: linear-gradient(135deg, #059669, #047857);
}

/* Botões específicos para EventsPanel - Deve estar sempre acessível */
.simulate-btn {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
  border: 2px solid rgba(139, 92, 246, 0.3) !important;
  color: white !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.3s ease !important;
  min-width: 160px !important;
  text-align: center !important;
  z-index: 10600 !important; /* Ainda mais alto para os botões de teste do EventsPanel */
  position: relative !important;
}

.simulate-btn:hover {
  background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(139, 92, 246, 0.4) !important;
  border-color: rgba(139, 92, 246, 0.6) !important;
}

/* Responsive para botões de teste */
@media (max-width: 768px) {
  .test-buttons {
    top: 80px;
    right: 15px;
  }
  
  .test-btn {
    font-size: 0.75rem;
    padding: 6px 10px;
    min-width: 140px;
  }
}

/* Botão Toggle KM/MI para Alertas de Direção */
.units-toggle-button {
  position: fixed;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border: 2px solid rgba(59, 130, 246, 0.5);
  color: #fff;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  z-index: 1500;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
  min-width: 80px;
}

.units-toggle-button:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
  border-color: #3b82f6;
}

/* Responsividade */
@media (max-width: 1024px) {
  .main-area {
    margin-left: 0;
  }
  
  .main-area.with-menu {
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .app-container {
    flex-direction: column;
  }
  
  .main-menu {
    position: static;
    width: 100%;
    height: auto;
  }
  
  .navigation-content {
    height: auto;
    min-height: calc(100vh - 200px);
  }
  
  .content-area {
    display: block;
  }
  
  .sidebar {
    width: 100%;
    max-height: 300px;
  }
  
  .test-buttons {
    top: 80px;
    right: 15px;
  }
  
  .test-btn {
    font-size: 0.75rem;
    padding: 6px 10px;
    min-width: 140px;
  }
}

/* Rest Areas Section Styles */
.rest-areas-section {
  padding: 2rem;
  flex: 1 1;
  overflow-y: auto;
  background: linear-gradient(135deg, 
    rgba(46, 125, 50, 0.05) 0%, 
    rgba(56, 142, 60, 0.03) 100%
  );
}

.rest-areas-section .section-header {
  margin-bottom: 2rem;
  text-align: center;
}

.rest-areas-section .section-header h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, #2E7D32, #4CAF50);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.rest-areas-section .section-header p {
  color: var(--text-secondary);
  font-size: 1.1rem;
}

.rest-areas-content {
  max-width: 1200px;
  margin: 0 auto;
}

.rest-areas-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-gap: 2rem;
  gap: 2rem;
  margin-bottom: 2rem;
}

.rest-areas-section .info-card {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #4CAF50;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 
    0 8px 32px rgba(46, 125, 50, 0.1),
    0 0 20px rgba(76, 175, 80, 0.05);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.rest-areas-section .info-card h3 {
  color: #2E7D32;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.rest-areas-section .info-card p {
  color: #333;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.rest-areas-section .info-card ul,
.rest-areas-section .info-card ol {
  color: #333;
  line-height: 1.6;
  padding-left: 1.5rem;
}

.rest-areas-section .info-card li {
  margin-bottom: 0.5rem;
}

.rest-areas-section .info-card ul li {
  list-style: none;
  position: relative;
}

.rest-areas-section .info-card ul li::before {
  content: '';
  position: absolute;
  left: -1.5rem;
  top: 0.6rem;
  width: 6px;
  height: 6px;
  background: #4CAF50;
  border-radius: 50%;
}

@media (max-width: 768px) {
  .rest-areas-section {
    padding: 1rem;
  }
  
  .rest-areas-section .section-header h1 {
    font-size: 2rem;
  }
  
  .rest-areas-info {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .rest-areas-section .info-card {
    padding: 1.5rem;
  }
}
/* Clean Route Footer - Essential Info Only */
.route-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(18, 18, 18, 0.98), rgba(18, 18, 18, 0.95));
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-top: 2px solid rgba(255, 215, 0, 0.3);
  padding: 12px 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 50;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}

.footer-info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.footer-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.footer-value {
  font-size: 1.1rem;
  color: #FFD700;
  font-weight: bold;
  text-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .route-footer {
    padding: 10px 12px;
  }
  
  .footer-label {
    font-size: 0.65rem;
  }
  
  .footer-value {
    font-size: 0.95rem;
  }
}

/* Map Drop Zone - Invisible drop area for widgets */
.map-drop-zone {
  position: fixed;
  top: 80px; /* Below top bar */
  left: 0;
  right: 450px; /* Before sidebar */
  bottom: 80px; /* Above footer */
  pointer-events: none; /* Only active during drag */
  z-index: 1;
}

.map-drop-zone.drag-active {
  pointer-events: all;
  background: rgba(59, 130, 246, 0.05);
  border: 2px dashed rgba(59, 130, 246, 0.3);
}

/* 🖱️ KingRoad GPS - Draggable Elements Styles */

/* Estado padrão dos elementos arrastáveis */
.draggable-element {
  cursor: grab;
  transition: all 0.3s ease;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Estado durante long press */
.draggable-element:active {
  cursor: grabbing;
}

/* Modo drag ativo */
.draggable-element.drag-mode-active {
  cursor: grabbing !important;
  z-index: 9998 !important;
  transform: scale(1.05) !important;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(251, 191, 36, 0.6),
    inset 0 0 0 3px rgba(251, 191, 36, 0.8) !important;
  animation: dragPulse 1s ease-in-out infinite;
  filter: brightness(1.1);
}

/* Animação de feedback durante drag */
@keyframes dragPulse {
  0%, 100% {
    box-shadow: 
      0 20px 60px rgba(0, 0, 0, 0.5),
      0 0 30px rgba(251, 191, 36, 0.6),
      inset 0 0 0 3px rgba(251, 191, 36, 0.8);
  }
  50% {
    box-shadow: 
      0 25px 70px rgba(0, 0, 0, 0.6),
      0 0 40px rgba(251, 191, 36, 0.8),
      inset 0 0 0 4px rgba(251, 191, 36, 1);
  }
}

/* Overlay de instruções de drag */
#drag-instructions-overlay {
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.drag-instructions {
  max-width: 400px;
  text-align: center;
  animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.drag-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  animation: dragIconFloat 2s ease-in-out infinite;
}

@keyframes dragIconFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.drag-text h3 {
  color: #fbbf24;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 800;
}

.drag-text p {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

/* Estados hover para elementos arrastáveis */
@media (hover: hover) {
  .draggable-element:hover {
    transform: scale(1.02);
    box-shadow: 
      0 8px 25px rgba(0, 0, 0, 0.2),
      0 0 15px rgba(251, 191, 36, 0.2);
  }
  
  .draggable-element:hover::after {
    content: '🖱️ Pressione e segure por 5s para mover';
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 10000;
    animation: tooltipFadeIn 0.3s ease-out;
    pointer-events: none;
  }
}

@keyframes tooltipFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Feedback visual para long press */
.draggable-element.long-press-active::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 3px solid #fbbf24;
  border-radius: inherit;
  animation: longPressProgress 5s linear;
  z-index: -1;
}

@keyframes longPressProgress {
  from {
    border-color: transparent;
    transform: scale(0.9);
  }
  to {
    border-color: #fbbf24;
    transform: scale(1);
  }
}

/* Estilos específicos para elementos em modo drag */

/* Mile Marker em drag */
.mile-marker-display.drag-mode-active {
  border-color: #fbbf24 !important;
}

/* Botões de teste em drag */
.test-buttons.drag-mode-active {
  background: rgba(251, 191, 36, 0.2) !important;
}

/* Toggle de mapa em drag */
.full-map-toggle-btn.drag-mode-active {
  border-color: #fbbf24 !important;
}

/* Controles de mapa em drag */
.map-controls.drag-mode-active {
  border: 3px solid #fbbf24 !important;
}

/* Footer de navegação em drag */
.navigation-footer.drag-mode-active {
  border-top: 3px solid #fbbf24 !important;
}

/* Truck Stops Widget em drag */
.truck-stops-widget.drag-mode-active {
  border-color: #fbbf24 !important;
}

/* Rest Areas Widget em drag */
.rest-areas-widget.drag-mode-active {
  border-color: #fbbf24 !important;
}

/* Responsividade mobile */
@media (max-width: 768px) {
  .drag-instructions {
    max-width: 90%;
    padding: 1.5rem;
  }
  
  .drag-icon {
    font-size: 2.5rem;
  }
  
  .drag-text h3 {
    font-size: 1.2rem;
  }
  
  .drag-text p {
    font-size: 0.9rem;
  }
  
  .draggable-element:hover::after {
    content: '👆 Toque e segure 5s para mover';
    font-size: 0.7rem;
    bottom: -30px;
  }
}

/* Modo landscape mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .drag-instructions {
    padding: 1rem;
  }
  
  .drag-icon {
    font-size: 2rem;
  }
  
  .drag-text h3 {
    font-size: 1rem;
  }
  
  .drag-text p {
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
  }
}

/* Estados para telas touch */
@media (pointer: coarse) {
  .draggable-element {
    cursor: pointer;
  }
  
  .draggable-element.drag-mode-active {
    cursor: pointer;
  }
}

/* Prevenção de seleção durante drag */
.draggable-element.drag-mode-active * {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Reset button styles */
.drag-reset-button {
  position: fixed;
  top: 20px;
  right: 120px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  z-index: 1600;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  opacity: 0.7;
}

.drag-reset-button:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  opacity: 1;
}

/* Indicador de que elemento pode ser arrastado */
.draggable-element::before {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  background: #fbbf24;
  border-radius: 50%;
  opacity: 0.6;
  z-index: 100;
  animation: dragIndicator 3s ease-in-out infinite;
}

@keyframes dragIndicator {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* Indicador de Modo Drag Ativo */
.drag-mode-indicator {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, 
    rgba(251, 191, 36, 0.95),
    rgba(245, 158, 11, 0.90)
  );
  border: 3px solid #fbbf24;
  border-radius: 20px;
  padding: 1.5rem 2rem;
  z-index: 9997;
  color: #000;
  font-family: Arial, sans-serif;
  text-align: center;
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(251, 191, 36, 0.6);
  animation: dragModeEntrance 0.5s ease-out;
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
}

.drag-mode-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.drag-mode-icon {
  font-size: 2.5rem;
  animation: dragModeIconFloat 2s ease-in-out infinite;
}

.drag-mode-indicator > .drag-mode-text > div:nth-child(2) {
  font-size: 1.2rem;
  font-weight: 800;
  color: #000;
  letter-spacing: 1px;
}

.drag-mode-hint {
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.8);
  font-weight: 600;
}

@keyframes dragModeEntrance {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes dragModeIconFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Responsividade para indicador de drag */
@media (max-width: 768px) {
  .drag-mode-indicator {
    padding: 1rem 1.5rem;
    max-width: 90%;
  }
  
  .drag-mode-icon {
    font-size: 2rem;
  }
  
  .drag-mode-indicator > .drag-mode-text > div:nth-child(2) {
    font-size: 1rem;
  }
  
  .drag-mode-hint {
    font-size: 0.8rem;
  }
}
/* Hide unwanted widgets that user didn't request */

/* Hide navigation status widget (box with "24" in bottom left) */
.navigation-status-widget {
  display: none !important;
}

/* Hide any speed displays */
.speed-display {
  display: none !important;
}

/* Hide any floating panels in bottom left */
.floating-panel-left {
  display: none !important;
}

/* Navigation footer - KEEP VISIBLE (should always show during navigation) */
/* Removed display: none - this should be visible! */

/* REMOVED - These classes are needed! They were hiding the navigation footer incorrectly */
/* The mile marker display will be styled separately below */

/* Bottom bar - KEEP VISIBLE during navigation */
/* Removed display: none - navigation footer should be visible! */

/* Hide all default map control buttons (they're in wrong position) */
.map-controls .map-control-btn {
  display: none !important;
}

.map-controls .units-btn {
  display: none !important;
}

.map-controls .zoom-btn {
  display: none !important;
}

.map-controls .reset-btn {
  display: none !important;
}

/* Hide the entire map-controls div */
.map-controls {
  display: none !important;
}

/* REMOVED - This was hiding the navigation footer incorrectly */
/* Navigation footer should be visible during navigation */

/* Hide any fixed elements in bottom left */
.fixed-bottom-left {
  display: none !important;
}

/* Ensure our custom KM button stays visible */
.units-btn-left {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Mile marker display - REDESIGNED as small draggable button */
.mile-marker-display {
  /* Override default styles to make it small and button-like */
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  /* Small button size */
  width: 80px !important;
  height: 80px !important;
  min-width: 80px !important;
  min-height: 80px !important;
  max-width: 80px !important;
  max-height: 80px !important;
  
  /* Position on left side */
  left: 20px !important;
  bottom: 220px !important;
  
  /* Button styling - TomTom style */
  background: rgba(40, 40, 40, 0.95) !important;
  -webkit-backdrop-filter: blur(10px) !important;
          backdrop-filter: blur(10px) !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  
  /* Remove extra padding */
  padding: 6px !important;
  
  /* Ensure it's draggable */
  cursor: move !important;
  z-index: 100 !important;
  
  /* Remove animations */
  animation: none !important;
}

/* Simplify marker container */
.mile-marker-display .marker-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  width: 100% !important;
  height: 100% !important;
  grid-template-columns: initial !important;
  grid-template-rows: initial !important;
}

/* Hide extra elements - keep only icon, number, and unit */
.mile-marker-display .marker-info {
  display: none !important;
}

.mile-marker-display .marker-location {
  display: none !important;
}

.mile-marker-display .next-milestone {
  display: none !important;
}

/* Hide ONLY the update time inside mile marker button (to keep it compact) */
.mile-marker-display .update-indicator {
  display: none !important;
}

.mile-marker-display .update-time {
  display: none !important;
}

/* But keep time display in navigation footer visible */
.navigation-footer .time-display {
  display: block !important;
}

.navigation-footer .eta-display {
  display: block !important;
}

/* Style the mile marker icon - small */
.mile-marker-display .marker-icon {
  font-size: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  filter: none !important;
  animation: none !important;
  grid-row: unset !important;
}

/* Style the main number display */
.mile-marker-display .marker-main {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  grid-column: unset !important;
  grid-row: unset !important;
}

.mile-marker-display .marker-number {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #fbbf24 !important;
  text-shadow: none !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mile-marker-display .marker-unit {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide KM button in top right (keep only the one in bottom left) */
button[style*="position: absolute"][style*="right: 20px"]:not(.units-btn-left) {
  display: none !important;
}

/* Hide units toggle button in top right */
.units-toggle-button {
  display: none !important;
}

/* Hide Mapbox default controls (zoom, compass) in bottom right corner */
.mapboxgl-ctrl-zoom-in,
.mapboxgl-ctrl-zoom-out,
.mapboxgl-ctrl-compass {
  display: none !important;
}

.mapboxgl-ctrl-group {
  display: none !important;
}

/* Remove any left margin/padding from layout - map should be full width */
.app-container,
.main-area,
.navigation-content,
.main-map-area,
.map-view {
  margin-left: 0 !important;
  padding-left: 0 !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

/* Ensure map container is full width */
.mapboxgl-map,
.map-container {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Force main menu to be completely hidden when closed */
.main-menu:not(.open) {
  left: -400px !important;
  width: 0 !important;
  display: none !important;
}

/* Ensure main-area starts at left edge */
.main-area,
.main-area.full-width {
  margin-left: 0 !important;
  padding-left: 0 !important;
  left: 0 !important;
}