html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
    background-color: #FEF7FF;
    font-family: 'Inter', sans-serif;
    color: black;
}

@media (prefers-color-scheme: dark) {
  html, body {
    background-color: #151218; /* Dark mode background */
    color: white; /* Dark mode text color */
  }

  input::placeholder {
    color: #ffffff; /* Sets the placeholder text color to red */
    opacity: 0.3;    /* Ensures full opacity, especially for Firefox */
  }
}

#iframe {
    width: 100%;
}

#Sheet {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50px;
    background-color: white;
}

#ComposeTarget {
    width: 100%;
    height: 100%;
}

#ComposeViewport {
    width: 100%;
    height: 100%;
}

#ComposeTarget:focus {
outline:none !important;
}
#ComposeViewport:focus {
outline:none !important;
}

canvas:focus {
outline:none !important;
}

input::placeholder {
    color: #ffffff;
    opacity: 0.5;
}

#email-input:-webkit-autofill,
#email-input:-webkit-autofill:hover,
#email-input:-webkit-autofill:focus,
#email-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: #ffffff !important; /* Optional: change text color */
}

#map {
    height: 100%;
    width: 100%;
}
/* --- Marker Styles --- */
        .gig-marker {
            position: relative;
            display: flex;
            align-items: center;
            cursor: pointer;
            z-index: 10;
        }

        /* --- The Dot --- */
        .dot {
            width: 16px;
            height: 16px;
            background-color: #A78BFA;
            border-radius: 50%;
            border: 2px solid #fff;
            box-shadow: 0 0 10px #A78BFA, 0 0 20px rgba(167, 139, 250, 0.5);
            z-index: 12;
            animation: pulse 2.5s infinite cubic-bezier(0.66, 0, 0, 1);
        }

        /* --- Pulsating Animation --- */
        @keyframes pulse {
            0%, 100% {
                transform: scale(0.8);
                box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.7);
            }
            50% {
                transform: scale(1);
                box-shadow: 0 0 0 10px rgba(167, 139, 250, 0);
            }
        }

        /* --- Text Label --- */
        .label {
            margin-left: 10px;
            padding: 6px 12px;
            background-color: rgba(26, 32, 44, 0.9); /* Dark, slightly transparent background */
            color: #000000;
            border: 1px solid #4A5568;
            border-radius: 6px;
            font-size: 0.3rem;
            font-weight: 600;
            white-space: nowrap;
            box-shadow: 0 4px 15px rgba(0,0,0,0.4);
            transition: all 0.2s ease-in-out;
        }

        .gig-marker:hover .label {
            background-color: #1A202C;
            color: #fff;
            transform: translateY(-2px);
        }