:root {
    --font-body: 'Roboto', sans-serif;
    --font-heading: 'Montserrat', sans-serif;
}

body {
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--font-heading);
}

h1 { font-weight: 900; }
h2, h3 { font-weight: 700; }

.btn {
    color: #ffffff;
    transition: all 0.2s ease-in-out;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary {
    background-color: #FF0099;
    clip-path: polygon(5% 0, 100% 0, 100% 70%, 95% 100%, 0 100%, 0 30%);
    border-radius: 0;
    box-shadow: 0 0 15px rgba(255, 0, 153, 0.2);
}

.btn-primary:hover {
    background-color: #cc007a;
    transform: scale(1.02);
}

.btn-secondary {
    background-color: #2E7D32;
    border-radius: 0.375rem;
}

.btn-secondary:hover {
    background-color: #1B5E20;
    transform: scale(1.02);
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    color: #ffffff;
    border-radius: 0.5rem;
    transition: all 0.2s ease-in-out;
}

.btn-icon:hover {
    transform: scale(1.05);
}

.hover\:bg-\[\#004d2c\]:hover { 
    background-color: #cc007a !important; 
}

.hover\:bg-\[\#e67300\]:hover { 
    background-color: #1B5E20 !important; 
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select {
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.hidden {
    display: none !important;
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

:-webkit-full-screen #liveMapContainer,
:-moz-full-screen #liveMapContainer,
:fullscreen #liveMapContainer {
    max-height: 100vh;
    max-width: 100vw;
    background-color: #000;
}