/* _content/ChasePaymentech/Components/Pages/ForgotPassword.razor.rz.scp.css */
:global(html, body)[b-f4m5r7gzzl] {
    height: 100%;
    margin: 0;
}

:global(body)[b-f4m5r7gzzl] {
    /* Subtle background gradient */
    background-color: #f4f7f6;
    background-image: radial-gradient(1200px 600px at 10% -10%, #ecf1f8 0%, rgba(236,241,248,0) 60%),
                      radial-gradient(1000px 500px at 110% 10%, #e8eef7 0%, rgba(232,238,247,0) 60%);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Brand color used by logo; adjust this to match your exact logo blue */
:global(:root)[b-f4m5r7gzzl] {
    --brand-blue: #02255b;
    --brand-blue-2: #1e4b8f;
    --card-bg: rgba(255, 255, 255, 0.88);
    --card-border: rgba(2, 37, 91, 0.08);
}

.page-wrap[b-f4m5r7gzzl] {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    overflow: hidden; /* clip decorative ::before to avoid scrollbars */
}

/* Decorative soft blob behind the card */
.page-wrap[b-f4m5r7gzzl]::before {
    content: "";
    position: absolute;
    inset: auto -120px 10% auto;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle at 30% 30%, rgba(2, 37, 91, 0.18), rgba(2, 37, 91, 0) 60%);
    filter: blur(20px);
    pointer-events: none;
}

.payment-container[b-f4m5r7gzzl] {
    max-width: 480px; /* match login page width */
    margin: 0 1rem;
    padding: 2rem;
    background: var(--card-bg);
    border-radius: 16px;
    border: 1px solid var(--card-border);
    box-shadow: 0 10px 30px rgba(2, 37, 91, 0.08), 0 2px 8px rgba(2, 37, 91, 0.05);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    text-align: center;
    animation: card-in-b-f4m5r7gzzl 320ms ease-out both;
}

.logo[b-f4m5r7gzzl] {
    max-width: 260px;
    height: auto;
    margin-bottom: 1.25rem;
}

.payment-container h1[b-f4m5r7gzzl] { color: var(--brand-blue); margin-bottom: 0.75rem; font-weight: 700; letter-spacing: -0.3px; }
.payment-container h1[b-f4m5r7gzzl]::after {
    content: "";
    display: block;
    width: 72px;
    height: 3px;
    margin: 0.5rem auto 0;
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue-2));
    border-radius: 2px;
}

.payment-container p[b-f4m5r7gzzl] { color: #4b5563; margin-bottom: 1.75rem; font-size: 1.05rem; line-height: 1.6; overflow-wrap: anywhere; }

[b-f4m5r7gzzl] .k-form {
    text-align: left;
}

[b-f4m5r7gzzl] .k-form-item { margin-bottom: 1.1rem; }

.payment-container[b-f4m5r7gzzl]  .k-form-buttons { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 2rem; }

/* Ensure visible base state even when not inside Telerik wrappers */
.payment-container .checkout-btn.k-button[b-f4m5r7gzzl],
.payment-container .k-button.k-button-solid.k-button-solid-primary[b-f4m5r7gzzl],
.payment-container .k-button.k-button-solid-primary[b-f4m5r7gzzl],
.payment-container .k-button.k-button-solid.k-primary[b-f4m5r7gzzl],
.payment-container button[type="submit"].k-button[b-f4m5r7gzzl],
.payment-container[b-f4m5r7gzzl]  .checkout-btn.k-button,
.payment-container[b-f4m5r7gzzl]  .k-button.k-button-solid.k-button-solid-primary,
.payment-container[b-f4m5r7gzzl]  .k-button.k-button-solid-primary,
.payment-container[b-f4m5r7gzzl]  .k-button.k-button-solid.k-primary,
.payment-container[b-f4m5r7gzzl]  .k-form-buttons button[type="submit"].k-button {
    background-color: #1761d1 !important;
    background-image: none !important;
    border-color: var(--brand-blue) !important;
    color: #fff !important;
    font-size: 1.05rem;
    padding: 0.95rem 1.25rem;
    min-height: 48px;
    border-radius: 10px;
    transition: background-color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
    padding: 5px 40px 5px 40px;
    margin-top: 20px;
}

.payment-container[b-f4m5r7gzzl]  .checkout-btn.k-button:disabled,
.payment-container[b-f4m5r7gzzl]  .k-button.k-button-solid.k-button-solid-primary:disabled,
.payment-container[b-f4m5r7gzzl]  .k-button.k-button-solid-primary:disabled,
.payment-container[b-f4m5r7gzzl]  .k-button.k-button-solid.k-primary:disabled,
.payment-container[b-f4m5r7gzzl]  .k-form-buttons button[type="submit"].k-button:disabled {
    background-color: #a0a0a0 !important;
    border-color: #a0a0a0 !important;
    opacity: 0.7;
}

.payment-container .checkout-btn.k-button:hover:not(:disabled)[b-f4m5r7gzzl],
.payment-container .k-button.k-button-solid.k-button-solid-primary:hover:not(:disabled)[b-f4m5r7gzzl],
.payment-container .k-button.k-button-solid-primary:hover:not(:disabled)[b-f4m5r7gzzl],
.payment-container .k-button.k-button-solid.k-primary:hover:not(:disabled)[b-f4m5r7gzzl],
.payment-container button[type="submit"].k-button:hover:not(:disabled)[b-f4m5r7gzzl],
.payment-container[b-f4m5r7gzzl]  .checkout-btn.k-button:hover:not(:disabled),
.payment-container[b-f4m5r7gzzl]  .k-button.k-button-solid.k-button-solid-primary:hover:not(:disabled),
.payment-container[b-f4m5r7gzzl]  .k-button.k-button-solid-primary:hover:not(:disabled),
.payment-container[b-f4m5r7gzzl]  .k-button.k-button-solid.k-primary:hover:not(:disabled),
.payment-container[b-f4m5r7gzzl]  .k-form-buttons button[type="submit"].k-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(2, 37, 91, 0.18);
    background-color: #073377 !important;
}

.payment-container[b-f4m5r7gzzl]  .k-form-buttons button[type="submit"].k-button:not(:disabled) {
    padding: 5px 40px 5px 40px;
    box-shadow: 0 10px 20px rgba(2, 37, 91, 0.18);
    background-color: #1761d1 !important;
}

.payment-container[b-f4m5r7gzzl]  .checkout-btn.k-button:active:not(:disabled),
.payment-container[b-f4m5r7gzzl]  .k-button.k-button-solid.k-button-solid-primary:active:not(:disabled),
.payment-container[b-f4m5r7gzzl]  .k-button.k-button-solid-primary:active:not(:disabled),
.payment-container[b-f4m5r7gzzl]  .k-button.k-button-solid.k-primary:active:not(:disabled),
.payment-container[b-f4m5r7gzzl]  .k-form-buttons button[type="submit"].k-button:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(2, 37, 91, 0.12);
}

.payment-container[b-f4m5r7gzzl]  .checkout-btn.k-button:focus-visible,
.payment-container[b-f4m5r7gzzl]  .k-button.k-button-solid.k-button-solid-primary:focus-visible,
.payment-container[b-f4m5r7gzzl]  .k-button.k-button-solid-primary:focus-visible,
.payment-container[b-f4m5r7gzzl]  .k-button.k-button-solid.k-primary:focus-visible,
.payment-container[b-f4m5r7gzzl]  .k-form-buttons button[type="submit"].k-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(2, 37, 91, 0.28);
}

/* Make Telerik inputs naturally full-width */
.payment-container[b-f4m5r7gzzl]  .k-input,
.payment-container[b-f4m5r7gzzl]  .k-numerictextbox,
.payment-container[b-f4m5r7gzzl]  .k-textarea,
.payment-container[b-f4m5r7gzzl]  .k-textbox,
.payment-container[b-f4m5r7gzzl]  .k-combobox,
.payment-container[b-f4m5r7gzzl]  .k-dropdownlist { width: 100%; }

/* Safety net: enforce a solid background for any Telerik button inside this page */
.payment-container button.k-button[b-f4m5r7gzzl],
.payment-container[b-f4m5r7gzzl]  button.k-button {
    background-color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    color: #fff !important;
}

/* Guaranteed visual background even if theme keeps button transparent */
.payment-container button.k-button[b-f4m5r7gzzl],
.payment-container[b-f4m5r7gzzl]  button.k-button {
    position: relative;
    isolation: isolate; /* ensure pseudo-element stays behind content */
}
.payment-container button.k-button[b-f4m5r7gzzl]::before,
.payment-container[b-f4m5r7gzzl]  button.k-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--brand-blue);
    border-radius: inherit;
    z-index: 0;
}
.payment-container button.k-button > *[b-f4m5r7gzzl],
.payment_container[b-f4m5r7gzzl]  button.k-button > * {
    position: relative;
    z-index: 1;
}

/* Input aesthetics and focus state */
.payment-container[b-f4m5r7gzzl]  .k-input,
.payment-container[b-f4m5r7gzzl]  .k-textbox,
.payment-container[b-f4m5r7gzzl]  .k-textarea,
.payment-container[b-f4m5r7gzzl]  .k-numerictextbox,
.payment-container[b-f4m5r7gzzl]  .k-dropdownlist,
.payment-container[b-f4m5r7gzzl]  .k-combobox {
    border-radius: 10px;
    background-color: #fafcff;
    border: 1px solid #cfd8e3; /* unify neutral border to avoid black default */
    transition: box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

/* Ensure the plain ZIP input matches the Telerik inputs */
.payment-container #postalInput[b-f4m5r7gzzl] {
    border-radius: 10px;
    background-color: #fafcff;
    border: 1px solid #cfd8e3;
    width: 100%;
    padding: 8px 10px; /* align with .k-input-inner padding */
}
.payment-container #postalInput:focus[b-f4m5r7gzzl] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(2, 37, 91, 0.18);
    border-color: rgba(2, 37, 91, 0.45);
    background-color: #fff;
}

/* Make textboxes a little taller */
.payment-container[b-f4m5r7gzzl]  .k-input,
.payment-container[b-f4m5r7gzzl]  .k-textbox,
.payment-container[b-f4m5r7gzzl]  .k-numerictextbox,
.payment-container[b-f4m5r7gzzl]  .k-dropdownlist,
.payment-container[b-f4m5r7gzzl]  .k-combobox {
    min-height: 44px;
}

/* Add inner vertical padding for consistent feel across inputs */
.payment-container[b-f4m5r7gzzl]  .k-input-inner {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Ensure textarea has comfortable padding without forcing height */
.payment-container[b-f4m5r7gzzl]  .k-textarea .k-input-inner,
.payment-container[b-f4m5r7gzzl]  .k-textarea textarea {
    padding-top: 10px;
    padding-bottom: 10px;
}
.payment-container[b-f4m5r7gzzl]  .k-input:focus,
.payment-container[b-f4m5r7gzzl]  .k-textbox:focus,
.payment-container[b-f4m5r7gzzl]  .k-textarea:focus,
.payment-container[b-f4m5r7gzzl]  .k-numerictextbox.k-focus,
.payment-container[b-f4m5r7gzzl]  .k-dropdownlist.k-focus,
.payment-container[b-f4m5r7gzzl]  .k-combobox.k-focus {
    box-shadow: 0 0 0 3px rgba(2, 37, 91, 0.18);
    border-color: rgba(2, 37, 91, 0.45);
    background-color: #fff;
}

/* Make templated validation messages match the smaller, italic style */
.payment-container[b-f4m5r7gzzl]  .validation-message {
    font-size: 0.85rem;
    font-style: italic;
    color: #e50000; /* keep consistent error color */
    margin-top: 0.25rem;
    display: block;
}

/* Numeric fields error text: 1pt smaller than base */
.payment-container .numeric-validation[b-f4m5r7gzzl]  .validation-message {
    font-size: 0.77rem; /* ~1pt smaller than 0.85rem base (approx 1.3px less) */
}

@media (prefers-reduced-motion: reduce) {
    .payment-container[b-f4m5r7gzzl] { animation: none; }
    .payment-container[b-f4m5r7gzzl]  .k-button-solid-primary { transition: none; }
}

@media (max-width: 767px) {
    .page-wrap[b-f4m5r7gzzl] {
        padding: 0;
        min-height: auto;
        align-items: stretch;
    }
    .page-wrap[b-f4m5r7gzzl]::before { display: none; }
    .payment-container[b-f4m5r7gzzl] { margin: 0; padding: 1rem 1rem 1.25rem; box-shadow: none; border-radius: 0; background-color: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .logo[b-f4m5r7gzzl] { max-width: 220px; height: auto; margin-bottom: 1rem; }
    .payment-container h1[b-f4m5r7gzzl] { font-size: 1.5rem; }
    .payment-container p[b-f4m5r7gzzl] { font-size: 1rem; margin-bottom: 1.25rem; }
    [b-f4m5r7gzzl] .k-form-item { margin-bottom: 1rem; }
    .payment-container[b-f4m5r7gzzl]  input,
    .payment-container[b-f4m5r7gzzl]  textarea { font-size: 16px; }
    .payment-container[b-f4m5r7gzzl]  .k-form-buttons .checkout-btn.k-button { width: 100%; }
    :global(body)[b-f4m5r7gzzl] { background-color: #ffffff; background-image: none; overflow-x: hidden; }
    .page-wrap[b-f4m5r7gzzl] { padding-top: max(0.5rem, env(safe-area-inset-top)); padding-bottom: max(0.5rem, env(safe-area-inset-bottom)); }
}

@keyframes card-in-b-f4m5r7gzzl {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
/* _content/ChasePaymentech/Components/Pages/Login.razor.rz.scp.css */
:global(html, body)[b-3y4gvyponi] {
    height: 100%;
    margin: 0;
}

:global(body)[b-3y4gvyponi] {
    /* Subtle background gradient */
    background-color: #f4f7f6;
    background-image: radial-gradient(1200px 600px at 10% -10%, #ecf1f8 0%, rgba(236,241,248,0) 60%),
                      radial-gradient(1000px 500px at 110% 10%, #e8eef7 0%, rgba(232,238,247,0) 60%);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Brand color used by logo; adjust this to match your exact logo blue */
:global(:root)[b-3y4gvyponi] {
    --brand-blue: #02255b;
    --brand-blue-2: #1e4b8f;
    --card-bg: rgba(255, 255, 255, 0.88);
    --card-border: rgba(2, 37, 91, 0.08);
}

.page-wrap[b-3y4gvyponi] {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    overflow: hidden; /* clip decorative ::before to avoid scrollbars */
}

/* Decorative soft blob behind the card */
.page-wrap[b-3y4gvyponi]::before {
    content: "";
    position: absolute;
    inset: auto -120px 10% auto;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle at 30% 30%, rgba(2, 37, 91, 0.18), rgba(2, 37, 91, 0) 60%);
    filter: blur(20px);
    pointer-events: none;
}

.payment-container[b-3y4gvyponi] {
    max-width: 600px;
    margin: 0 1rem;
    padding: 2rem;
    background: var(--card-bg);
    border-radius: 16px;
    border: 1px solid var(--card-border);
    box-shadow: 0 10px 30px rgba(2, 37, 91, 0.08), 0 2px 8px rgba(2, 37, 91, 0.05);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    text-align: center;
    animation: card-in-b-3y4gvyponi 320ms ease-out both;
}

.logo[b-3y4gvyponi] {
    max-width: 260px;
    height: auto;
    margin-bottom: 1.25rem;
}

.payment-container h1[b-3y4gvyponi] { color: var(--brand-blue); margin-bottom: 0.75rem; font-weight: 700; letter-spacing: -0.3px; }
.payment-container h1[b-3y4gvyponi]::after {
    content: "";
    display: block;
    width: 72px;
    height: 3px;
    margin: 0.5rem auto 0;
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue-2));
    border-radius: 2px;
}

.payment-container p[b-3y4gvyponi] { color: #4b5563; margin-bottom: 1.75rem; font-size: 1.05rem; line-height: 1.6; overflow-wrap: anywhere; }

[b-3y4gvyponi] .k-form {
    text-align: left;
}

[b-3y4gvyponi] .k-form-item { margin-bottom: 1.1rem; }

.payment-container[b-3y4gvyponi]  .k-form-buttons { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 2rem; }

/* Ensure visible base state even when not inside Telerik wrappers */
.payment-container .checkout-btn.k-button[b-3y4gvyponi],
.payment-container .k-button.k-button-solid.k-button-solid-primary[b-3y4gvyponi],
.payment-container .k-button.k-button-solid-primary[b-3y4gvyponi],
.payment-container .k-button.k-button-solid.k-primary[b-3y4gvyponi],
.payment-container button[type="submit"].k-button[b-3y4gvyponi],
.payment-container[b-3y4gvyponi]  .checkout-btn.k-button,
.payment-container[b-3y4gvyponi]  .k-button.k-button-solid.k-button-solid-primary,
.payment-container[b-3y4gvyponi]  .k-button.k-button-solid-primary,
.payment-container[b-3y4gvyponi]  .k-button.k-button-solid.k-primary,
.payment-container[b-3y4gvyponi]  .k-form-buttons button[type="submit"].k-button {
    background-color: #1761d1 !important;
    background-image: none !important;
    border-color: var(--brand-blue) !important;
    color: #fff !important;
    font-size: 1.05rem;
    padding: 0.95rem 1.25rem;
    min-height: 48px;
    border-radius: 10px;
    transition: background-color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
    padding: 5px 40px 5px 40px;
    margin-top: 20px;
}

.payment-container[b-3y4gvyponi]  .checkout-btn.k-button:disabled,
.payment-container[b-3y4gvyponi]  .k-button.k-button-solid.k-button-solid-primary:disabled,
.payment-container[b-3y4gvyponi]  .k-button.k-button-solid-primary:disabled,
.payment-container[b-3y4gvyponi]  .k-button.k-button-solid.k-primary:disabled,
.payment-container[b-3y4gvyponi]  .k-form-buttons button[type="submit"].k-button:disabled {
    background-color: #a0a0a0 !important;
    border-color: #a0a0a0 !important;
    opacity: 0.7;
}

.payment-container .checkout-btn.k-button:hover:not(:disabled)[b-3y4gvyponi],
.payment-container .k-button.k-button-solid.k-button-solid-primary:hover:not(:disabled)[b-3y4gvyponi],
.payment-container .k-button.k-button-solid-primary:hover:not(:disabled)[b-3y4gvyponi],
.payment-container .k-button.k-button-solid.k-primary:hover:not(:disabled)[b-3y4gvyponi],
.payment-container button[type="submit"].k-button:hover:not(:disabled)[b-3y4gvyponi],
.payment-container[b-3y4gvyponi]  .checkout-btn.k-button:hover:not(:disabled),
.payment-container[b-3y4gvyponi]  .k-button.k-button-solid.k-button-solid-primary:hover:not(:disabled),
.payment-container[b-3y4gvyponi]  .k-button.k-button-solid-primary:hover:not(:disabled),
.payment-container[b-3y4gvyponi]  .k-button.k-button-solid.k-primary:hover:not(:disabled),
.payment-container[b-3y4gvyponi]  .k-form-buttons button[type="submit"].k-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(2, 37, 91, 0.18);
    background-color: #073377 !important;
}

.payment-container[b-3y4gvyponi]  .k-form-buttons button[type="submit"].k-button:not(:disabled) {
    padding: 5px 40px 5px 40px;
    box-shadow: 0 10px 20px rgba(2, 37, 91, 0.18);
    background-color: #1761d1 !important;
}

.payment-container[b-3y4gvyponi]  .checkout-btn.k-button:active:not(:disabled),
.payment-container[b-3y4gvyponi]  .k-button.k-button-solid.k-button-solid-primary:active:not(:disabled),
.payment-container[b-3y4gvyponi]  .k-button.k-button-solid-primary:active:not(:disabled),
.payment-container[b-3y4gvyponi]  .k-button.k-button-solid.k-primary:active:not(:disabled),
.payment-container[b-3y4gvyponi]  .k-form-buttons button[type="submit"].k-button:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(2, 37, 91, 0.12);
}

.payment-container[b-3y4gvyponi]  .checkout-btn.k-button:focus-visible,
.payment-container[b-3y4gvyponi]  .k-button.k-button-solid.k-button-solid-primary:focus-visible,
.payment-container[b-3y4gvyponi]  .k-button.k-button-solid-primary:focus-visible,
.payment-container[b-3y4gvyponi]  .k-button.k-button-solid.k-primary:focus-visible,
.payment-container[b-3y4gvyponi]  .k-form-buttons button[type="submit"].k-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(2, 37, 91, 0.28);
}

/* Make Telerik inputs naturally full-width */
.payment-container[b-3y4gvyponi]  .k-input,
.payment-container[b-3y4gvyponi]  .k-numerictextbox,
.payment-container[b-3y4gvyponi]  .k-textarea,
.payment-container[b-3y4gvyponi]  .k-textbox,
.payment-container[b-3y4gvyponi]  .k-combobox,
.payment-container[b-3y4gvyponi]  .k-dropdownlist { width: 100%; }

/* Safety net: enforce a solid background for any Telerik button inside this page */
.payment-container button.k-button[b-3y4gvyponi],
.payment-container[b-3y4gvyponi]  button.k-button {
    background-color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    color: #fff !important;
}

/* Guaranteed visual background even if theme keeps button transparent */
.payment-container button.k-button[b-3y4gvyponi],
.payment-container[b-3y4gvyponi]  button.k-button {
    position: relative;
    isolation: isolate; /* ensure pseudo-element stays behind content */
}
.payment-container button.k-button[b-3y4gvyponi]::before,
.payment-container[b-3y4gvyponi]  button.k-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--brand-blue);
    border-radius: inherit;
    z-index: 0;
}
.payment-container button.k-button > *[b-3y4gvyponi],
.payment-container[b-3y4gvyponi]  button.k-button > * {
    position: relative;
    z-index: 1;
}

/* Input aesthetics and focus state */
.payment-container[b-3y4gvyponi]  .k-input,
.payment-container[b-3y4gvyponi]  .k-textbox,
.payment-container[b-3y4gvyponi]  .k-textarea,
.payment-container[b-3y4gvyponi]  .k-numerictextbox,
.payment-container[b-3y4gvyponi]  .k-dropdownlist,
.payment-container[b-3y4gvyponi]  .k-combobox {
    border-radius: 10px;
    background-color: #fafcff;
    border: 1px solid #cfd8e3; /* unify neutral border to avoid black default */
    transition: box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

/* Ensure the plain ZIP input matches the Telerik inputs */
.payment-container #postalInput[b-3y4gvyponi] {
    border-radius: 10px;
    background-color: #fafcff;
    border: 1px solid #cfd8e3;
    width: 100%;
    padding: 8px 10px; /* align with .k-input-inner padding */
}
.payment-container #postalInput:focus[b-3y4gvyponi] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(2, 37, 91, 0.18);
    border-color: rgba(2, 37, 91, 0.45);
    background-color: #fff;
}

/* Make textboxes a little taller */
.payment-container[b-3y4gvyponi]  .k-input,
.payment-container[b-3y4gvyponi]  .k-textbox,
.payment-container[b-3y4gvyponi]  .k-numerictextbox,
.payment-container[b-3y4gvyponi]  .k-dropdownlist,
.payment-container[b-3y4gvyponi]  .k-combobox {
    min-height: 44px;
}

/* Add inner vertical padding for consistent feel across inputs */
.payment-container[b-3y4gvyponi]  .k-input-inner {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Ensure textarea has comfortable padding without forcing height */
.payment-container[b-3y4gvyponi]  .k-textarea .k-input-inner,
.payment-container[b-3y4gvyponi]  .k-textarea textarea {
    padding-top: 10px;
    padding-bottom: 10px;
}
.payment-container[b-3y4gvyponi]  .k-input:focus,
.payment-container[b-3y4gvyponi]  .k-textbox:focus,
.payment-container[b-3y4gvyponi]  .k-textarea:focus,
.payment-container[b-3y4gvyponi]  .k-numerictextbox.k-focus,
.payment-container[b-3y4gvyponi]  .k-dropdownlist.k-focus,
.payment-container[b-3y4gvyponi]  .k-combobox.k-focus {
    box-shadow: 0 0 0 3px rgba(2, 37, 91, 0.18);
    border-color: rgba(2, 37, 91, 0.45);
    background-color: #fff;
}

/* Make templated validation messages match the smaller, italic style */
.payment-container[b-3y4gvyponi]  .validation-message {
    font-size: 0.85rem;
    font-style: italic;
    color: #e50000; /* keep consistent error color */
    margin-top: 0.25rem;
    display: block;
}

/* Numeric fields error text: 1pt smaller than base */
.payment-container .numeric-validation[b-3y4gvyponi]  .validation-message {
    font-size: 0.77rem; /* ~1pt smaller than 0.85rem base (approx 1.3px less) */
}

@media (prefers-reduced-motion: reduce) {
    .payment-container[b-3y4gvyponi] { animation: none; }
    .payment-container[b-3y4gvyponi]  .k-button-solid-primary { transition: none; }
}

@media (max-width: 767px) {
    .page-wrap[b-3y4gvyponi] {
        padding: 0;
        min-height: auto;
        align-items: stretch;
    }
    .page-wrap[b-3y4gvyponi]::before { display: none; }
    .payment-container[b-3y4gvyponi] { margin: 0; padding: 1rem 1rem 1.25rem; box-shadow: none; border-radius: 0; background-color: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .logo[b-3y4gvyponi] { max-width: 220px; height: auto; margin-bottom: 1rem; }
    .payment-container h1[b-3y4gvyponi] { font-size: 1.5rem; }
    .payment-container p[b-3y4gvyponi] { font-size: 1rem; margin-bottom: 1.25rem; }
    [b-3y4gvyponi] .k-form-item { margin-bottom: 1rem; }
    .payment-container[b-3y4gvyponi]  input,
    .payment-container[b-3y4gvyponi]  textarea { font-size: 16px; }
    .payment-container[b-3y4gvyponi]  .k-form-buttons .checkout-btn.k-button { width: 100%; }
    :global(body)[b-3y4gvyponi] { background-color: #ffffff; background-image: none; overflow-x: hidden; }
    .page-wrap[b-3y4gvyponi] { padding-top: max(0.5rem, env(safe-area-inset-top)); padding-bottom: max(0.5rem, env(safe-area-inset-bottom)); }
}

@keyframes card-in-b-3y4gvyponi {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
/* _content/ChasePaymentech/Components/Pages/Payment.razor.rz.scp.css */
:global(html, body)[b-hsd9objiin] {
    height: 100%;
    margin: 0;
}

:global(body)[b-hsd9objiin] {
    /* Subtle background gradient */
    background-color: #f4f7f6;
    background-image: radial-gradient(1200px 600px at 10% -10%, #ecf1f8 0%, rgba(236,241,248,0) 60%),
                      radial-gradient(1000px 500px at 110% 10%, #e8eef7 0%, rgba(232,238,247,0) 60%);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Brand color used by logo; adjust this to match your exact logo blue */
:global(:root)[b-hsd9objiin] {
    --brand-blue: #02255b;
    --brand-blue-2: #1e4b8f;
    --card-bg: rgba(255, 255, 255, 0.88);
    --card-border: rgba(2, 37, 91, 0.08);
}

.page-wrap[b-hsd9objiin] {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    overflow: hidden; /* clip decorative ::before to avoid scrollbars */
}

/* Decorative soft blob behind the card */
.page-wrap[b-hsd9objiin]::before {
    content: "";
    position: absolute;
    inset: auto -120px 10% auto;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle at 30% 30%, rgba(2, 37, 91, 0.18), rgba(2, 37, 91, 0) 60%);
    filter: blur(20px);
    pointer-events: none;
}

.payment-container[b-hsd9objiin] {
    max-width: 600px;
    margin: 0 1rem;
    padding: 2rem;
    background: var(--card-bg);
    border-radius: 16px;
    border: 1px solid var(--card-border);
    box-shadow: 0 10px 30px rgba(2, 37, 91, 0.08), 0 2px 8px rgba(2, 37, 91, 0.05);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    text-align: center;
    animation: card-in-b-hsd9objiin 320ms ease-out both;
}

.logo[b-hsd9objiin] {
    max-width: 260px;
    height: auto;
    margin-bottom: 1.25rem;
}

.payment-container h1[b-hsd9objiin] { color: var(--brand-blue); margin-bottom: 0.75rem; font-weight: 700; letter-spacing: -0.3px; }
.payment-container h1[b-hsd9objiin]::after {
    content: "";
    display: block;
    width: 72px;
    height: 3px;
    margin: 0.5rem auto 0;
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue-2));
    border-radius: 2px;
}

.payment-container p[b-hsd9objiin] { color: #4b5563; margin-bottom: 1.75rem; font-size: 1.05rem; line-height: 1.6; overflow-wrap: anywhere; }

[b-hsd9objiin] .k-form {
    text-align: left;
}

[b-hsd9objiin] .k-form-item { margin-bottom: 1.1rem; }

.captcha-container[b-hsd9objiin] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.captcha-container .k-textbox[b-hsd9objiin] {
    flex-grow: 1;
}

[b-hsd9objiin] .k-form-buttons { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 2rem; }

.payment-container[b-hsd9objiin]  .checkout-btn.k-button,
.payment-container[b-hsd9objiin]  .k-button.k-button-solid.k-button-solid-primary,
.payment-container[b-hsd9objiin]  .k-button.k-button-solid-primary,
/* Cover alternate Telerik class combo for primary solid */
.payment-container[b-hsd9objiin]  .k-button.k-button-solid.k-primary,
/* Fallback: explicitly style the submit button within form buttons */
.payment-container[b-hsd9objiin]  .k-form-buttons button[type="submit"].k-button {
    background-color: var(--brand-blue) !important;
    background-image: none !important;
    border-color: var(--brand-blue) !important;
    color: #fff !important;
    font-size: 1.05rem;
    padding: 0.95rem 1.25rem;
    min-height: 48px;
    border-radius: 10px;
    transition: background-color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
}

.payment-container[b-hsd9objiin]  .checkout-btn.k-button:disabled,
.payment-container[b-hsd9objiin]  .k-button.k-button-solid.k-button-solid-primary:disabled,
.payment-container[b-hsd9objiin]  .k-button.k-button-solid-primary:disabled,
.payment-container[b-hsd9objiin]  .k-button.k-button-solid.k-primary:disabled,
.payment-container[b-hsd9objiin]  .k-form-buttons button[type="submit"].k-button:disabled {
    background-color: #a0a0a0 !important;
    border-color: #a0a0a0 !important;
    opacity: 0.7;
}

.payment-container[b-hsd9objiin]  .checkout-btn.k-button:hover:not(:disabled),
.payment-container[b-hsd9objiin]  .k-button.k-button-solid.k-button-solid-primary:hover:not(:disabled),
.payment-container[b-hsd9objiin]  .k-button.k-button-solid-primary:hover:not(:disabled),
.payment-container[b-hsd9objiin]  .k-button.k-button-solid.k-primary:hover:not(:disabled),
.payment-container[b-hsd9objiin]  .k-form-buttons button[type="submit"].k-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(2, 37, 91, 0.18);
    background-color: #073377 !important;
}

.payment-container[b-hsd9objiin]  .k-form-buttons button[type="submit"].k-button:not(:disabled) {
    padding: 5px 40px 5px 40px;
    box-shadow: 0 10px 20px rgba(2, 37, 91, 0.18);
    background-color: #1761d1 !important;
}

.payment-container[b-hsd9objiin]  .checkout-btn.k-button:active:not(:disabled),
.payment-container[b-hsd9objiin]  .k-button.k-button-solid.k-button-solid-primary:active:not(:disabled),
.payment-container[b-hsd9objiin]  .k-button.k-button-solid-primary:active:not(:disabled),
.payment-container[b-hsd9objiin]  .k-button.k-button-solid.k-primary:active:not(:disabled),
.payment-container[b-hsd9objiin]  .k-form-buttons button[type="submit"].k-button:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(2, 37, 91, 0.12);
}

.payment-container[b-hsd9objiin]  .checkout-btn.k-button:focus-visible,
.payment-container[b-hsd9objiin]  .k-button.k-button-solid.k-button-solid-primary:focus-visible,
.payment-container[b-hsd9objiin]  .k-button.k-button-solid-primary:focus-visible,
.payment-container[b-hsd9objiin]  .k-button.k-button-solid.k-primary:focus-visible,
.payment-container[b-hsd9objiin]  .k-form-buttons button[type="submit"].k-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(2, 37, 91, 0.28);
}

/* Ensure any button inside form buttons spans full width */
/* Desktop: button auto width (centered by form). Full width applied only on mobile below. */

/* Make Telerik inputs naturally full-width */
.payment-container[b-hsd9objiin]  .k-input,
.payment-container[b-hsd9objiin]  .k-numerictextbox,
.payment-container[b-hsd9objiin]  .k-textarea,
.payment-container[b-hsd9objiin]  .k-textbox,
.payment-container[b-hsd9objiin]  .k-combobox,
.payment-container[b-hsd9objiin]  .k-dropdownlist { width: 100%; }

/* Safety net: enforce a solid background for any Telerik button inside this page */
.payment-container[b-hsd9objiin]  button.k-button {
    background-color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    color: #fff !important;
}

/* Guaranteed visual background even if theme keeps button transparent */
.payment-container[b-hsd9objiin]  button.k-button {
    position: relative;
    isolation: isolate; /* ensure pseudo-element stays behind content */
}
.payment-container[b-hsd9objiin]  button.k-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--brand-blue);
    border-radius: inherit;
    z-index: 0;
}
.payment-container[b-hsd9objiin]  button.k-button > * {
    position: relative;
    z-index: 1;
}

/* Input aesthetics and focus state */
.payment-container[b-hsd9objiin]  .k-input,
.payment-container[b-hsd9objiin]  .k-textbox,
.payment-container[b-hsd9objiin]  .k-textarea,
.payment-container[b-hsd9objiin]  .k-numerictextbox,
.payment-container[b-hsd9objiin]  .k-dropdownlist,
.payment-container[b-hsd9objiin]  .k-combobox {
    border-radius: 10px;
    background-color: #fafcff;
    border: 1px solid #cfd8e3; /* unify neutral border to avoid black default */
    transition: box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

/* Ensure the plain ZIP input matches the Telerik inputs */
.payment-container #postalInput[b-hsd9objiin] {
    border-radius: 10px;
    background-color: #fafcff;
    border: 1px solid #cfd8e3;
    width: 100%;
    padding: 8px 10px; /* align with .k-input-inner padding */
}
.payment-container #postalInput:focus[b-hsd9objiin] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(2, 37, 91, 0.18);
    border-color: rgba(2, 37, 91, 0.45);
    background-color: #fff;
}

/* Make textboxes a little taller */
.payment-container[b-hsd9objiin]  .k-input,
.payment-container[b-hsd9objiin]  .k-textbox,
.payment-container[b-hsd9objiin]  .k-numerictextbox,
.payment-container[b-hsd9objiin]  .k-dropdownlist,
.payment-container[b-hsd9objiin]  .k-combobox {
    min-height: 44px;
}

/* Add inner vertical padding for consistent feel across inputs */
.payment-container[b-hsd9objiin]  .k-input-inner {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Ensure textarea has comfortable padding without forcing height */
.payment-container[b-hsd9objiin]  .k-textarea .k-input-inner,
.payment-container[b-hsd9objiin]  .k-textarea textarea {
    padding-top: 10px;
    padding-bottom: 10px;
}
.payment-container[b-hsd9objiin]  .k-input:focus,
.payment-container[b-hsd9objiin]  .k-textbox:focus,
.payment-container[b-hsd9objiin]  .k-textarea:focus,
.payment-container[b-hsd9objiin]  .k-numerictextbox.k-focus,
.payment-container[b-hsd9objiin]  .k-dropdownlist.k-focus,
.payment-container[b-hsd9objiin]  .k-combobox.k-focus {
    box-shadow: 0 0 0 3px rgba(2, 37, 91, 0.18);
    border-color: rgba(2, 37, 91, 0.45);
    background-color: #fff;
}

/* Make templated validation messages match the smaller, italic style */
.payment-container[b-hsd9objiin]  .validation-message {
    font-size: 0.85rem;
    font-style: italic;
    color: #e50000; /* keep consistent error color */
    margin-top: 0.25rem;
    display: block;
}

/* Numeric fields error text: 1pt smaller than base */
.payment-container .numeric-validation[b-hsd9objiin]  .validation-message {
    font-size: 0.77rem; /* ~1pt smaller than 0.85rem base (approx 1.3px less) */
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .payment-container[b-hsd9objiin] { animation: none; }
    .payment-container[b-hsd9objiin]  .k-button-solid-primary { transition: none; }
}

@media (max-width: 767px) {
    .page-wrap[b-hsd9objiin] {
        padding: 0;
        min-height: auto;
        align-items: stretch;
    }
    /* Hide decorative background and simplify for performance */
    .page-wrap[b-hsd9objiin]::before { display: none; }
    .payment-container[b-hsd9objiin] { margin: 0; padding: 1rem 1rem 1.25rem; box-shadow: none; border-radius: 0; background-color: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .logo[b-hsd9objiin] { max-width: 220px; height: auto; margin-bottom: 1rem; }
    .payment-container h1[b-hsd9objiin] { font-size: 1.5rem; }
    .payment-container p[b-hsd9objiin] { font-size: 1rem; margin-bottom: 1.25rem; }
    [b-hsd9objiin] .k-form-item { margin-bottom: 1rem; }
    /* Avoid iOS zoom by ensuring inputs are >=16px */
    .payment-container[b-hsd9objiin]  input,
    .payment-container[b-hsd9objiin]  textarea { font-size: 16px; }

    /* Mobile: make only the checkout button full width */
    .payment-container[b-hsd9objiin]  .k-form-buttons .checkout-btn.k-button { width: 100%; }
    :global(body)[b-hsd9objiin] { background-color: #ffffff; background-image: none; overflow-x: hidden; }
    /* Respect safe areas on notch devices */
    .page-wrap[b-hsd9objiin] { padding-top: max(0.5rem, env(safe-area-inset-top)); padding-bottom: max(0.5rem, env(safe-area-inset-bottom)); }
}

/* Entry animation */
@keyframes card-in-b-hsd9objiin {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
/* _content/ChasePaymentech/Components/Pages/PaymentCancel.razor.rz.scp.css */
:global(html, body)[b-quc9xcb07x] {
    height: 100%;
    margin: 0;
}

:global(body)[b-quc9xcb07x] {
    background-color: #f4f7f6;
    background-image: radial-gradient(1200px 600px at 10% -10%, #ecf1f8 0%, rgba(236,241,248,0) 60%),
                      radial-gradient(1000px 500px at 110% 10%, #e8eef7 0%, rgba(232,238,247,0) 60%);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

:global(:root)[b-quc9xcb07x] {
    --brand-blue: #02255b;
    --brand-blue-2: #1e4b8f;
    --card-bg: rgba(255, 255, 255, 0.88);
    --card-border: rgba(2, 37, 91, 0.08);
}

.page-wrap[b-quc9xcb07x] {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.page-wrap[b-quc9xcb07x]::before {
    content: "";
    position: absolute;
    inset: auto -120px 10% auto;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle at 30% 30%, rgba(2, 37, 91, 0.18), rgba(2, 37, 91, 0) 60%);
    filter: blur(20px);
    pointer-events: none;
}

.payment-container[b-quc9xcb07x] {
    max-width: 600px;
    margin: 0 1rem;
    padding: 2rem;
    background: var(--card-bg);
    border-radius: 16px;
    border: 1px solid var(--card-border);
    box-shadow: 0 10px 30px rgba(2, 37, 91, 0.08), 0 2px 8px rgba(2, 37, 91, 0.05);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    text-align: center;
    animation: card-in-b-quc9xcb07x 320ms ease-out both;
}

.logo[b-quc9xcb07x] { max-width: 260px; height: auto; margin-bottom: 1.25rem; }

.payment-container h1[b-quc9xcb07x] { color: var(--brand-blue); margin-bottom: 0.75rem; font-weight: 700; letter-spacing: -0.3px; }
.payment-container h1[b-quc9xcb07x]::after {
    content: "";
    display: block;
    width: 72px;
    height: 3px;
    margin: 0.5rem auto 0;
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue-2));
    border-radius: 2px;
}

.payment-container p[b-quc9xcb07x] { color: #4b5563; margin-bottom: 1.75rem; font-size: 1.05rem; line-height: 1.6; overflow-wrap: anywhere; }

.payment-container a.k-button[b-quc9xcb07x] {
    background-color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    color: #fff !important;
    font-size: 1.05rem;
    padding: 0.95rem 1.25rem;
    min-height: 48px;
    border-radius: 10px;
    transition: background-color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
}
.payment-container a.k-button:hover[b-quc9xcb07x] {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(2, 37, 91, 0.18);
    background-color: #073377 !important;
}

@media (prefers-reduced-motion: reduce) {
    .payment-container[b-quc9xcb07x] { animation: none; }
}

@media (max-width: 767px) {
    .page-wrap[b-quc9xcb07x] { padding: 0; min-height: auto; align-items: stretch; }
    .page-wrap[b-quc9xcb07x]::before { display: none; }
    .payment-container[b-quc9xcb07x] { margin: 0; padding: 1rem 1rem 1.25rem; box-shadow: none; border-radius: 0; background-color: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .logo[b-quc9xcb07x] { max-width: 220px; height: auto; margin-bottom: 1rem; }
    .payment-container h1[b-quc9xcb07x] { font-size: 1.5rem; }
    .payment-container p[b-quc9xcb07x] { font-size: 1rem; margin-bottom: 1.25rem; }
    :global(body)[b-quc9xcb07x] { background-color: #ffffff; background-image: none; overflow-x: hidden; }
}

@keyframes card-in-b-quc9xcb07x {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
/* _content/ChasePaymentech/Components/Pages/PaymentError.razor.rz.scp.css */
:global(html, body)[b-s5vn3br10f] {
    height: 100%;
    margin: 0;
}

:global(body)[b-s5vn3br10f] {
    background-color: #f4f7f6;
    background-image: radial-gradient(1200px 600px at 10% -10%, #ecf1f8 0%, rgba(236,241,248,0) 60%),
                      radial-gradient(1000px 500px at 110% 10%, #e8eef7 0%, rgba(232,238,247,0) 60%);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

:global(:root)[b-s5vn3br10f] {
    --brand-blue: #02255b;
    --brand-blue-2: #1e4b8f;
    --card-bg: rgba(255, 255, 255, 0.88);
    --card-border: rgba(2, 37, 91, 0.08);
}

.page-wrap[b-s5vn3br10f] {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.page-wrap[b-s5vn3br10f]::before {
    content: "";
    position: absolute;
    inset: auto -120px 10% auto;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle at 30% 30%, rgba(2, 37, 91, 0.18), rgba(2, 37, 91, 0) 60%);
    filter: blur(20px);
    pointer-events: none;
}

.payment-container[b-s5vn3br10f] {
    max-width: 600px;
    margin: 0 1rem;
    padding: 2rem;
    background: var(--card-bg);
    border-radius: 16px;
    border: 1px solid var(--card-border);
    box-shadow: 0 10px 30px rgba(2, 37, 91, 0.08), 0 2px 8px rgba(2, 37, 91, 0.05);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    text-align: center;
    animation: card-in-b-s5vn3br10f 320ms ease-out both;
}

.logo[b-s5vn3br10f] { max-width: 260px; height: auto; margin-bottom: 1.25rem; }

.payment-container h1[b-s5vn3br10f] { color: var(--brand-blue); margin-bottom: 0.75rem; font-weight: 700; letter-spacing: -0.3px; }
.payment-container h1[b-s5vn3br10f]::after {
    content: "";
    display: block;
    width: 72px;
    height: 3px;
    margin: 0.5rem auto 0;
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue-2));
    border-radius: 2px;
}

.payment-container p[b-s5vn3br10f] { color: #4b5563; margin-bottom: 1.75rem; font-size: 1.05rem; line-height: 1.6; overflow-wrap: anywhere; }

.payment-container a.k-button[b-s5vn3br10f] {
    background-color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    color: #fff !important;
    font-size: 1.05rem;
    padding: 0.95rem 1.25rem;
    min-height: 48px;
    border-radius: 10px;
    transition: background-color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
}
.payment-container a.k-button:hover[b-s5vn3br10f] {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(2, 37, 91, 0.18);
    background-color: #073377 !important;
}

@media (prefers-reduced-motion: reduce) {
    .payment-container[b-s5vn3br10f] { animation: none; }
}

@media (max-width: 767px) {
    .page-wrap[b-s5vn3br10f] { padding: 0; min-height: auto; align-items: stretch; }
    .page-wrap[b-s5vn3br10f]::before { display: none; }
    .payment-container[b-s5vn3br10f] { margin: 0; padding: 1rem 1rem 1.25rem; box-shadow: none; border-radius: 0; background-color: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .logo[b-s5vn3br10f] { max-width: 220px; height: auto; margin-bottom: 1rem; }
    .payment-container h1[b-s5vn3br10f] { font-size: 1.5rem; }
    .payment-container p[b-s5vn3br10f] { font-size: 1rem; margin-bottom: 1.25rem; }
    :global(body)[b-s5vn3br10f] { background-color: #ffffff; background-image: none; overflow-x: hidden; }
}

@keyframes card-in-b-s5vn3br10f {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
/* _content/ChasePaymentech/Components/Pages/PaymentSuccess.razor.rz.scp.css */
:global(html, body)[b-8z4lid13y9] {
    height: 100%;
    margin: 0;
}

:global(body)[b-8z4lid13y9] {
    background-color: #f4f7f6;
    background-image: radial-gradient(1200px 600px at 10% -10%, #ecf1f8 0%, rgba(236,241,248,0) 60%),
                      radial-gradient(1000px 500px at 110% 10%, #e8eef7 0%, rgba(232,238,247,0) 60%);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

:global(:root)[b-8z4lid13y9] {
    --brand-blue: #02255b;
    --brand-blue-2: #1e4b8f;
    --card-bg: rgba(255, 255, 255, 0.88);
    --card-border: rgba(2, 37, 91, 0.08);
}

.page-wrap[b-8z4lid13y9] {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.page-wrap[b-8z4lid13y9]::before {
    content: "";
    position: absolute;
    inset: auto -120px 10% auto;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle at 30% 30%, rgba(2, 37, 91, 0.18), rgba(2, 37, 91, 0) 60%);
    filter: blur(20px);
    pointer-events: none;
}

.payment-container[b-8z4lid13y9] {
    max-width: 600px;
    margin: 0 1rem;
    padding: 2rem;
    background: var(--card-bg);
    border-radius: 16px;
    border: 1px solid var(--card-border);
    box-shadow: 0 10px 30px rgba(2, 37, 91, 0.08), 0 2px 8px rgba(2, 37, 91, 0.05);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    text-align: center;
    animation: card-in-b-8z4lid13y9 320ms ease-out both;
}

.logo[b-8z4lid13y9] { max-width: 260px; height: auto; margin-bottom: 1.25rem; }

.payment-container h1[b-8z4lid13y9] { color: var(--brand-blue); margin-bottom: 0.75rem; font-weight: 700; letter-spacing: -0.3px; }
.payment-container h1[b-8z4lid13y9]::after {
    content: "";
    display: block;
    width: 72px;
    height: 3px;
    margin: 0.5rem auto 0;
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue-2));
    border-radius: 2px;
}

.payment-container p[b-8z4lid13y9] { color: #4b5563; margin-bottom: 1.75rem; font-size: 1.05rem; line-height: 1.6; overflow-wrap: anywhere; }

.payment-container a.k-button[b-8z4lid13y9] {
    background-color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    color: #fff !important;
    font-size: 1.05rem;
    padding: 0.95rem 1.25rem;
    min-height: 48px;
    border-radius: 10px;
    transition: background-color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
}
.payment-container a.k-button:hover[b-8z4lid13y9] {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(2, 37, 91, 0.18);
    background-color: #073377 !important;
}

@media (prefers-reduced-motion: reduce) {
    .payment-container[b-8z4lid13y9] { animation: none; }
}

@media (max-width: 767px) {
    .page-wrap[b-8z4lid13y9] { padding: 0; min-height: auto; align-items: stretch; }
    .page-wrap[b-8z4lid13y9]::before { display: none; }
    .payment-container[b-8z4lid13y9] { margin: 0; padding: 1rem 1rem 1.25rem; box-shadow: none; border-radius: 0; background-color: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .logo[b-8z4lid13y9] { max-width: 220px; height: auto; margin-bottom: 1rem; }
    .payment-container h1[b-8z4lid13y9] { font-size: 1.5rem; }
    .payment-container p[b-8z4lid13y9] { font-size: 1rem; margin-bottom: 1.25rem; }
    :global(body)[b-8z4lid13y9] { background-color: #ffffff; background-image: none; overflow-x: hidden; }
}

@keyframes card-in-b-8z4lid13y9 {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
/* _content/ChasePaymentech/Components/Pages/Signup.razor.rz.scp.css */
:global(html, body)[b-6ih7jdp2aw] {
    height: 100%;
    margin: 0;
}

:global(body)[b-6ih7jdp2aw] {
    /* Subtle background gradient */
    background-color: #f4f7f6;
    background-image: radial-gradient(1200px 600px at 10% -10%, #ecf1f8 0%, rgba(236,241,248,0) 60%),
                      radial-gradient(1000px 500px at 110% 10%, #e8eef7 0%, rgba(232,238,247,0) 60%);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Brand color used by logo; adjust this to match your exact logo blue */
:global(:root)[b-6ih7jdp2aw] {
    --brand-blue: #02255b;
    --brand-blue-2: #1e4b8f;
    --card-bg: rgba(255, 255, 255, 0.88);
    --card-border: rgba(2, 37, 91, 0.08);
}

.page-wrap[b-6ih7jdp2aw] {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    overflow: hidden; /* clip decorative ::before to avoid scrollbars */
}

/* Decorative soft blob behind the card */
.page-wrap[b-6ih7jdp2aw]::before {
    content: "";
    position: absolute;
    inset: auto -120px 10% auto;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle at 30% 30%, rgba(2, 37, 91, 0.18), rgba(2, 37, 91, 0) 60%);
    filter: blur(20px);
    pointer-events: none;
}

.payment-container[b-6ih7jdp2aw] {
    max-width: 600px;
    margin: 0 1rem;
    padding: 2rem;
    background: var(--card-bg);
    border-radius: 16px;
    border: 1px solid var(--card-border);
    box-shadow: 0 10px 30px rgba(2, 37, 91, 0.08), 0 2px 8px rgba(2, 37, 91, 0.05);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    text-align: center;
    animation: card-in-b-6ih7jdp2aw 320ms ease-out both;
}

.logo[b-6ih7jdp2aw] {
    max-width: 260px;
    height: auto;
    margin-bottom: 1.25rem;
}

.payment-container h1[b-6ih7jdp2aw] { color: var(--brand-blue); margin-bottom: 0.75rem; font-weight: 700; letter-spacing: -0.3px; }
.payment-container h1[b-6ih7jdp2aw]::after {
    content: "";
    display: block;
    width: 72px;
    height: 3px;
    margin: 0.5rem auto 0;
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue-2));
    border-radius: 2px;
}

.payment-container p[b-6ih7jdp2aw] { color: #4b5563; margin-bottom: 1.75rem; font-size: 1.05rem; line-height: 1.6; overflow-wrap: anywhere; }

[b-6ih7jdp2aw] .k-form {
    text-align: left;
}

[b-6ih7jdp2aw] .k-form-item { margin-bottom: 1.1rem; }

.payment-container[b-6ih7jdp2aw]  .k-form-buttons { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 2rem; }

/* Ensure visible base state even when not inside Telerik wrappers */
.payment-container .checkout-btn.k-button[b-6ih7jdp2aw],
.payment-container .k-button.k-button-solid.k-button-solid-primary[b-6ih7jdp2aw],
.payment-container .k-button.k-button-solid-primary[b-6ih7jdp2aw],
.payment-container .k-button.k-button-solid.k-primary[b-6ih7jdp2aw],
.payment-container button[type="submit"].k-button[b-6ih7jdp2aw],
.payment-container[b-6ih7jdp2aw]  .checkout-btn.k-button,
.payment-container[b-6ih7jdp2aw]  .k-button.k-button-solid.k-button-solid-primary,
.payment-container[b-6ih7jdp2aw]  .k-button.k-button-solid-primary,
.payment-container[b-6ih7jdp2aw]  .k-button.k-button-solid.k-primary,
.payment-container[b-6ih7jdp2aw]  .k-form-buttons button[type="submit"].k-button {
    background-color: #1761d1 !important;
    background-image: none !important;
    border-color: var(--brand-blue) !important;
    color: #fff !important;
    font-size: 1.05rem;
    padding: 0.95rem 1.25rem;
    min-height: 48px;
    border-radius: 10px;
    transition: background-color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
    padding: 5px 40px 5px 40px;
    margin-top: 20px;
}

.payment-container[b-6ih7jdp2aw]  .checkout-btn.k-button:disabled,
.payment-container[b-6ih7jdp2aw]  .k-button.k-button-solid.k-button-solid-primary:disabled,
.payment-container[b-6ih7jdp2aw]  .k-button.k-button-solid-primary:disabled,
.payment-container[b-6ih7jdp2aw]  .k-button.k-button-solid.k-primary:disabled,
.payment-container[b-6ih7jdp2aw]  .k-form-buttons button[type="submit"].k-button:disabled {
    background-color: #a0a0a0 !important;
    border-color: #a0a0a0 !important;
    opacity: 0.7;
}

/* .payment-container ::deep .checkout-btn.k-button:hover:not(:disabled) {
    margin-top: 20px;
    padding: 5px 40px 5px 40px;
    box-shadow: 0 10px 20px rgba(2, 37, 91, 0.18);
    background-color: #1761d1 !important;
} */

.payment-container .checkout-btn.k-button:hover:not(:disabled)[b-6ih7jdp2aw],
.payment-container .k-button.k-button-solid.k-button-solid-primary:hover:not(:disabled)[b-6ih7jdp2aw],
.payment-container .k-button.k-button-solid-primary:hover:not(:disabled)[b-6ih7jdp2aw],
.payment-container .k-button.k-button-solid.k-primary:hover:not(:disabled)[b-6ih7jdp2aw],
.payment-container button[type="submit"].k-button:hover:not(:disabled)[b-6ih7jdp2aw],
.payment-container[b-6ih7jdp2aw]  .checkout-btn.k-button:hover:not(:disabled),
.payment-container[b-6ih7jdp2aw]  .k-button.k-button-solid.k-button-solid-primary:hover:not(:disabled),
.payment-container[b-6ih7jdp2aw]  .k-button.k-button-solid-primary:hover:not(:disabled),
.payment-container[b-6ih7jdp2aw]  .k-button.k-button-solid.k-primary:hover:not(:disabled),
.payment-container[b-6ih7jdp2aw]  .k-form-buttons button[type="submit"].k-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(2, 37, 91, 0.18);
    background-color: #073377 !important;
}

.payment-container[b-6ih7jdp2aw]  .k-form-buttons button[type="submit"].k-button:not(:disabled) {
    padding: 5px 40px 5px 40px;
    box-shadow: 0 10px 20px rgba(2, 37, 91, 0.18);
    background-color: #1761d1 !important;
}

.payment-container[b-6ih7jdp2aw]  .checkout-btn.k-button:active:not(:disabled),
.payment-container[b-6ih7jdp2aw]  .k-button.k-button-solid.k-button-solid-primary:active:not(:disabled),
.payment-container[b-6ih7jdp2aw]  .k-button.k-button-solid-primary:active:not(:disabled),
.payment-container[b-6ih7jdp2aw]  .k-button.k-button-solid.k-primary:active:not(:disabled),
.payment-container[b-6ih7jdp2aw]  .k-form-buttons button[type="submit"].k-button:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(2, 37, 91, 0.12);
}

.payment-container[b-6ih7jdp2aw]  .checkout-btn.k-button:focus-visible,
.payment-container[b-6ih7jdp2aw]  .k-button.k-button-solid.k-button-solid-primary:focus-visible,
.payment-container[b-6ih7jdp2aw]  .k-button.k-button-solid-primary:focus-visible,
.payment-container[b-6ih7jdp2aw]  .k-button.k-button-solid.k-primary:focus-visible,
.payment-container[b-6ih7jdp2aw]  .k-form-buttons button[type="submit"].k-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(2, 37, 91, 0.28);
}

/* Make Telerik inputs naturally full-width */
.payment-container[b-6ih7jdp2aw]  .k-input,
.payment-container[b-6ih7jdp2aw]  .k-numerictextbox,
.payment-container[b-6ih7jdp2aw]  .k-textarea,
.payment-container[b-6ih7jdp2aw]  .k-textbox,
.payment-container[b-6ih7jdp2aw]  .k-combobox,
.payment-container[b-6ih7jdp2aw]  .k-dropdownlist { width: 100%; }

/* Safety net: enforce a solid background for any Telerik button inside this page */
.payment-container button.k-button[b-6ih7jdp2aw],
.payment-container[b-6ih7jdp2aw]  button.k-button {
    background-color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    color: #fff !important;
}

/* Guaranteed visual background even if theme keeps button transparent */
.payment-container button.k-button[b-6ih7jdp2aw],
.payment-container[b-6ih7jdp2aw]  button.k-button {
    position: relative;
    isolation: isolate; /* ensure pseudo-element stays behind content */
}
.payment-container button.k-button[b-6ih7jdp2aw]::before,
.payment-container[b-6ih7jdp2aw]  button.k-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--brand-blue);
    border-radius: inherit;
    z-index: 0;
}
.payment-container button.k-button > *[b-6ih7jdp2aw],
.payment-container[b-6ih7jdp2aw]  button.k-button > * {
    position: relative;
    z-index: 1;
}

/* Input aesthetics and focus state */
.payment-container[b-6ih7jdp2aw]  .k-input,
.payment-container[b-6ih7jdp2aw]  .k-textbox,
.payment-container[b-6ih7jdp2aw]  .k-textarea,
.payment-container[b-6ih7jdp2aw]  .k-numerictextbox,
.payment-container[b-6ih7jdp2aw]  .k-dropdownlist,
.payment-container[b-6ih7jdp2aw]  .k-combobox {
    border-radius: 10px;
    background-color: #fafcff;
    border: 1px solid #cfd8e3; /* unify neutral border to avoid black default */
    transition: box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

/* Ensure the plain ZIP input matches the Telerik inputs */
.payment-container #postalInput[b-6ih7jdp2aw] {
    border-radius: 10px;
    background-color: #fafcff;
    border: 1px solid #cfd8e3;
    width: 100%;
    padding: 8px 10px; /* align with .k-input-inner padding */
}
.payment-container #postalInput:focus[b-6ih7jdp2aw] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(2, 37, 91, 0.18);
    border-color: rgba(2, 37, 91, 0.45);
    background-color: #fff;
}

/* Make textboxes a little taller */
.payment-container[b-6ih7jdp2aw]  .k-input,
.payment-container[b-6ih7jdp2aw]  .k-textbox,
.payment-container[b-6ih7jdp2aw]  .k-numerictextbox,
.payment-container[b-6ih7jdp2aw]  .k-dropdownlist,
.payment-container[b-6ih7jdp2aw]  .k-combobox {
    min-height: 44px;
}

/* Add inner vertical padding for consistent feel across inputs */
.payment-container[b-6ih7jdp2aw]  .k-input-inner {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Ensure textarea has comfortable padding without forcing height */
.payment-container[b-6ih7jdp2aw]  .k-textarea .k-input-inner,
.payment-container[b-6ih7jdp2aw]  .k-textarea textarea {
    padding-top: 10px;
    padding-bottom: 10px;
}
.payment-container[b-6ih7jdp2aw]  .k-input:focus,
.payment-container[b-6ih7jdp2aw]  .k-textbox:focus,
.payment-container[b-6ih7jdp2aw]  .k-textarea:focus,
.payment-container[b-6ih7jdp2aw]  .k-numerictextbox.k-focus,
.payment-container[b-6ih7jdp2aw]  .k-dropdownlist.k-focus,
.payment-container[b-6ih7jdp2aw]  .k-combobox.k-focus {
    box-shadow: 0 0 0 3px rgba(2, 37, 91, 0.18);
    border-color: rgba(2, 37, 91, 0.45);
    background-color: #fff;
}

/* Make templated validation messages match the smaller, italic style */
.payment-container[b-6ih7jdp2aw]  .validation-message {
    font-size: 0.85rem;
    font-style: italic;
    color: #e50000; /* keep consistent error color */
    margin-top: 0.25rem;
    display: block;
}

/* Numeric fields error text: 1pt smaller than base */
.payment-container .numeric-validation[b-6ih7jdp2aw]  .validation-message {
    font-size: 0.77rem; /* ~1pt smaller than 0.85rem base (approx 1.3px less) */
}

@media (prefers-reduced-motion: reduce) {
    .payment-container[b-6ih7jdp2aw] { animation: none; }
    .payment-container[b-6ih7jdp2aw]  .k-button-solid-primary { transition: none; }
}

@media (max-width: 767px) {
    .page-wrap[b-6ih7jdp2aw] {
        padding: 0;
        min-height: auto;
        align-items: stretch;
    }
    .page-wrap[b-6ih7jdp2aw]::before { display: none; }
    .payment-container[b-6ih7jdp2aw] { margin: 0; padding: 1rem 1rem 1.25rem; box-shadow: none; border-radius: 0; background-color: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .logo[b-6ih7jdp2aw] { max-width: 220px; height: auto; margin-bottom: 1rem; }
    .payment-container h1[b-6ih7jdp2aw] { font-size: 1.5rem; }
    .payment-container p[b-6ih7jdp2aw] { font-size: 1rem; margin-bottom: 1.25rem; }
    [b-6ih7jdp2aw] .k-form-item { margin-bottom: 1rem; }
    .payment-container[b-6ih7jdp2aw]  input,
    .payment-container[b-6ih7jdp2aw]  textarea { font-size: 16px; }
    .payment-container[b-6ih7jdp2aw]  .k-form-buttons .checkout-btn.k-button { width: 100%; }
    :global(body)[b-6ih7jdp2aw] { background-color: #ffffff; background-image: none; overflow-x: hidden; }
    .page-wrap[b-6ih7jdp2aw] { padding-top: max(0.5rem, env(safe-area-inset-top)); padding-bottom: max(0.5rem, env(safe-area-inset-bottom)); }
}

@keyframes card-in-b-6ih7jdp2aw {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}