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;
}

/* Plain native <form>/<input> styling for the auth pages (login/register/reset/2fa), which
   POST directly to Minimal API endpoints rather than binding through Blazor's circuit — see
   AccountEndpoints.cs for why. */
.wn-auth-field {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    margin-bottom: 16px;
    border: 1px solid rgba(0,0,0,0.23);
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
}

.wn-auth-field:focus {
    outline: none;
    border-color: #128C7E;
    box-shadow: 0 0 0 2px rgba(18,140,126,0.2);
}

.wn-auth-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 6px;
    opacity: 0.8;
}

/* ── Marketing / SaaS polish ──────────────────────────────────────────── */

/* Muted body/subtitle text -- explicitly NOT the brand-green "Secondary" palette color,
   which reads as a broken link when used for paragraph copy. */
.wn-subtitle {
    color: rgba(20, 30, 27, 0.66);
}

/* Soft gradient band behind the homepage hero -- replaces flat gray with something that
   feels like a designed product rather than an unstyled page. */
.wn-hero-band {
    background:
        radial-gradient(ellipse 900px 480px at 50% -10%, rgba(18, 140, 126, 0.14), transparent 60%),
        radial-gradient(ellipse 700px 420px at 85% 10%, rgba(37, 211, 102, 0.10), transparent 55%),
        linear-gradient(180deg, #EEF5F3 0%, #F7F9F8 55%);
    border-bottom: 1px solid rgba(18, 140, 126, 0.08);
}

/* Small pill badges used to list trust signals under the hero CTA row. */
.wn-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.wn-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(18, 140, 126, 0.08);
    color: #0B4F42;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Feature/plan cards: a soft shadow that grows on hover instead of a static thin outline,
   the single biggest thing separating a "wireframe" look from a finished product. */
.wn-feature-card {
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
    border: 1px solid rgba(18, 140, 126, 0.12) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 22, 0.04);
}

.wn-feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(16, 24, 22, 0.10);
    border-color: rgba(18, 140, 126, 0.28) !important;
}

.wn-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(18, 140, 126, 0.14), rgba(37, 211, 102, 0.14));
    margin-bottom: 12px;
}

/* Gradient shell behind centered auth cards (login/register/reset/2fa) so they read as a
   product moment instead of a form floating on empty gray. */
.wn-auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    background:
        radial-gradient(ellipse 700px 420px at 20% 0%, rgba(18, 140, 126, 0.10), transparent 55%),
        radial-gradient(ellipse 700px 420px at 100% 100%, rgba(37, 211, 102, 0.08), transparent 55%);
}

.wn-auth-card {
    border-radius: 16px !important;
    box-shadow: 0 8px 30px rgba(16, 24, 22, 0.08), 0 1px 2px rgba(16, 24, 22, 0.06) !important;
    border: 1px solid rgba(18, 140, 126, 0.10);
}

.wn-auth-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 22px;
    font-weight: 700;
    font-size: 1.15rem;
    color: #0B4F42;
    text-decoration: none;
}

.wn-auth-mark-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, #128C7E, #25D366);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
}

/* ── Portal (authenticated app) polish ───────────────────────────────── */

/* Standard "card" treatment for the plain pa-4/pa-6 Elevation=1 MudPaper blocks used
   throughout the portal -- replaces the flat 1px-shadow default with something that has
   actual depth, matching the marketing site's card language. */
.wn-portal-card {
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(16, 24, 22, 0.06), 0 1px 2px rgba(16, 24, 22, 0.04) !important;
    transition: box-shadow 160ms ease;
}

.wn-portal-card:hover {
    box-shadow: 0 6px 16px rgba(16, 24, 22, 0.08) !important;
}

/* Dashboard stat tiles: colored accent bar + icon instead of a bare number under a green label. */
.wn-stat-card {
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(16, 24, 22, 0.06) !important;
    border-left: 3px solid #128C7E !important;
    position: relative;
}

.wn-stat-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(20, 30, 27, 0.55);
}

/* Billing plan cards */
.wn-plan-card {
    border-radius: 12px !important;
    height: 100%;
}

.wn-plan-card-current {
    border: 2px solid #128C7E !important;
    box-shadow: 0 6px 20px rgba(18, 140, 126, 0.15) !important;
    background: linear-gradient(180deg, rgba(18, 140, 126, 0.04), transparent 40%);
}

/* ── Hero chat mockup ─────────────────────────────────────────────────── */

.wn-phone {
    width: 320px;
    max-width: 88vw;
    margin: 0 auto;
    border-radius: 36px;
    background: #111b18;
    padding: 12px;
    box-shadow: 0 30px 60px -20px rgba(11, 79, 66, 0.35), 0 10px 24px rgba(16, 24, 22, 0.15);
}

.wn-phone-screen {
    border-radius: 26px;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.05) 0, transparent 40%),
        #E9DFD3;
}

.wn-phone-notch {
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wn-phone-notch::before {
    content: "";
    width: 60px;
    height: 6px;
    border-radius: 999px;
    background: #111b18;
}

.wn-phone-header {
    background: #0B4F42;
    color: white;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wn-phone-header-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #128C7E, #25D366);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.wn-phone-header-name {
    font-weight: 700;
    font-size: 0.88rem;
    line-height: 1.2;
}

.wn-phone-header-status {
    font-size: 0.68rem;
    opacity: 0.75;
}

.wn-phone-body {
    padding: 14px 10px 18px;
    min-height: 490px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
}

.wn-bubble {
    max-width: 90%;
    border-radius: 10px;
    padding: 7px 9px;
    font-size: 0.7rem;
    line-height: 1.4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
    animation: wn-bubble-in 480ms ease both;
}

.wn-bubble-preview {
    color: rgba(26, 36, 32, 0.75);
    display: block;
    margin-top: 2px;
}

.wn-bubble-in {
    background: #ffffff;
    color: #1a2420;
    align-self: flex-start;
    border-top-left-radius: 2px;
}

.wn-bubble-out {
    background: #DCF8C6;
    color: #1a2420;
    align-self: flex-end;
    border-top-right-radius: 2px;
}

.wn-bubble b { color: #0B4F42; }

.wn-bubble-buttons {
    display: flex;
    border-top: 1px solid rgba(11, 79, 66, 0.12);
    margin: 8px -10px -8px;
}

.wn-bubble-buttons span {
    flex: 1;
    text-align: center;
    padding: 6px 4px;
    font-size: 0.66rem;
    font-weight: 600;
    color: #128C7E;
    border-right: 1px solid rgba(11, 79, 66, 0.12);
}

.wn-bubble-buttons span:last-child { border-right: none; }

.wn-bubble-buttons span.wn-btn-cancel {
    color: rgba(26, 36, 32, 0.5);
    font-weight: 500;
}

.wn-bubble-time {
    display: block;
    text-align: right;
    font-size: 0.6rem;
    opacity: 0.55;
    margin-top: 2px;
}

.wn-bubble:nth-child(1) { animation-delay: 100ms; }
.wn-bubble:nth-child(2) { animation-delay: 900ms; }
.wn-bubble:nth-child(3) { animation-delay: 1700ms; }
.wn-bubble:nth-child(4) { animation-delay: 2600ms; }
.wn-bubble:nth-child(5) { animation-delay: 3400ms; }
.wn-bubble:nth-child(6) { animation-delay: 4200ms; }

@keyframes wn-bubble-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .wn-bubble { animation: none; }
}

/* WhatsApp's native "list message" -- used to show the bot's menu/inbox exactly as it renders
   after a customer taps the collapsed "Open menu"/"Open inbox" button, since that's the part
   worth showing in a mockup. */
.wn-bubble-list-title {
    font-weight: 700;
    color: #0B4F42;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(11, 79, 66, 0.14);
}

.wn-bubble-list-row {
    display: flex;
    flex-direction: column;
    padding: 6px 0;
    border-bottom: 1px solid rgba(11, 79, 66, 0.08);
}

.wn-bubble-list-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.wn-bubble-list-row-title {
    font-weight: 600;
    color: #1a2420;
}

.wn-bubble-list-row-desc {
    color: rgba(26, 36, 32, 0.58);
    font-size: 0.66rem;
}
/* ── Polish pass (2026-09-21): header, hero alignment, footer contrast, steps, closing CTA ── */
.wn-appbar { background: rgba(255,255,255,0.86) !important; backdrop-filter: blur(10px); border-bottom: 1px solid rgba(20,30,27,0.08); color: #14201c !important; }
.wn-logo { font-weight: 800 !important; letter-spacing: -0.01em; white-space: nowrap; }
.wn-cta-nav { white-space: nowrap; }
.wn-hero-copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.wn-hero-actions { justify-content: center; }
@media (min-width: 960px) {
  .wn-hero-copy { align-items: flex-start; text-align: left; }
  .wn-hero-actions { justify-content: flex-start; }
  .wn-hero-copy .wn-badge-row { justify-content: flex-start; }
}
.wn-footer-link { color: rgba(20,30,27,0.72) !important; font-size: 0.9rem; }
.wn-footer-link:hover { color: #0f7a6d !important; text-decoration: underline; }
.wn-step { text-align: center; padding: 8px 12px; }
.wn-step-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #0f8f7f; color: #fff; font-weight: 800; margin-bottom: 12px; box-shadow: 0 6px 16px rgba(18,140,126,0.28); }
.wn-final-cta { margin-top: 64px; padding: 40px 24px; border-radius: 20px; text-align: center; color: #fff; background: linear-gradient(135deg, #0f8f7f 0%, #0b5f55 100%); box-shadow: 0 16px 40px rgba(15,143,127,0.28); }
.wn-final-cta-btn { background: #fff !important; color: #0b5f55 !important; font-weight: 700 !important; border-radius: 10px !important; padding: 10px 30px !important; }
@media (max-width: 599px) { .wn-appbar .mud-toolbar { padding-left: 12px; padding-right: 12px; } .wn-badge-row { justify-content: center; } }

.wn-mobile-menu { position: relative; margin-left: 10px; }
.wn-mobile-menu summary { list-style: none; cursor: pointer; font-size: 22px; line-height: 1; padding: 6px 8px; border-radius: 8px; user-select: none; }
.wn-mobile-menu summary::-webkit-details-marker { display: none; }
.wn-mobile-menu[open] summary { background: rgba(15,143,127,0.10); }
.wn-mobile-menu nav { position: absolute; right: 0; top: 44px; min-width: 200px; background: #fff; border: 1px solid rgba(20,30,27,0.10); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,0.14); padding: 6px; z-index: 2000; display: flex; flex-direction: column; }
.wn-mobile-menu nav a { padding: 11px 14px; border-radius: 8px; color: #14201c; text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.wn-mobile-menu nav a:hover { background: rgba(15,143,127,0.10); color: #0f7a6d; }

.wn-nav-links { display: none; }
.wn-signin-nav { display: none !important; }
.wn-mobile-menu { display: block; }
@media (min-width: 600px) { .wn-signin-nav { display: inline-flex !important; } }
@media (min-width: 960px) { .wn-nav-links { display: block; } .wn-mobile-menu { display: none; } }

/* ── Portal polish (2026-09-21) ── */
.wn-nav-heading { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(20,30,27,0.45); padding: 16px 16px 4px; }
.wn-setup-card { border: 1px solid rgba(15,143,127,0.30); background: linear-gradient(135deg, rgba(15,143,127,0.07), rgba(255,255,255,1) 60%); border-radius: 16px; }
.wn-check-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid rgba(20,30,27,0.07); flex-wrap: wrap; }
.wn-check { flex: 0 0 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.85rem; background: #fff; border: 2px solid rgba(15,143,127,0.45); color: #0f7a6d; }
.wn-check-row.done .wn-check { background: #0f8f7f; border-color: #0f8f7f; color: #fff; }
.wn-check-row.done .wn-check-text { opacity: 0.6; }
.wn-check-text { flex: 1 1 220px; display: flex; flex-direction: column; }
.wn-check-text span { font-size: 0.85rem; color: rgba(20,30,27,0.66); }
.wn-address { font-size: 1rem; padding: 8px 12px; border-radius: 8px; background: rgba(15,143,127,0.08); word-break: break-all; }
.wn-plan-card { position: relative; height: 100%; display: flex; flex-direction: column; border-radius: 16px !important; }
.wn-plan-features { flex: 1; }
.wn-plan-popular { border: 2px solid #0f8f7f !important; box-shadow: 0 14px 34px rgba(15,143,127,0.22) !important; }
.wn-popular-tag { position: absolute; top: -12px; left: 20px; background: #0f8f7f; color: #fff; font-size: 0.72rem; font-weight: 700; padding: 3px 12px; border-radius: 999px; letter-spacing: 0.03em; }
.wn-secure-note { text-align: center; font-size: 0.85rem; color: rgba(20,30,27,0.6); }

/* ── Portal pages polish (2026-09-21) ── */
.mud-main-content h4.mud-typography-h4 { font-weight: 800; letter-spacing: -0.01em; }
.mud-main-content .mud-table { border-radius: 16px; border: 1px solid rgba(20,30,27,0.08); box-shadow: 0 1px 3px rgba(0,0,0,0.04); overflow: hidden; }
.mud-main-content .mud-table-head .mud-table-cell { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(20,30,27,0.55); background: rgba(15,143,127,0.05); }
.mud-main-content .mud-table-row:hover { background: rgba(15,143,127,0.04); }
.wn-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 36px 16px; color: rgba(20,30,27,0.66); max-width: 460px; margin: 0 auto; }
.wn-empty b { color: #14201c; font-size: 1.02rem; }
.wn-empty-icon { font-size: 2rem; margin-bottom: 4px; }
.wn-balance-card { max-width: 360px; }
.wn-switch-help { display: block; margin: -4px 0 14px 46px; }
.wn-form-row > * { flex: 1 1 200px; }
.wn-form-row > .mud-button-root { flex: 0 0 auto; }
@media (max-width: 599px) { .mud-main-content .mud-container { padding-left: 14px; padding-right: 14px; } .mud-main-content .mud-table-container { overflow-x: auto; } }