html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* =====================================================================
   ChainxToken brand layer
   Applied on top of the Tailwind utilities so the existing markup keeps
   its layout. The system is blue and white: a white canvas with cool
   slate neutrals, a single blue action colour, and real status hues.
   Dark mode is a deep navy with the same blue accent lifted one step.
   ===================================================================== */

/* Theme tokens. Values are space-separated RGB so Tailwind opacity modifiers
   (bg-brand-500/10) keep working. Light: white canvas, blue-600 action.
   Dark: navy canvas, blue-500 action. */
:root {
    --canvas: #f8fafc;
    --fg: #0f172a;
    --on-brand: #ffffff;
    --hairline: #e2e8f0;
    --brand-50: 239 246 255;  --brand-100: 219 234 254; --brand-200: 191 219 254; --brand-300: 147 197 253;
    --brand-400: 96 165 250;  --brand-500: 37 99 235;   --brand-600: 29 78 216;   --brand-700: 30 64 175;
    --brand-800: 30 58 138;   --brand-900: 23 37 84;
    --emerald-50: 236 253 245; --emerald-100: 209 250 229; --emerald-200: 167 243 208; --emerald-300: 110 231 183;
    --emerald-400: 52 211 153; --emerald-500: 16 185 129;  --emerald-600: 5 150 105;   --emerald-700: 4 120 87;
    --emerald-800: 6 95 70;    --emerald-900: 6 78 59;
    --rose-50: 255 241 242;   --rose-100: 255 228 230;  --rose-200: 254 205 211;  --rose-300: 253 164 175;
    --rose-400: 251 113 133;  --rose-500: 244 63 94;    --rose-600: 225 29 72;    --rose-700: 190 18 60;
    --rose-800: 159 18 57;    --rose-900: 136 19 55;
    --amber-50: 255 251 235;  --amber-100: 254 243 199; --amber-200: 253 230 138; --amber-300: 252 211 77;
    --amber-400: 251 191 36;  --amber-500: 245 158 11;  --amber-600: 217 119 6;   --amber-700: 180 83 9;
    --amber-800: 146 64 14;   --amber-900: 120 53 15;
    --sky-50: 240 249 255;    --sky-100: 224 242 254;   --sky-200: 186 230 253;   --sky-300: 125 211 252;
    --sky-400: 56 189 248;    --sky-500: 14 165 233;    --sky-600: 2 132 199;     --sky-700: 3 105 161;
    --sky-800: 7 89 133;      --sky-900: 12 74 110;
}
.dark {
    --canvas: #020617;
    --fg: #f1f5f9;
    --on-brand: #ffffff;
    --hairline: #1e293b;
    --brand-50: 23 37 84;     --brand-100: 30 58 138;   --brand-200: 30 64 175;   --brand-300: 59 130 246;
    --brand-400: 96 165 250;  --brand-500: 59 130 246;  --brand-600: 37 99 235;   --brand-700: 147 197 253;
    --brand-800: 191 219 254; --brand-900: 219 234 254;
    --emerald-50: 6 78 59;     --emerald-100: 6 95 70;     --emerald-200: 4 120 87;    --emerald-300: 52 211 153;
    --emerald-400: 52 211 153; --emerald-500: 16 185 129;  --emerald-600: 5 150 105;   --emerald-700: 110 231 183;
    --emerald-800: 167 243 208; --emerald-900: 209 250 229;
    --rose-50: 136 19 55;     --rose-100: 159 18 57;    --rose-200: 190 18 60;    --rose-300: 251 113 133;
    --rose-400: 251 113 133;  --rose-500: 244 63 94;    --rose-600: 225 29 72;    --rose-700: 253 164 175;
    --rose-800: 254 205 211;  --rose-900: 255 228 230;
    --amber-50: 120 53 15;    --amber-100: 146 64 14;   --amber-200: 180 83 9;    --amber-300: 251 191 36;
    --amber-400: 251 191 36;  --amber-500: 245 158 11;  --amber-600: 217 119 6;   --amber-700: 252 211 77;
    --amber-800: 253 230 138; --amber-900: 254 243 199;
    --sky-50: 12 74 110;      --sky-100: 7 89 133;      --sky-200: 3 105 161;     --sky-300: 56 189 248;
    --sky-400: 56 189 248;    --sky-500: 14 165 233;    --sky-600: 2 132 199;     --sky-700: 125 211 252;
    --sky-800: 186 230 253;   --sky-900: 224 242 254;
}

html, body {
    background: var(--canvas);
    color: var(--fg);
    color-scheme: light;
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-feature-settings: "ss01" on, "cv11" on;
}
.dark, .dark body { color-scheme: dark; }

/* Weight discipline: nothing heavier than 500, headlines whisper at 300. */
.font-semibold, .font-bold, .font-extrabold, .font-black { font-weight: 500 !important; }
.text-3xl, .text-4xl, .text-5xl, .text-6xl { font-weight: 300 !important; letter-spacing: -0.025em; }
.text-4xl, .text-5xl, .text-6xl { letter-spacing: -0.05em; }

/* Labels do the work colour would otherwise do. */
.uppercase { letter-spacing: 0.05em; }
.text-\[10px\].uppercase, .text-xs.uppercase { letter-spacing: 0.08em; }

/* Shapes: controls are pills, inputs softly rounded (6px), everything else 10px. */
/* rounded-2xl marks a card, never a pill, even when the card is a <button> or <a>. */
button.rounded-xl:not(.text-left), button.rounded-lg,
a.rounded-xl:not(.block):not(.flex-col), [role="button"].rounded-xl,
.rounded-full { border-radius: 9999px !important; }
button.rounded-2xl, a.rounded-2xl { border-radius: 10px !important; }
input.rounded-xl, input.rounded-lg, input.rounded-2xl,
select.rounded-xl, select.rounded-lg, textarea.rounded-xl, textarea.rounded-lg { border-radius: 6px !important; }

/* Elevation is tonal. The only shadows: the primary button, and floating surfaces. */
.shadow, .shadow-sm, .shadow-md, .shadow-2xl { box-shadow: none !important; }
button.bg-brand-500, a.bg-brand-500 { box-shadow: rgba(37, 99, 235, 0.25) 0px 4px 16px 0px; }
.dark button.bg-brand-500, .dark a.bg-brand-500 { box-shadow: rgba(59, 130, 246, 0.35) 0px 6px 24px 0px; }

/* Accent and status fills always carry white ink, even where the markup says text-black. */
.bg-brand-400, .bg-brand-500, .bg-brand-600, .bg-emerald-500, .bg-emerald-600,
.bg-rose-500, .bg-rose-600, .bg-rose-700, .bg-amber-500, .bg-amber-600,
.bg-brand-400 .text-white, .bg-brand-500 .text-white, .bg-brand-600 .text-white,
.bg-emerald-500 .text-white, .bg-emerald-600 .text-white,
.bg-rose-500 .text-white, .bg-rose-600 .text-white, .bg-rose-700 .text-white,
.bg-amber-500 .text-white, .bg-amber-600 .text-white { color: var(--on-brand) !important; }

/* Hairlines never go pure white. */
.border-white { border-color: var(--hairline) !important; }

/* Motion: weighted slow-out, never springy. */
.transition, .transition-all, .transition-colors, .transition-opacity, .transition-transform {
    transition-timing-function: cubic-bezier(0.625, 0.05, 0, 1);
    transition-duration: 250ms;
}

/* Legacy Bootstrap leftovers above should not leak colour into the system. */
a, .btn-link { color: inherit; }
.validation-message, .invalid { color: rgb(var(--rose-600)); outline-color: rgb(var(--rose-400)); }
.valid.modified:not([type=checkbox]) { outline-color: rgb(var(--brand-500)); }

/* Live chat: the Smartsupp bubble is hidden until the Support page opens it. */
#smartsupp-widget-container, #chat-application { display: none !important; }
body.chat-visible #smartsupp-widget-container, body.chat-visible #chat-application { display: block !important; }