:root {
    /* BUUN REMIX PALETTE */
    --buun-teal: #45C8CE;   /* Main Brand */
    --buun-orange: #FFA434; /* Action/Gamification */
    --buun-purple: #8A48FF; /* Accent */
    --buun-gray: #999999;
    --buun-bg: #EFF1F0;
}

body {
    background-color: var(--buun-bg);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
}

/* OVERRIDE BOOTSTRAP PRIMARY (Teal) */
.bg-primary { background-color: var(--buun-teal) !important; }
.text-primary { color: var(--buun-teal) !important; }
.btn-primary {
    background-color: var(--buun-teal);
    border-color: var(--buun-teal);
    color: white;
}
.btn-primary:hover {
    background-color: #3BB0B6; /* Slightly darker teal */
    border-color: #3BB0B6;
}

/* OVERRIDE BOOTSTRAP SECONDARY (Purple - keeping it premium) */
.bg-secondary { background-color: var(--buun-purple) !important; }
.btn-secondary {
    background-color: var(--buun-purple);
    border-color: var(--buun-purple);
    color: white;
}

/* CUSTOM GAMIFICATION ACTION (Orange) */
.btn-action {
    background-color: var(--buun-orange);
    border-color: var(--buun-orange);
    color: white;
    font-weight: bold;
}
.btn-action:hover {
    background-color: #E58E25; /* Slightly darker orange */
    color: white;
}

/* CARDS & CONTAINERS */
.buun-card {
    border: none;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    background: white;
}

/* LOGO TEXT STYLE */
.brand-text {
    font-weight: 900; /* Made it extra bold */
    color: var(--buun-purple);
    letter-spacing: -1px;
}

/* Phone Number Widget Styling */
.phonenumber-prefix-widget {
    display: flex !important;
    gap: 10px;
}
.phonenumber-prefix-widget select {
    flex: 0 0 auto; /* Keep the flag dropdown tight */
    width: auto !important;
    border-radius: 0.375rem;
    border: 1px solid #dee2e6;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
}
.phonenumber-prefix-widget input {
    flex: 1; /* Let the number input take the rest of the space */
}