@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

/* Variables */
:root {
  --light-blue-100: 199, 84%, 55%;
  --light-blue-500: 202, 83%, 41%;
  --light-blue-900: 204, 96%, 27%;
  --blue-100: 210, 22%, 49%;
  --blue-500: 209, 34%, 30%;
  --blue-900: 209, 61%, 16%;
  --gray-100: 210, 36%, 96%;
  --gray-300: 212, 33%, 89%;
  --gray-500: 210, 31%, 80%;
  --gray-700: 211, 27%, 70%;
  --gray-900: 209, 23%, 60%;
  --white: 0, 0%, 100%;
  --font-family-sans-serif: "Montserrat", sans-serif;
  --space-multiplier: 0.8;
  --content-max-width: 140rem;
  --grid-spacer-width: 1.5rem;
  --grid-column-count: 12;
}

/* Base Styles */
* {
  box-sizing: border-box;
}

body {
  background-color: hsl(var(--gray-100));
  color: hsl(var(--blue-900));
  font-family: var(--font-family-sans-serif);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  line-height: 1.8;
  margin: 3rem;
}

html, body {
    height: 100%!important; /* Ensure the entire height of the viewport is covered */
    width: 100%!important; /* Ensure the entire width of the viewport is covered */
    margin: 0!important; /* Remove default margin */
    padding: 0!important; /* Remove default padding */
}

.modal-bg {
            backdrop-filter: blur(5px);
        }


#ManualGmapCenter {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            padding: 20px;
        }
        #cityInput {
            width: 300px;
            padding: 10px;
            margin-bottom: 10px;
        }
        #map {
            height: 400px;
            width: 100%;
            max-width: 1200px; /* Increased max-width */
        }
        
        #ManualGmap {
            width: -webkit-fill-available;
        }

#locationRequest {

    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    width: 100%;
    height: 100%; /* Set to 100% to cover full viewport height */
    margin: 0 auto; /* Center the div if needed, though with 100% width it's not necessary */
    padding: 2rem;
    border-radius: 0; /* Override any !important that may be affecting this style */

}

#ManualGmapCenter {

    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    width: 100%;
    /*height: 100%; /* Set to 100% to cover full viewport height */
    margin: 0 auto; /* Center the div if needed, though with 100% width it's not necessary */
    padding: 2rem;
    border-radius: 0; /* Override any !important that may be affecting this style */
   

}

#feedbackFormCenter {

    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    width: 100%;
    /*height: 100%; /* Set to 100% to cover full viewport height */
    margin: 0 auto; /* Center the div if needed, though with 100% width it's not necessary */
    padding: 2rem;
    border-radius: 0; /* Override any !important that may be affecting this style */

}


.loadPart {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
    font-family: Arial, sans-serif;
    width: 100%;
    height: 100%; /* Set to 100% to cover full viewport height */
    margin: 0 auto; /* Center the div if needed, though with 100% width it's not necessary */
    padding: 2rem;
    border-radius: 0; /* Override any !important that may be affecting this style */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

        .scene {
            position: relative;
            width: 300px;
            height: 450px;
        }

        .lightbulb {
            position: absolute;
            width: 200px;
            height: 280px;
            background: radial-gradient(ellipse at center, #ffffa1 0%, #ffd700 70%);
            border-radius: 100px 100px 60px 60px;
            bottom: 40px;
            left: 50px;
            overflow: hidden;
            animation: glow 3s infinite alternate;
        }

        .filament {
            position: absolute;
            width: 4px;
            height: 60px;
            background-color: #ff9900;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 10px #ff9900;
        }

        .filament::before, .filament::after {
            content: '';
            position: absolute;
            width: 30px;
            height: 4px;
            background-color: #ff9900;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0 0 10px #ff9900;
        }

        .filament::after {
            top: auto;
            bottom: 0;
        }

        .base {
            position: absolute;
            width: 80px;
            height: 40px;
            background: linear-gradient(to bottom, #c0c0c0, #808080);
            bottom: 0;
            left: 110px;
            border-radius: 0 0 10px 10px;
        }

        .person {
            position: absolute;
            bottom: 70px;
            left: 130px;
            z-index: 2;
        }

        .person-body {
            width: 40px;
            height: 100px;
            background-color: #2c3e50;
            position: relative;
        }

        .person-head {
            width: 40px;
            height: 40px;
            background-color: #f4a460;
            border-radius: 50%;
            position: absolute;
            top: -40px;
        }

        .person-arm {
            width: 60px;
            height: 6px;
            background-color: #2c3e50;
            position: absolute;
            top: 20px;
        }

        .person-arm-left {
            left: -55px;
            transform-origin: right;
            animation: wave 2s infinite alternate;
        }

        .person-arm-right {
            right: -55px;
            transform-origin: left;
            animation: wave 2s infinite alternate-reverse;
        }

        .bag {
            position: absolute;
            width: 30px;
            height: 35px;
            background-color: #8b4513;
            bottom: -10px;
            left: -35px;
            border-radius: 5px;
            box-shadow: -2px 2px 5px rgba(0,0,0,0.3);
        }

        .rays {
            position: absolute;
            top: 93px;
            left: 125px;
        }

        .ray {
            position: absolute;
            height: 3px;
            width: 60px;
            background: linear-gradient(to right, rgba(255,69,0,1), rgba(255,69,0,0));
            animation: shoot 2s infinite;
        }

        @keyframes glow {
            0% { box-shadow: 0 0 20px 10px rgba(255, 215, 0, 0.7); }
            100% { box-shadow: 0 0 40px 20px rgba(255, 215, 0, 0.9); }
        }

        @keyframes wave {
            0% { transform: rotate(-30deg); }
            100% { transform: rotate(30deg); }
        }

        @keyframes shoot {
            0% { transform: scale(0.5); opacity: 1; }
            100% { transform: scale(1.5); opacity: 0; }
        }

        .particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .particle {
            position: absolute;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            animation: float 5s infinite linear;
        }

        @keyframes float {
            0% { transform: translateY(0) rotate(0deg); }
            100% { transform: translateY(-400px) rotate(360deg); }
        }
        
        .infoLoad {
            color:white!important;
        }

h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* Form Styles */
.form-container {
  max-width: 600px;
  margin: 0 auto;
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card2 {
  overflow: hidden;
  position: relative;
  text-align: left;
  
  max-width: 290px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  background-color: #fff;
}

.actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.app-store, .play-store {
  display: inline-flex;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-radius: 0px!important;
  border: none;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: background-color 0.3s ease;
  color: white!important;
}

.app-store {
  background-color: #1aa06d;
  color: #ffffff;
}

.app-store:hover {
  background-color: #158f5f;
}

.play-store {
  color: #242525!important;
  border: 1px solid #D1D5DB;
  background-color: #fff;
}

.play-store:hover {
  background-color: #f3f4f6;
}

.app-store i, .play-store i {
  margin-right: 0.5rem;
}

.dismiss2 {
  position: absolute;
  right: 10px;
  top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  background-color: #fff;
  color: black;
  border: 2px solid #D1D5DB;
  font-size: 1rem;
  font-weight: 300;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  transition: .3s ease;
}

.dismiss2:hover {
  background-color: #ee0d0d;
  border: 2px solid #ee0d0d;
  color: #fff;
}

.header2 {
  padding: 1.25rem 1rem 1rem 1rem;
}

.image2 {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  background-color: #e2feee;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  animation: animate .6s linear alternate-reverse infinite;
  transition: .6s ease;
}

.image2 svg {
  color: #0afa2a;
  width: 2rem;
  height: 2rem;
}

.content2 {
  margin-top: 0.75rem;
  text-align: center;
}

.title2 {
  color: #066e29;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
}

.content2 {
    min-height: max-content;
}

.message2 {
  margin-top: 0.5rem;
  color: #595b5f;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.actions2 {
  margin: 0.75rem 1rem;
}

.history2 {
  display: inline-flex;
  padding: 0.5rem 1rem;
  background-color: #1aa06d;
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  justify-content: center;
  width: 100%;
  border-radius: 0.375rem;
  border: none;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.track2 {
  display: inline-flex;
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  color: #242525;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  justify-content: center;
  width: 100%;
  border-radius: 0.375rem;
  border: 1px solid #D1D5DB;
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

@keyframes animate {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.09);
  }
}

label {
  display: block;
  margin: 1rem 0 0.5rem;
  font-weight: 600;
}

input[type="text"],
textarea,
select {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid hsl(var(--gray-500));
  border-radius: 4px;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

button {
  background-color: hsl(var(--blue-900));
  color: hsl(var(--white));
  border: none;
  border-radius: 4px;
  padding: 1rem 2rem;
  font-size: 1.6rem;
  cursor: pointer;
}

button:hover {
  background-color: hsl(var(--light-blue-900));
}

.hidden {
  display: none!important;
}