﻿<?php
session_start();
require_once dirname(__DIR__) . '/includes/functions.php';

billing_require_auth();

$user = billing_current_user();
$organization = billing_current_organization();
if (!$user) {
    billing_redirect('signin.php');
}
if (!$organization || empty($organization['onboarding_completed_at'])) {
    billing_redirect('onboarding.php?step=1');
}

$stats = billing_dashboard_stats((int) $user['id']);
$organizationName = (string) ($organization['organization_name'] ?? 'bala');
$userLabel = (string) ($user['email'] ?? 'billing-user');
$billingTopbarOrganizationName = $organizationName;
$billingTopbarUserLabel = $userLabel;
$billingActiveNav = 'zoho_payments';

$paymentFeeRows = [
    [
        'rate' => '0.5%',
        'caption' => 'per transaction',
        'methods' => [
            ['icon' => 'fa-solid fa-bolt', 'label' => 'UPI', 'class' => 'is-upi'],
        ],
    ],
    [
        'rate' => '2%',
        'caption' => 'per transaction',
        'methods' => [
            ['icon' => 'fa-regular fa-credit-card', 'label' => 'Cards (2.75% for Corporate Credit Cards)', 'class' => 'is-card'],
            ['icon' => 'fa-solid fa-building-columns', 'label' => 'Net Banking', 'class' => 'is-bank'],
        ],
    ],
];

$benefits = [
    [
        'icon' => 'fa-solid fa-atom',
        'title' => 'Built natively for your finance apps',
        'copy' => 'Zoho Payments is a part of the Zoho ecosystem. So, you can collect payments right from your finance apps.',
    ],
    [
        'icon' => 'fa-regular fa-square-check',
        'title' => 'No more switching between payments and finance apps',
        'copy' => 'Get payment information and analytic reports right from your finance app, contextually.',
    ],
    [
        'icon' => 'fa-solid fa-link',
        'title' => "You don't need a third-party payment account",
        'copy' => 'Get started right from your Zoho Finance app. As a unified solution, Zoho Payments is automatically linked with your Zoho Finance apps.',
    ],
    [
        'icon' => 'fa-solid fa-bullseye',
        'title' => 'One solution to work with',
        'copy' => 'Zoho Payments is a part of your finance apps, so you only have to work with one solution from onboarding to support.',
    ],
    [
        'icon' => 'fa-regular fa-shield',
        'title' => 'Unwavering trust',
        'copy' => 'With 25+ years of experience as a reliable software vendor, you can trust us to process your payments safely and securely.',
    ],
];

$settingsGroups = [
    'organization' => [
        'Organization',
        'Users & Roles',
        'Taxes & Compliance',
        'Setup & Configurations',
        'Customization',
        'Automation',
    ],
    'module' => [
        'General',
        'Online Payments',
        'Sales',
        'Subscriptions',
        'Purchases',
        'Customer Portal',
    ],
];

$businessRecords = ['Mr. GVENKATESWARLU', 'RANA KARMAKAR'];
$businessTypes = ['Individual', 'Sole Proprietorship', 'Company', 'Limited Liability Partnership', 'Partnership', 'Trust'];
$industryOptions = [
    'Air Conditioning and Refrigeration Repair Shops',
    'Accounting, Auditing, and Bookkeeping Services',
    'Advertising Services',
    'Agricultural Cooperative',
    'Air Carriers, Airlines',
    'Airports, Airport Terminals, Flying Fields',
];
$states = ['State', 'Andhra Pradesh', 'Karnataka', 'Tamil Nadu', 'Telangana', 'Maharashtra'];
$documentOptions = ['GST Certificate', 'Shop Establishment Certificate'];
$identityOptions = ['Driving Licence', 'Passport', 'Voter ID'];
$deliveryOptions = ['Self-delivery', 'Third-party delivery', 'Self and third-party delivery'];
$timeframeOptions = ['Within 24 hours of the payment', 'Within two weeks of the payment', 'Within a month of the payment', 'Over a month after the payment'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="<?php echo billing_escape(billing_base_href()); ?>">
<title>Zoho Payments | Zoho Billing</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap">
<link rel="stylesheet" href="Payslip_Project/assets/fontawesome/css/all.min.css">
<link rel="stylesheet" href="assets/billing.css?v=20260506-zoho-payments">
<style>
.payments-app-page {
    min-height: calc(100vh - 140px);
    background: #fff;
    border-top: 1px solid #e7edf4;
}

.payments-app-page[hidden] {
    display: none;
}

.payments-app-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 24px;
    background: #e7f7ed;
    border-bottom: 1px solid #cbe7d6;
    color: #1f3d2f;
    font-size: 14px;
    text-align: center;
}

.payments-app-banner a {
    color: #2563eb;
    font-weight: 700;
    text-decoration: none;
}

.payments-app-banner button {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #1f3d2f;
    font: inherit;
    cursor: pointer;
}

.payments-app-shell {
    width: min(1120px, calc(100% - 56px));
    margin: 0 auto;
    padding: 0 0 54px;
}

.payments-app-hero {
    background: #f7f9ff;
    border-bottom: 1px solid #edf1f7;
}

.payments-app-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 580px);
    gap: 56px;
    align-items: center;
    padding: 38px 24px 48px;
}

.payments-app-copy {
    max-width: 440px;
    justify-self: center;
}

.payments-app-logo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    color: #000;
}

.payments-app-logo-mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #185eaf;
    font-size: 38px;
}

.payments-app-logo-copy {
    display: inline-flex;
    flex-direction: column;
    line-height: 0.95;
}

.payments-app-logo-copy small {
    color: #000;
    font-size: 15px;
    font-weight: 700;
}

.payments-app-logo-copy strong {
    color: #000;
    font-size: 23px;
    font-weight: 800;
}

.payments-app-copy h1 {
    margin: 0 0 16px;
    color: #000;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.payments-app-copy p {
    margin: 0;
    color: #1f2937;
    font-size: 18px;
    line-height: 1.55;
}

.payments-app-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 38px;
}

.payments-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid #d5dce8;
    border-radius: 6px;
    background: #fff;
    color: #111827;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.payments-hero-btn.is-primary {
    border-color: #2cb46e;
    background: #2cb46e;
    color: #fff;
}

.payments-fee-card {
    justify-self: end;
    width: 100%;
    border-top: 3px solid #19b75f;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    padding: 26px 42px 30px;
}

.payments-fee-card h2 {
    margin: 0;
    color: #1d2a44;
    font-size: 18px;
    font-weight: 800;
}

.payments-fee-accent {
    width: 160px;
    height: 10px;
    margin: 2px 0 20px;
}

.payments-fee-box {
    border: 1px solid #e1e7ef;
    border-radius: 16px;
    overflow: hidden;
}

.payments-fee-row {
    display: grid;
    grid-template-columns: 196px minmax(0, 1fr);
    background: #fff;
}

.payments-fee-row + .payments-fee-row {
    border-top: 1px solid #e1e7ef;
}

.payments-fee-rate {
    display: grid;
    place-items: center;
    padding: 24px 18px;
    border-right: 1px solid #e1e7ef;
    text-align: center;
}

.payments-fee-rate strong {
    color: #14b86a;
    font-size: 34px;
    font-weight: 500;
}

.payments-fee-rate span {
    color: #42506a;
    font-size: 17px;
    line-height: 1.45;
}

.payments-fee-methods {
    padding: 22px 20px 22px 18px;
    display: grid;
    gap: 12px;
    align-content: center;
}

.payments-fee-method {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #1f3762;
    font-size: 15px;
    line-height: 1.45;
}

.payments-fee-method i {
    width: 18px;
    text-align: center;
    color: #297cff;
}

.payments-fee-method.is-upi i {
    color: #f28b2b;
}

.payments-fee-note {
    margin-top: 18px;
    color: #1f2b43;
    font-size: 15px;
    line-height: 1.5;
}

.payments-fee-note a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}

.payments-app-benefits {
    padding: 48px 24px 0;
}

.payments-app-intro {
    max-width: 760px;
    margin: 0 0 34px 258px;
}

.payments-benefit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 48px;
    align-items: start;
}

.payments-benefit-card {
    min-height: 270px;
    padding: 32px 30px 28px;
    border: 1px solid #d7e7ff;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.04);
}

.payments-benefit-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(180deg, #4d8df8, #3477ea);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 22px;
}

.payments-benefit-card h2 {
    margin: 26px 0 12px;
    color: #000;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.45;
}

.payments-benefit-card p {
    margin: 0;
    color: #52627c;
    font-size: 17px;
    line-height: 1.65;
}

.payments-benefit-card:last-child {
    grid-column: 1;
}

.payments-app-footer {
    margin-top: 54px;
    text-align: center;
    color: #63738c;
    font-size: 15px;
}

.payments-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(31, 41, 55, 0.56);
    display: grid;
    place-items: center;
    padding: 18px;
    z-index: 120;
}

.payments-modal-backdrop[hidden] {
    display: none;
}

.payments-modal {
    width: min(750px, calc(100vw - 32px));
    max-height: calc(100vh - 36px);
    overflow: auto;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
}

.payments-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid #e9edf5;
}

.payments-modal-head h2 {
    margin: 0;
    color: #243145;
    font-size: 25px;
    font-weight: 500;
}

.payments-modal-close {
    border: 0;
    background: transparent;
    color: #ff4b4b;
    font-size: 26px;
    cursor: pointer;
}

.payments-support-body {
    padding: 24px 24px 0;
}

.payments-support-issue {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 18px;
    border-radius: 10px;
    background: #eaf2ff;
    margin-bottom: 26px;
}

.payments-support-issue-icon {
    width: 90px;
    height: 90px;
    border-radius: 12px;
    background: #fff;
    display: grid;
    place-items: center;
}

.payments-support-issue-icon span {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: radial-gradient(circle at 35% 30%, #6fa8ff, #377bf0);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 20px;
}

.payments-support-issue-copy h3 {
    margin: 0 0 4px;
    color: #2a313b;
    font-size: 18px;
}

.payments-support-issue-copy p {
    margin: 0;
    color: #5e6b86;
    font-size: 17px;
    line-height: 1.5;
}

.payments-record-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid #c8cedc;
    border-radius: 8px;
    background: #fff;
    color: #202733;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
}

.payments-support-form {
    display: grid;
    gap: 18px;
}

.payments-support-field label {
    display: block;
    margin-bottom: 8px;
    color: #363f4c;
    font-size: 16px;
}

.payments-support-field label.is-required {
    color: #ff3f3f;
}

.payments-support-input,
.payments-support-textarea,
.payments-support-phone-input {
    width: 100%;
    border: 1px solid #cfd7e6;
    border-radius: 9px;
    background: #fff;
    color: #202733;
    font: inherit;
}

.payments-support-input,
.payments-support-phone-input {
    min-height: 42px;
    padding: 0 14px;
}

.payments-support-textarea {
    min-height: 92px;
    padding: 12px 14px;
    resize: vertical;
}

.payments-support-input:focus,
.payments-support-textarea:focus,
.payments-support-phone-input:focus {
    outline: 0;
    border-color: #4c8ef7;
    box-shadow: 0 0 0 2px rgba(76, 142, 247, 0.12);
}

.payments-attachment-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.payments-attachment-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid #d2d8e4;
    border-radius: 8px;
    background: #fff;
    color: #111827;
    cursor: pointer;
    overflow: hidden;
}

.payments-attachment-button input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.payments-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-height: 36px;
    padding: 0 14px 0 18px;
    border-left: 1px solid #e5eaf1;
    border-radius: 8px;
    background: #fff;
    color: #25324a;
    font-size: 15px;
}

.payments-attachment-chip button {
    border: 0;
    background: transparent;
    color: #ff7a7a;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.payments-support-phone {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    border: 1px solid #cfd7e6;
    border-radius: 9px;
    overflow: hidden;
}

.payments-support-phone-icon {
    display: grid;
    place-items: center;
    background: #fafbfd;
    border-right: 1px solid #cfd7e6;
    color: #111827;
}

.payments-support-phone .payments-support-phone-input {
    border: 0;
    border-radius: 0;
}

.payments-support-note {
    margin: 10px 0 0;
    padding: 0 0 0 10px;
    border-left: 2px solid #f3a54a;
    color: #3e4651;
    font-size: 15px;
    line-height: 1.5;
}

.payments-support-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    border-top: 1px solid #e9edf5;
    margin-top: 24px;
}

.payments-support-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.payments-support-submit,
.payments-support-cancel,
.payments-record-start {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
}

.payments-support-submit,
.payments-record-start {
    border: 1px solid #29b36c;
    background: #29b36c;
    color: #fff;
    font-weight: 700;
}

.payments-support-cancel {
    border: 1px solid #d2d8e4;
    background: #fff;
    color: #202733;
}

.payments-support-helpline {
    color: #56627c;
    font-size: 15px;
    line-height: 1.5;
    text-align: right;
}

.payments-support-helpline strong {
    color: #2c3647;
}

.payments-recording-body {
    padding: 26px 24px 28px;
}

.payments-recording-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: #2a313b;
    font-size: 18px;
    font-weight: 700;
}

.payments-recording-title i {
    color: #3282ed;
}

.payments-recording-copy {
    margin: 0 0 14px;
    color: #5e6b86;
    font-size: 17px;
    line-height: 1.5;
}

.payments-recording-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.payments-recording-list li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 12px;
    color: #2f3742;
    font-size: 16px;
    line-height: 1.55;
}

.payments-recording-list i {
    color: #198754;
    margin-top: 4px;
}

.payments-recording-agree {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    color: #2f3742;
    font-size: 15px;
}

.payments-recording-foot {
    padding: 22px 24px 28px;
    border-top: 1px solid #e9edf5;
}

.payments-setup-copy {
    color: #394454;
    font-size: 16px;
    line-height: 1.6;
}

.payments-setup-copy strong {
    font-weight: 800;
}

.payments-owner-card {
    margin-top: 18px;
    padding: 24px 28px;
    border-radius: 16px;
    background: #f8fafe;
}

.payments-owner-label {
    margin-bottom: 18px;
    color: #6d7a94;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.payments-owner-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.payments-owner-avatar {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    overflow: hidden;
    background: linear-gradient(180deg, #f5c98e, #c47138);
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
}

.payments-owner-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.payments-owner-name {
    color: #263448;
    font-size: 18px;
    font-weight: 700;
}

.payments-owner-mail {
    color: #404b5d;
    font-size: 16px;
}

.payments-owner-note {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 10px;
    margin-top: 16px;
    color: #404b5d;
    font-size: 16px;
    line-height: 1.6;
}

.payments-owner-note i {
    color: #ff9838;
    margin-top: 5px;
}

.payments-check-list {
    display: grid;
    gap: 14px;
    padding: 22px 0 0;
}

.payments-check-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #303a49;
    font-size: 16px;
    line-height: 1.55;
}

.payments-check-item input,
.payments-choice input {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: #4c8ef7;
}

.payments-check-item a {
    color: #2563eb;
    text-decoration: none;
}

.payments-check-item i {
    font-size: 13px;
}

.payments-setup-foot {
    justify-content: flex-start;
}

.payments-setup-submit[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.payments-onboarding {
    min-height: calc(100vh - 140px);
    background: #fff;
    border-top: 1px solid #e7edf4;
}

.payments-onboarding[hidden] {
    display: none;
}

.payments-onboarding-layout {
    display: grid;
    grid-template-columns: 302px minmax(0, 1fr);
}

.payments-onboarding-sidebar {
    border-right: 1px solid #e7edf4;
    background: #fff;
    min-height: calc(100vh - 141px);
    padding: 18px 16px 0;
}

.payments-onboarding-sidebar h3 {
    margin: 18px 0 14px;
    color: #54627a;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.payments-onboarding-nav {
    display: grid;
    gap: 6px;
}

.payments-onboarding-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    color: #22314a;
    font-size: 16px;
    text-decoration: none;
}

.payments-onboarding-link.is-active {
    background: #2eb57a;
    color: #fff;
    font-weight: 700;
}

.payments-onboarding-link.is-group {
    background: #f3f6fd;
    font-weight: 700;
}

.payments-onboarding-link i {
    color: inherit;
    font-size: 12px;
}

.payments-onboarding-panel {
    min-width: 0;
    background: #f9fbff;
}

.payments-onboarding-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 24px;
    border-bottom: 1px solid #e7edf4;
    background: #fff;
}

.payments-onboarding-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #17345d;
}

.payments-onboarding-brand .payments-app-logo-mark {
    font-size: 36px;
}

.payments-onboarding-brand strong {
    display: block;
    color: #1a2e4f;
    font-size: 18px;
}

.payments-onboarding-brand span {
    display: block;
    color: #1a2e4f;
    font-size: 16px;
    font-weight: 800;
}

.payments-stepper {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: #1f3660;
}

.payments-step-arrow {
    color: #7f8797;
    font-size: 18px;
}

.payments-step-label {
    color: #1b3155;
    font-size: 16px;
    font-weight: 700;
}

.payments-step-item {
    width: 34px;
    height: 34px;
    border: 1px solid #d6dbe5;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #43516b;
    background: #fff;
    font-weight: 600;
}

.payments-step-item.is-active {
    border-color: #0b6de6;
    background: #0b6de6;
    color: #fff;
}

.payments-step-divider {
    width: 24px;
    height: 1px;
    background: #d5dce8;
}

.payments-onboarding-close {
    border: 0;
    background: transparent;
    color: #4c5b78;
    font-size: 24px;
    cursor: pointer;
}

.payments-onboarding-content {
    padding: 26px 24px 48px;
}

.payments-onboarding-helpline {
    color: #213a65;
    font-size: 15px;
    line-height: 1.5;
    text-align: right;
}

.payments-welcome-box {
    margin: 22px auto 46px;
    max-width: 1080px;
    padding: 28px 26px;
    border-left: 1px solid #8ec2ff;
    background: #fff;
    box-shadow: inset 0 0 0 1px #eef2f8;
}

.payments-welcome-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px;
    color: #183058;
    font-size: 18px;
    font-weight: 800;
}

.payments-welcome-title i {
    color: #1773e4;
}

.payments-welcome-box p {
    margin: 0;
    color: #33486d;
    font-size: 16px;
    line-height: 1.7;
}

.payments-profile-wrap {
    max-width: 1080px;
    margin: 0 auto;
}

.payments-profile-wrap h1 {
    margin: 0 0 12px;
    color: #17345d;
    font-size: 28px;
}

.payments-profile-wrap > p {
    margin: 0 0 34px;
    color: #33486d;
    font-size: 16px;
    line-height: 1.7;
}

.payments-profile-card {
    padding: 36px 40px 40px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 0 0 1px #eef2f8;
}

.payments-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 58px;
}

.payments-form-field label {
    display: block;
    margin-bottom: 10px;
    color: #36455f;
    font-size: 16px;
}

.payments-form-field label .required {
    color: #ff5d5d;
}

.payments-form-input,
.payments-form-select button {
    width: 100%;
    min-height: 54px;
    padding: 0 16px;
    border: 1px solid #d8dfeb;
    border-radius: 10px;
    background: #fff;
    color: #22324a;
    font: inherit;
}

.payments-form-input:focus,
.payments-form-select button:focus,
.payments-verify-input input:focus,
.payments-record-select-trigger:focus {
    outline: 0;
    border-color: #4c8ef7;
    box-shadow: 0 0 0 2px rgba(76, 142, 247, 0.12);
}

.payments-form-help {
    margin-top: 8px;
    color: #49618b;
    font-size: 14px;
    line-height: 1.55;
}

.payments-form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
    color: #7f8797;
    font-size: 15px;
}

.payments-form-checkbox input {
    margin-top: 3px;
    accent-color: #4c8ef7;
}

.payments-inline-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.payments-form-select {
    position: relative;
}

.payments-form-select button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.payments-form-select.is-open button {
    border-color: #4c8ef7;
    box-shadow: 0 0 0 2px rgba(76, 142, 247, 0.12);
}

.payments-select-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    border: 1px solid #cfd8ea;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
    overflow: hidden;
    z-index: 8;
}

.payments-select-dropdown[hidden] {
    display: none;
}

.payments-select-dropdown--scroll {
    max-height: 300px;
    overflow: auto;
}

.payments-select-option {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 16px;
    border: 0;
    background: #fff;
    color: #20314a;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.payments-select-option:hover {
    background: #f6f8fc;
}

.payments-select-option.is-selected {
    background: #3567d9;
    color: #fff;
    font-weight: 700;
}

.payments-select-option.is-highlight {
    background: #e9edf7;
}

.payments-select-option i {
    opacity: 0;
}

.payments-select-option.is-selected i {
    opacity: 1;
}

.payments-profile-divider {
    height: 1px;
    margin: 32px 0 28px;
    background: #e7edf5;
}

.payments-profile-section {
    margin-top: 10px;
}

.payments-profile-section h2 {
    margin: 0 0 10px;
    color: #183058;
    font-size: 22px;
}

.payments-profile-section > p {
    margin: 0 0 28px;
    color: #33486d;
    font-size: 16px;
    line-height: 1.7;
}

.payments-form-note-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}

.payments-form-note-link i {
    font-size: 14px;
}

.payments-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.payments-field-head label {
    margin-bottom: 0;
}

.payments-input-shell--static {
    grid-template-columns: 1fr 32px;
    background: #f3f6fd;
}

.payments-input-shell--static input {
    background: transparent;
}

.payments-input-shell--static span {
    border-right: 0;
    border-left: 1px solid #d8dfeb;
}

.payments-input-shell--phone {
    grid-template-columns: 36px minmax(0, 1fr);
}

.payments-input-shell--phone input {
    padding-left: 12px;
}

.payments-chip-add {
    min-height: 50px;
    border: 1px dashed #d4dcef;
    border-radius: 12px;
    background: #fff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
}

.payments-chip-add i {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #eaf3ff;
    display: grid;
    place-items: center;
}

.payments-upload-grid {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 18px 28px;
    align-items: center;
}

.payments-upload-grid + .payments-upload-grid {
    margin-top: 18px;
}

.payments-upload-grid label {
    color: #1d3156;
    font-size: 16px;
}

.payments-upload-box {
    min-height: 52px;
    border: 1px dashed #c7d4ea;
    border-radius: 14px;
    background: #fff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 18px;
}

.payments-upload-box i {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #eaf3ff;
    display: grid;
    place-items: center;
}

.payments-upload-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    color: #2563eb;
    font-size: 16px;
    text-decoration: none;
}

.payments-upload-more i {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #eaf3ff;
    display: grid;
    place-items: center;
}

.payments-required-note {
    margin-top: 24px;
    color: #1d3156;
    font-size: 14px;
}

.payments-card-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 34px;
}

.payments-save-next {
    min-height: 46px;
    padding: 0 26px;
    border: 1px solid #2f64df;
    border-radius: 12px;
    background: #2f64df;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.payments-onboarding-overlay {
    position: absolute;
    inset: 0;
    background: rgba(55, 65, 81, 0.55);
    display: grid;
    place-items: center;
    padding: 18px;
}

.payments-onboarding-overlay[hidden] {
    display: none;
}

.payments-onboarding-panel-inner {
    position: relative;
}

.payments-inline-modal {
    width: min(730px, calc(100vw - 48px));
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 26px 80px rgba(15, 23, 42, 0.24);
    overflow: hidden;
}

.payments-inline-modal--wide {
    width: min(860px, calc(100vw - 48px));
}

.payments-inline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 30px;
    border-bottom: 1px solid #e9edf5;
}

.payments-inline-head h2 {
    margin: 0;
    color: #1a2e4f;
    font-size: 24px;
}

.payments-inline-body {
    padding: 30px;
}

.payments-info-box,
.payments-success-box {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 16px;
    padding: 22px 24px;
    border-radius: 14px;
    margin-bottom: 16px;
}

.payments-info-box {
    background: #f5f8ff;
    color: #31518e;
}

.payments-success-box {
    background: #ecfbf5;
    color: #235b47;
}

.payments-info-box i,
.payments-success-box i {
    margin-top: 4px;
}

.payments-success-pill {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid #d4e7dd;
    border-radius: 10px;
    background: #fff;
    color: #255944;
    font-weight: 700;
}

.payments-record-select {
    position: relative;
    margin-top: 28px;
}

.payments-record-select label {
    display: block;
    margin-bottom: 10px;
    color: #36455f;
    font-size: 16px;
}

.payments-record-select-trigger {
    width: 100%;
    min-height: 54px;
    padding: 0 16px;
    border: 1px solid #d8dfeb;
    border-radius: 10px;
    background: #fff;
    color: #7a849b;
    font: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.payments-record-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    border: 1px solid #d8dfeb;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
    overflow: hidden;
    z-index: 4;
}

.payments-record-dropdown[hidden] {
    display: none;
}

.payments-record-option {
    width: 100%;
    padding: 18px 20px;
    border: 0;
    background: #fff;
    color: #3a465b;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.payments-record-option:hover {
    background: #f7f9fd;
}

.payments-inline-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 22px 30px 30px;
    border-top: 1px solid #e9edf5;
}

.payments-blue-btn,
.payments-outline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 28px;
    border-radius: 12px;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
}

.payments-blue-btn {
    border: 1px solid #2f64df;
    background: #2f64df;
    color: #fff;
    font-weight: 700;
}

.payments-outline-btn {
    border: 1px solid #d6dce8;
    background: #fff;
    color: #2f3b52;
}

.payments-verify-copy {
    margin: 0 0 18px;
    color: #7383a2;
    font-size: 16px;
    line-height: 1.6;
}

.payments-choice-row {
    display: flex;
    align-items: center;
    gap: 28px;
    margin: 14px 0 24px;
}

.payments-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #2e3b52;
    font-size: 16px;
}

.payments-verify-input label {
    display: block;
    margin-bottom: 10px;
    color: #36455f;
    font-size: 16px;
}

.payments-verify-input label .required {
    color: #ff5d5d;
}

.payments-input-shell {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    border: 1px solid #d8dfeb;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.payments-input-shell span {
    display: grid;
    place-items: center;
    color: #9aa5bb;
    background: #fff;
    border-right: 1px solid #d8dfeb;
}

.payments-verify-input input {
    width: 100%;
    min-height: 52px;
    padding: 0 14px;
    border: 0;
    color: #22324a;
    font: inherit;
}

.payments-verify-note {
    margin-top: 10px;
    color: #55698f;
    font-size: 14px;
    line-height: 1.55;
}

.payments-verify-agree {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    margin-top: 24px;
    color: #44536f;
    font-size: 15px;
    line-height: 1.55;
}

.payments-verify-agree i {
    color: #8f9ab1;
    margin-top: 4px;
}

.payments-step-page[hidden] {
    display: none;
}

.payments-step-done {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: #20b26b;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.payments-upload-chip-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px 14px;
    border-radius: 12px;
    background: #f3f5fb;
}

.payments-upload-chip-row[hidden] {
    display: none;
}

.payments-upload-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fff;
    color: #2f3b52;
    font-size: 15px;
}

.payments-upload-chip span {
    overflow: hidden;
    max-width: 220px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payments-upload-chip i {
    color: #46b8cf;
}

.payments-upload-chip-delete {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #8f9ab1;
    font-size: 18px;
    cursor: pointer;
}

.payments-url-display {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 16px;
    border-radius: 10px;
    background: #eef2fb;
    color: #4a5c7c;
}

.payments-url-display[hidden] {
    display: none;
}

.payments-url-display span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payments-url-display button {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #2f64df;
    font-size: 18px;
    cursor: pointer;
}

.payments-form-error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: #c03d53;
    font-size: 14px;
}

.payments-form-error[hidden] {
    display: none;
}

.payments-policy-card,
.payments-fulfillment-card {
    background: #fff;
    border: 1px solid #edf1f7;
    border-radius: 22px;
    padding: 38px 40px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.04);
}

.payments-policy-grid,
.payments-fulfillment-grid,
.payments-description-grid,
.payments-upload-review-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 48px;
}

.payments-radio-row {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 18px 0 18px;
}

.payments-radio-row label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #22324a;
    font-size: 15px;
}

.payments-inline-form-field label {
    display: block;
    margin-bottom: 10px;
    color: #36455f;
    font-size: 16px;
}

.payments-url-input-shell {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    border: 1px solid #2f64df;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.payments-url-input-shell span {
    display: grid;
    place-items: center;
    color: #a5b1c8;
    border-right: 1px solid #d8dfeb;
}

.payments-url-input-shell input,
.payments-description-form textarea {
    width: 100%;
    border: 0;
    color: #22324a;
    font: inherit;
}

.payments-url-input-shell input {
    min-height: 54px;
    padding: 0 16px;
}

.payments-description-form textarea {
    min-height: 112px;
    padding: 16px 14px;
    border: 1px solid #d8dfeb;
    border-radius: 12px;
    resize: vertical;
}

.payments-description-preview {
    min-height: 100%;
    padding: 26px 28px;
    background: #f6f8fd;
    border-left: 1px solid #e6ecf5;
}

.payments-preview-card {
    margin-top: 18px;
    padding: 24px 20px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    color: #4c5d7c;
    font-size: 18px;
    line-height: 1.75;
}

.payments-preview-card em {
    color: #8a97b3;
    font-style: italic;
    text-decoration: underline;
}

.payments-preview-foot {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
    padding-top: 18px;
    color: #6f7f9f;
    font-size: 14px;
}

.payments-doc-panel {
    border: 1px dashed #d6dfeb;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
}

.payments-doc-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: #f5f8fe;
    color: #2e3b52;
    font-size: 15px;
}

.payments-doc-head.is-complete {
    background: #eafaf1;
}

.payments-doc-head.is-pending {
    background: #f7f9fd;
}

.payments-doc-head .step {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    color: #2e3b52;
    font-size: 13px;
}

.payments-doc-head .accent {
    color: #ff6b43;
}

.payments-doc-dropzone {
    display: grid;
    place-items: center;
    min-height: 248px;
    padding: 22px;
    text-align: center;
    color: #607396;
}

.payments-doc-dropzone i {
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: #eef4ff;
    color: #2f64df;
    font-size: 34px;
}

.payments-doc-preview {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 248px;
    padding: 20px;
}

.payments-doc-preview::before {
    content: '';
    width: 76px;
    height: 124px;
    border-radius: 8px;
    background: linear-gradient(180deg, #f9fbff 0%, #eef3fb 100%);
    box-shadow: 0 18px 40px rgba(47, 100, 223, 0.12);
}

.payments-doc-actions {
    position: absolute;
    bottom: 28px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
    border-radius: 12px;
    background: #20324b;
    color: #fff;
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.22);
}

.payments-bank-card,
.payments-summary-card {
    background: #fff;
    border: 1px solid #edf1f7;
    border-radius: 22px;
    padding: 28px 40px 34px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.04);
}

.payments-mfa-alert {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    padding: 18px 20px;
    border-radius: 16px;
    background: #fff7ec;
}

.payments-mfa-copy {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 14px;
}

.payments-mfa-copy i {
    color: #f97316;
    margin-top: 4px;
}

.payments-mfa-copy strong {
    display: block;
    margin-bottom: 6px;
    color: #8a4308;
    font-size: 16px;
}

.payments-mfa-copy p {
    margin: 0;
    color: #6b4b2b;
    font-size: 15px;
    line-height: 1.55;
}

.payments-mfa-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    background: #2e6be6;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.payments-bank-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 60px;
}

.payments-field-error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: #d64545;
    font-size: 14px;
}

.payments-field-error[hidden] {
    display: none;
}

.payments-inline-input {
    width: 100%;
    min-height: 54px;
    padding: 0 16px;
    border: 1px solid #d4dceb;
    border-radius: 12px;
    background: #fff;
    color: #22324a;
    font: inherit;
}

.payments-inline-input:focus {
    outline: 0;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.payments-inline-input.is-invalid,
.payments-input-shell.is-invalid {
    border-color: #ef4444;
}

.payments-summary-section + .payments-summary-section {
    margin-top: 18px;
}

.payments-summary-block {
    border: 1px solid #edf1f7;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
}

.payments-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 28px;
}

.payments-summary-head strong {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #1d2a44;
    font-size: 18px;
}

.payments-summary-head i {
    color: #7f8dab;
}

.payments-summary-edit {
    border: 0;
    background: transparent;
    color: #2563eb;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
}

.payments-summary-divider {
    border-top: 1px solid #edf1f7;
}

.payments-summary-grid {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 22px 80px;
    padding: 28px;
}

.payments-summary-grid dt {
    color: #42506a;
    font-size: 15px;
}

.payments-summary-grid dd {
    margin: 0;
    color: #172554;
    font-size: 15px;
    line-height: 1.55;
    word-break: break-word;
}

.payments-summary-files {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.payments-summary-file {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #dce5f3;
    border-radius: 10px;
    background: #fff;
    color: #334155;
    font-size: 14px;
}

.payments-summary-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
    color: #243145;
    font-size: 15px;
}

.payments-summary-check input {
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.payments-summary-check a {
    color: #2563eb;
    text-decoration: none;
}

.payments-summary-submit-error {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    color: #d64545;
    font-size: 14px;
}

.payments-summary-submit-error[hidden] {
    display: none;
}

.payments-doc-actions button {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 20px;
    cursor: pointer;
}

.payments-doc-actions .divider {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.26);
}

.payments-review-checks {
    display: grid;
    gap: 20px;
}

.payments-review-card {
    padding: 18px 24px;
    border: 1px solid #d9e2ef;
    border-radius: 14px;
    background: #fff;
}

.payments-review-card dl {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 12px 36px;
    margin: 0;
    color: #36455f;
    font-size: 16px;
}

.payments-review-card dt,
.payments-review-card dd {
    margin: 0;
}

.payments-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    color: #2563eb;
    font-size: 15px;
    text-decoration: none;
}

.payments-doc-error {
    margin-top: 16px;
    color: #c03d53;
    font-size: 14px;
}

@media (max-width: 900px) {
    .payments-app-shell {
        width: min(100%, calc(100% - 36px));
    }

    .payments-app-hero-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-left: 18px;
        padding-right: 18px;
    }

    .payments-app-copy,
    .payments-fee-card {
        justify-self: stretch;
        max-width: none;
    }

    .payments-app-intro {
        margin-left: 0;
    }

    .payments-benefit-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .payments-benefit-card {
        min-height: 0;
    }

    .payments-benefit-card:last-child {
        grid-column: auto;
    }

    .payments-support-issue,
    .payments-support-foot {
        grid-template-columns: 1fr;
        display: grid;
    }

    .payments-support-foot {
        justify-content: stretch;
    }

    .payments-support-helpline {
        text-align: left;
    }

    .payments-onboarding-layout,
    .payments-profile-grid,
    .payments-inline-two,
    .payments-upload-grid,
    .payments-bank-grid,
    .payments-policy-grid,
    .payments-fulfillment-grid,
    .payments-description-grid,
    .payments-upload-review-body,
    .payments-summary-grid {
        grid-template-columns: 1fr;
    }

    .payments-onboarding-sidebar {
        min-height: 0;
    }

    .payments-onboarding-helpline {
        text-align: left;
        margin-top: 12px;
    }

    .payments-onboarding-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .payments-mfa-alert {
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    .payments-app-banner {
        align-items: flex-start;
        flex-wrap: wrap;
        justify-content: flex-start;
        text-align: left;
    }

    .payments-app-banner button {
        margin-left: 0;
    }

    .payments-fee-card {
        padding: 20px 18px 22px;
    }

    .payments-fee-row {
        grid-template-columns: 1fr;
    }

    .payments-fee-rate {
        border-right: 0;
        border-bottom: 1px solid #e1e7ef;
    }

    .payments-app-benefits {
        padding-left: 18px;
        padding-right: 18px;
    }

    .payments-app-intro,
    .payments-app-intro p,
    .payments-app-copy p,
    .payments-benefit-card p {
        font-size: 16px;
    }

    .payments-modal {
        width: calc(100vw - 20px);
    }

    .payments-modal-head,
    .payments-support-body,
    .payments-support-foot,
    .payments-recording-body,
    .payments-recording-foot {
        padding-left: 16px;
        padding-right: 16px;
    }

    .payments-support-issue {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .payments-inline-modal,
    .payments-inline-modal--wide {
        width: calc(100vw - 20px);
    }

    .payments-inline-head,
    .payments-inline-body,
    .payments-inline-foot {
        padding-left: 16px;
        padding-right: 16px;
    }

    .payments-choice-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .payments-field-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .payments-policy-card,
    .payments-fulfillment-card,
    .payments-bank-card,
    .payments-summary-card {
        padding: 24px 18px;
    }

    .payments-upload-chip-row {
        flex-wrap: wrap;
    }

    .payments-upload-chip span {
        max-width: 160px;
    }

    .payments-description-preview {
        border-left: 0;
        border-top: 1px solid #e6ecf5;
    }

    .payments-summary-head,
    .payments-summary-grid {
        padding-left: 18px;
        padding-right: 18px;
    }
}
</style>
</head>
<body>
<div class="dashboard-shell customer-shell">
    <?php include dirname(__DIR__) . '/includes/app_sidebar.php'; ?>
    <div class="dashboard-main customer-main">
        <?php include dirname(__DIR__) . '/includes/topbar.php'; ?>
        <main class="customer-views-page">
            <section class="payments-app-page">
                <div class="payments-app-banner" data-payments-banner>
                    <span>Planned India Data Center Maintenance on 10th May 2026 and 17th May 2026, between 06.30AM to 09.30AM IST.</span>
                    <a href="#">Know more</a>
                    <button type="button" data-payments-banner-close>Don't show again</button>
                </div>

                <div class="payments-app-shell">
                    <section class="payments-app-hero">
                        <div class="payments-app-hero-grid">
                            <div class="payments-app-copy">
                                <div class="payments-app-logo">
                                    <span class="payments-app-logo-mark"><i class="fa-regular fa-gem"></i></span>
                                    <span class="payments-app-logo-copy">
                                        <small>Zoho</small>
                                        <strong>Payments</strong>
                                    </span>
                                </div>
                                <h1>Introducing Zoho Payments</h1>
                                <p>A unified payments solution built to work effortlessly with your business apps so you can manage payments securely and seamlessly.</p>
                                <div class="payments-app-actions">
                                    <button class="payments-hero-btn is-primary" type="button" data-payments-setup-open>Set Up Now</button>
                                    <button class="payments-hero-btn" type="button" data-payments-support-open>Contact Us</button>
                                </div>
                            </div>

                            <aside class="payments-fee-card" aria-label="Platform fee">
                                <h2>Platform Fee</h2>
                                <svg class="payments-fee-accent" viewBox="0 0 160 10" aria-hidden="true">
                                    <path d="M1 8C35 2 74 1 159 8" fill="none" stroke="#f2a33b" stroke-width="2" stroke-linecap="round"></path>
                                </svg>
                                <div class="payments-fee-box">
                                    <?php foreach ($paymentFeeRows as $row): ?>
                                        <div class="payments-fee-row">
                                            <div class="payments-fee-rate">
                                                <strong><?php echo billing_escape($row['rate']); ?></strong>
                                                <span><?php echo billing_escape($row['caption']); ?></span>
                                            </div>
                                            <div class="payments-fee-methods">
                                                <?php foreach ($row['methods'] as $method): ?>
                                                    <div class="payments-fee-method <?php echo billing_escape($method['class']); ?>">
                                                        <i class="<?php echo billing_escape($method['icon']); ?>"></i>
                                                        <span><?php echo billing_escape($method['label']); ?></span>
                                                    </div>
                                                <?php endforeach; ?>
                                            </div>
                                        </div>
                                    <?php endforeach; ?>
                                </div>
                                <div class="payments-fee-note">
                                    <strong>Note:</strong> 18% GST applies to platform fees as per GST regulations.<br>
                                    <a href="#">More Details</a>
                                </div>
                            </aside>
                        </div>
                    </section>

                    <section class="payments-app-benefits">
                        <div class="payments-app-intro">
                            <h1>Why should you use Zoho Payments?</h1>
                            <p>There are benefits to choosing a unified payment solution over a third-party solution:</p>
                        </div>

                        <section class="payments-benefit-grid" aria-label="Zoho Payments benefits">
                            <?php foreach ($benefits as $benefit): ?>
                                <article class="payments-benefit-card">
                                    <div class="payments-benefit-icon"><i class="<?php echo billing_escape($benefit['icon']); ?>"></i></div>
                                    <h2><?php echo billing_escape($benefit['title']); ?></h2>
                                    <p><?php echo billing_escape($benefit['copy']); ?></p>
                                </article>
                            <?php endforeach; ?>
                        </section>
                    </section>

                    <div class="payments-app-footer">
                        Zoho Payments is built and owned by Zoho Payment Technologies Pvt Ltd, a subsidiary of Zoho Corporation Pvt Ltd.
                    </div>
                </div>
            </section>
            <section class="payments-onboarding" data-payments-onboarding hidden>
                <div class="payments-app-banner" data-payments-onboarding-banner>
                    <span>Planned India Data Center Maintenance on 10th May 2026 and 17th May 2026, between 06.30AM to 09.30AM IST.</span>
                    <a href="#">Know more</a>
                    <button type="button" data-payments-onboarding-banner-close>Don't show again</button>
                </div>

                <div class="payments-onboarding-layout">
                    <aside class="payments-onboarding-sidebar">
                        <h3>Organization Settings</h3>
                        <nav class="payments-onboarding-nav">
                            <?php foreach ($settingsGroups['organization'] as $label): ?>
                                <a class="payments-onboarding-link" href="#"><i class="fa-solid fa-angle-right"></i><span><?php echo billing_escape($label); ?></span></a>
                            <?php endforeach; ?>
                        </nav>

                        <h3>Module Settings</h3>
                        <nav class="payments-onboarding-nav">
                            <?php foreach ($settingsGroups['module'] as $label): ?>
                                <?php if ($label === 'Online Payments'): ?>
                                    <a class="payments-onboarding-link is-group" href="#"><i class="fa-solid fa-angle-down"></i><span><?php echo billing_escape($label); ?></span></a>
                                    <a class="payments-onboarding-link is-active" href="#"><span>Payment Gateways</span></a>
                                <?php else: ?>
                                    <a class="payments-onboarding-link" href="#"><i class="fa-solid fa-angle-right"></i><span><?php echo billing_escape($label); ?></span></a>
                                <?php endif; ?>
                            <?php endforeach; ?>
                        </nav>
                    </aside>

                    <section class="payments-onboarding-panel">
                        <div class="payments-onboarding-top">
                            <div class="payments-onboarding-brand">
                                <span class="payments-app-logo-mark"><i class="fa-regular fa-gem"></i></span>
                                <div><strong>Zoho</strong><span>Payments</span></div>
                            </div>

                            <div class="payments-stepper">
                                <i class="fa-solid fa-caret-left payments-step-arrow"></i>
                                <div class="payments-step-item is-active">1</div>
                                <div class="payments-step-label">Business Profile</div>
                                <div class="payments-step-divider"></div>
                                <div class="payments-step-item">2</div>
                                <div class="payments-step-divider"></div>
                                <div class="payments-step-item">3</div>
                                <div class="payments-step-divider"></div>
                                <div class="payments-step-item">4</div>
                                <div class="payments-step-divider"></div>
                                <div class="payments-step-item">5</div>
                                <i class="fa-solid fa-caret-right payments-step-arrow"></i>
                            </div>

                            <button class="payments-onboarding-close" type="button" data-payments-onboarding-close>&times;</button>
                        </div>

                        <div class="payments-onboarding-content">
                            <div class="payments-onboarding-helpline">
                                <div>Zoho Payments Helpline : <strong>1800 309 8845</strong></div>
                                <div>Mon - Fri : 9:00 AM - 7:00 PM Â· Toll Free</div>
                            </div>

                            <div class="payments-step-page" data-payments-step-page="1">
                            <div class="payments-welcome-box">
                                <div class="payments-welcome-title"><i class="fa-solid fa-circle-info"></i><span>Welcome to Zoho Payments, balachandar k!</span></div>
                                <p>Ready to simplify payment collection? Fill in the details below so we can get you started! These details help us create your account and ensures that it's compliant with the RBI regulations.</p>
                            </div>

                            <div class="payments-profile-wrap">
                                <h1>Business Profile</h1>
                                <p>Provide basic details about your business. Ensure that the information you provide matches the legal documents of your business.</p>

                                <div class="payments-profile-card">
                                    <div class="payments-profile-grid">
                                        <div class="payments-form-field">
                                            <label for="paymentsBusinessPan">Business PAN<span class="required">*</span></label>
                                            <input class="payments-form-input" id="paymentsBusinessPan" type="text" value="AAAAA0000A">
                                            <div class="payments-form-help">For individuals or sole proprietors, enter your personal PAN.</div>
                                        </div>

                                        <div class="payments-form-field">
                                            <label for="paymentsBusinessType">Business Type<span class="required">*</span></label>
                                            <div class="payments-form-select" data-payments-select="businessType">
                                                <button id="paymentsBusinessType" type="button" data-payments-select-trigger="businessType">
                                                    <span data-payments-business-type-text>Individual</span>
                                                    <i class="fa-solid fa-angle-down"></i>
                                                </button>
                                                <div class="payments-select-dropdown payments-select-dropdown--scroll" data-payments-select-menu="businessType" hidden>
                                                    <?php foreach ($businessTypes as $index => $type): ?>
                                                        <button class="payments-select-option <?php echo $index === 0 ? 'is-selected' : ''; ?> <?php echo $index === 1 ? 'is-highlight' : ''; ?>" type="button" data-payments-select-option="businessType" data-value="<?php echo billing_escape($type); ?>">
                                                            <span><?php echo billing_escape($type); ?></span>
                                                            <i class="fa-solid fa-check"></i>
                                                        </button>
                                                    <?php endforeach; ?>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="payments-form-field">
                                            <label for="paymentsGstin">Goods and Services Tax Identification Number (GSTIN)</label>
                                            <input class="payments-form-input" id="paymentsGstin" type="text" value="00 AAAAA0000A 0Z0">
                                        </div>

                                        <div class="payments-form-field">
                                            <label for="paymentsTradeName">Trade Name<span class="required">*</span></label>
                                            <input class="payments-form-input" id="paymentsTradeName" type="text" value="">
                                            <label class="payments-form-checkbox"><input type="checkbox"><span>My trade name is the same as my business name.</span></label>
                                        </div>

                                        <div class="payments-form-field">
                                            <label for="paymentsBusinessName">Business Name<span class="required">*</span></label>
                                            <input class="payments-form-input" id="paymentsBusinessName" type="text" value="Zylker">
                                            <div class="payments-form-help">The name must match the <strong>Legal Name on your GST Certificate.</strong> If you are not registered for GST, enter the name as it appears on your <strong>Udyam Registration Certificate.</strong></div>
                                        </div>

                                        <div class="payments-form-field">
                                            <label for="paymentsTradeName">Trade Name<span class="required">*</span></label>
                                            <input class="payments-form-input" id="paymentsTradeNameSecond" type="text" value="">
                                            <label class="payments-form-checkbox"><input type="checkbox"><span>My trade name is the same as my business name.</span></label>
                                        </div>

                                        <div class="payments-form-field" style="grid-column: 1 / -1;">
                                            <label for="paymentsAddress1">Business Address<span class="required">*</span></label>
                                            <input class="payments-form-input" id="paymentsAddress1" type="text" placeholder="Building number and name, Street, Area">
                                        </div>

                                        <div class="payments-form-field" style="grid-column: 1 / -1;">
                                            <input class="payments-form-input" id="paymentsAddress2" type="text" placeholder="Address Line 2 (optional)">
                                        </div>

                                        <div class="payments-form-field" style="grid-column: 1 / -1;">
                                            <input class="payments-form-input" id="paymentsAddress3" type="text" placeholder="Address Line 3 (optional)">
                                        </div>

                                        <div class="payments-form-field">
                                            <div class="payments-form-select" data-payments-select="country">
                                                <button id="paymentsCountry" type="button" data-payments-select-trigger="country">
                                                    <span data-payments-country-text>India</span>
                                                    <i class="fa-solid fa-angle-down"></i>
                                                </button>
                                                <div class="payments-select-dropdown" data-payments-select-menu="country" hidden>
                                                    <button class="payments-select-option is-selected" type="button" data-payments-select-option="country" data-value="India">
                                                        <span>India</span>
                                                        <i class="fa-solid fa-check"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="payments-form-field">
                                            <div class="payments-form-select" data-payments-select="state">
                                                <button id="paymentsState" type="button" data-payments-select-trigger="state">
                                                    <span data-payments-state-text>State</span>
                                                    <i class="fa-solid fa-angle-down"></i>
                                                </button>
                                                <div class="payments-select-dropdown payments-select-dropdown--scroll" data-payments-select-menu="state" hidden>
                                                    <?php foreach ($states as $index => $state): ?>
                                                        <button class="payments-select-option <?php echo $index === 0 ? 'is-highlight' : ''; ?>" type="button" data-payments-select-option="state" data-value="<?php echo billing_escape($state); ?>">
                                                            <span><?php echo billing_escape($state); ?></span>
                                                            <i class="fa-solid fa-check"></i>
                                                        </button>
                                                    <?php endforeach; ?>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="payments-form-field">
                                            <input class="payments-form-input" id="paymentsCity" type="text" placeholder="Town / City">
                                        </div>

                                        <div class="payments-form-field">
                                            <input class="payments-form-input" id="paymentsPin" type="text" placeholder="PIN Code">
                                        </div>

                                        <div class="payments-form-field">
                                            <label for="paymentsBusinessPhone">Business Phone Number<span class="required">*</span></label>
                                            <div class="payments-input-shell payments-input-shell--phone">
                                                <span><i class="fa-solid fa-mobile-screen-button"></i></span>
                                                <input id="paymentsBusinessPhone" type="text" value="IN (+91)   98765 43210">
                                            </div>
                                            <div class="payments-form-help">If there's no business phone number, provide the contact person's phone number instead.</div>
                                        </div>

                                        <div class="payments-form-field">
                                            <label for="paymentsSupportHelpline">Customer Support Helpline<span class="required">*</span> <i class="fa-solid fa-circle-info" style="color:#8f9ab1;"></i></label>
                                            <input class="payments-form-input" id="paymentsSupportHelpline" type="text" placeholder="Mobile / Landline Number">
                                            <div class="payments-form-help">For the landline number, include the STD code. The number you provide here should match the one displayed on your website.</div>
                                        </div>

                                        <div class="payments-form-field">
                                            <label for="paymentsIndustry">Industry<span class="required">*</span></label>
                                            <div class="payments-form-select" data-payments-select="industry">
                                                <button id="paymentsIndustry" type="button" data-payments-select-trigger="industry">
                                                    <span data-payments-industry-text>Select your industry</span>
                                                    <i class="fa-solid fa-angle-down"></i>
                                                </button>
                                                <div class="payments-select-dropdown payments-select-dropdown--scroll" data-payments-select-menu="industry" hidden>
                                                    <?php foreach ($industryOptions as $index => $industry): ?>
                                                        <button class="payments-select-option <?php echo $index === 0 ? 'is-selected' : ''; ?>" type="button" data-payments-select-option="industry" data-value="<?php echo billing_escape($industry); ?>">
                                                            <span><?php echo billing_escape($industry); ?></span>
                                                            <i class="fa-solid fa-check"></i>
                                                        </button>
                                                    <?php endforeach; ?>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="payments-form-field">
                                            <div class="payments-field-head">
                                                <label for="paymentsWebsite">Business Website<span class="required">*</span></label>
                                                <a class="payments-form-note-link" href="#">View Website Requirements <i class="fa-solid fa-arrow-up-right-from-square"></i></a>
                                            </div>
                                            <button class="payments-chip-add" id="paymentsWebsite" type="button" data-payments-website-open><i class="fa-solid fa-plus"></i><span>Add URL</span></button>
                                            <div class="payments-url-display" data-payments-website-display hidden>
                                                <span data-payments-website-value>https://subscriptions.zoho.in/app/60066681652#/s...</span>
                                                <button type="button" data-payments-website-open aria-label="Edit website URL"><i class="fa-regular fa-pen-to-square"></i></button>
                                            </div>
                                        </div>

                                        <div class="payments-form-field">
                                            <div class="payments-field-head">
                                                <label for="paymentsDescription">Business Description<span class="required">*</span></label>
                                                <a class="payments-form-note-link" href="#">Learn What To Include <i class="fa-solid fa-arrow-up-right-from-square"></i></a>
                                            </div>
                                            <button class="payments-chip-add" id="paymentsDescription" type="button" data-payments-description-open><i class="fa-solid fa-plus"></i><span>Add Details</span></button>
                                            <div class="payments-form-error" data-payments-description-error hidden><i class="fa-solid fa-triangle-exclamation"></i><span>Please add details to generate business description.</span></div>
                                        </div>
                                    </div>

                                    <div class="payments-profile-divider"></div>

                                    <section class="payments-profile-section">
                                        <h2>Anticipated Transaction Values</h2>
                                        <p>Share an estimated value for the amounts you expect to transact through Zoho Payments.</p>
                                        <div class="payments-profile-grid">
                                            <div class="payments-form-field">
                                                <label for="paymentsTurnover">Annual Turnover<span class="required">*</span></label>
                                                <input class="payments-form-input" id="paymentsTurnover" type="text" value="â‚¹">
                                            </div>

                                            <div class="payments-form-field">
                                                <label for="paymentsTxnPerDay">Average Number of Transactions Per Day<span class="required">*</span></label>
                                                <input class="payments-form-input" id="paymentsTxnPerDay" type="text" value="">
                                            </div>

                                            <div class="payments-form-field">
                                                <label for="paymentsTxnAverage">Average Value Per Transaction<span class="required">*</span></label>
                                                <input class="payments-form-input" id="paymentsTxnAverage" type="text" value="â‚¹">
                                            </div>
                                        </div>
                                    </section>

                                    <div class="payments-profile-divider"></div>

                                    <section class="payments-profile-section">
                                        <h2>Upload any of the following documents (Optional) <i class="fa-solid fa-circle-info" style="color:#8f9ab1;font-size:18px;"></i></h2>
                                        <p>Each file must be under 20 MB in PDF, PNG, JPG, or JPEG formats.</p>
                                        <div class="payments-upload-grid">
                                            <label>GST Certificate</label>
                                            <div class="payments-upload-box"><i class="fa-solid fa-arrow-up"></i><span>Drop file here or <strong>Choose File</strong></span></div>
                                        </div>
                                        <a class="payments-upload-more" href="#"><i class="fa-solid fa-plus"></i><span>Add Another Document</span></a>
                                    </section>

                                    <div class="payments-profile-divider"></div>

                                    <section class="payments-profile-section">
                                        <h2>Business Representative</h2>
                                        <p>If the business is owned and controlled only by you, provide your details below. The information provided here should match with your legal documents.</p>
                                        <div class="payments-profile-grid">
                                            <div class="payments-form-field">
                                                <label for="paymentsFirstName">First Name<span class="required">*</span></label>
                                                <input class="payments-form-input" id="paymentsFirstName" type="text" value="">
                                            </div>

                                            <div class="payments-form-field">
                                                <label for="paymentsMiddleName">Middle Name</label>
                                                <input class="payments-form-input" id="paymentsMiddleName" type="text" value="">
                                            </div>

                                            <div class="payments-form-field">
                                                <label for="paymentsLastName">Last Name</label>
                                                <input class="payments-form-input" id="paymentsLastName" type="text" value="">
                                            </div>

                                            <div class="payments-form-field">
                                                <label for="paymentsRepEmail">Email<span class="required">*</span></label>
                                                <div class="payments-input-shell payments-input-shell--phone">
                                                    <span><i class="fa-regular fa-envelope"></i></span>
                                                    <input id="paymentsRepEmail" type="text" value="">
                                                </div>
                                            </div>

                                            <div class="payments-form-field">
                                                <label for="paymentsDob">Date of Birth<span class="required">*</span></label>
                                                <input class="payments-form-input" id="paymentsDob" type="text" placeholder="dd/mm/yyyy">
                                            </div>

                                            <div class="payments-form-field">
                                                <label for="paymentsRepPhone">Phone<span class="required">*</span></label>
                                                <div class="payments-input-shell payments-input-shell--phone">
                                                    <span><i class="fa-solid fa-mobile-screen-button"></i></span>
                                                    <input id="paymentsRepPhone" type="text" value="IN (+91)   98765 43210">
                                                </div>
                                            </div>

                                            <div class="payments-form-field" style="grid-column: 1 / -1;">
                                                <label for="paymentsResidential1">Residential Address<span class="required">*</span></label>
                                                <input class="payments-form-input" id="paymentsResidential1" type="text" placeholder="Building number and name, Street, Area">
                                                <div class="payments-form-help">Provide the address that matches your government-issued ID.</div>
                                            </div>

                                            <div class="payments-form-field" style="grid-column: 1 / -1;">
                                                <input class="payments-form-input" id="paymentsResidential2" type="text" placeholder="Address Line 2 (optional)">
                                            </div>

                                            <div class="payments-form-field" style="grid-column: 1 / -1;">
                                                <input class="payments-form-input" id="paymentsResidential3" type="text" placeholder="Address Line 3 (optional)">
                                            </div>

                                            <div class="payments-form-field">
                                                <div class="payments-form-select" data-payments-select="repCountry">
                                                    <button type="button" data-payments-select-trigger="repCountry">
                                                        <span data-payments-rep-country-text>India</span>
                                                        <i class="fa-solid fa-angle-down"></i>
                                                    </button>
                                                    <div class="payments-select-dropdown" data-payments-select-menu="repCountry" hidden>
                                                        <button class="payments-select-option is-selected" type="button" data-payments-select-option="repCountry" data-value="India">
                                                            <span>India</span>
                                                            <i class="fa-solid fa-check"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="payments-form-field">
                                                <div class="payments-form-select" data-payments-select="repState">
                                                    <button type="button" data-payments-select-trigger="repState">
                                                        <span data-payments-rep-state-text>State</span>
                                                        <i class="fa-solid fa-angle-down"></i>
                                                    </button>
                                                    <div class="payments-select-dropdown payments-select-dropdown--scroll" data-payments-select-menu="repState" hidden>
                                                        <?php foreach ($states as $index => $state): ?>
                                                            <button class="payments-select-option <?php echo $index === 0 ? 'is-highlight' : ''; ?>" type="button" data-payments-select-option="repState" data-value="<?php echo billing_escape($state); ?>">
                                                                <span><?php echo billing_escape($state); ?></span>
                                                                <i class="fa-solid fa-check"></i>
                                                            </button>
                                                        <?php endforeach; ?>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="payments-form-field">
                                                <input class="payments-form-input" id="paymentsRepCity" type="text" placeholder="Town / City">
                                            </div>

                                            <div class="payments-form-field">
                                                <input class="payments-form-input" id="paymentsRepPin" type="text" placeholder="PIN Code">
                                            </div>

                                            <div class="payments-form-field">
                                                <label for="paymentsOwnership">Ownership Percentage<span class="required">*</span></label>
                                                <div class="payments-input-shell payments-input-shell--static">
                                                    <input id="paymentsOwnership" type="text" value="100" readonly>
                                                    <span>%</span>
                                                </div>
                                                <div class="payments-form-help">As you're the sole owner of your business, the ownership is set to 100% by default.</div>
                                            </div>
                                        </div>
                                    </section>

                                    <div class="payments-profile-divider"></div>

                                    <section class="payments-profile-section">
                                        <h2>Upload documents<span class="required">*</span> <i class="fa-solid fa-circle-info" style="color:#8f9ab1;font-size:18px;"></i></h2>
                                        <p>Each file must be under 20 MB in PDF, PNG, JPG, or JPEG formats.</p>
                                        <div class="payments-upload-grid">
                                            <label>Personal PAN<span class="required">*</span></label>
                                            <button class="payments-upload-box" type="button" data-payments-pan-upload-open><i class="fa-solid fa-arrow-up"></i><span>Upload Document</span></button>
                                            <div class="payments-upload-chip-row" data-payments-pan-upload-row hidden>
                                                <div class="payments-upload-chip">
                                                    <i class="fa-regular fa-image"></i>
                                                    <span>Screenshot 2026-01-29 132336.png</span>
                                                </div>
                                                <button class="payments-upload-chip-delete" type="button" aria-label="Remove file"><i class="fa-regular fa-trash-can"></i></button>
                                            </div>
                                        </div>

                                        <h2 style="margin-top:26px;">Upload any one identity documents<span class="required">*</span></h2>
                                        <div class="payments-upload-grid">
                                            <label>Driving Licence</label>
                                            <button class="payments-upload-box" type="button" data-payments-identity-upload-open><i class="fa-solid fa-plus"></i><span>Upload Front and Back of Document</span></button>
                                            <div class="payments-upload-chip-row" data-payments-identity-upload-row hidden>
                                                <div class="payments-upload-chip">
                                                    <i class="fa-regular fa-image"></i>
                                                    <span>Screenshot 2026-01...</span>
                                                </div>
                                                <div class="payments-upload-chip">
                                                    <i class="fa-regular fa-image"></i>
                                                    <span>Screenshot 2026-01...</span>
                                                </div>
                                                <button class="payments-upload-chip-delete" type="button" aria-label="Remove files"><i class="fa-regular fa-trash-can"></i></button>
                                            </div>
                                        </div>
                                        <a class="payments-upload-more" href="#"><i class="fa-solid fa-plus"></i><span>Add Another Document</span></a>
                                    </section>

                                    <div class="payments-required-note"><span class="required">*</span> Indicates mandatory fields</div>

                                    <div class="payments-card-foot">
                                        <button class="payments-save-next" type="button" data-payments-step-next="2">Save and Next</button>
                                    </div>
                                </div>
                            </div>
                            </div>
                            </div>

                            <div class="payments-step-page" data-payments-step-page="2" hidden>
                                <div class="payments-profile-wrap">
                                    <h1>Business Policies</h1>
                                    <p>You can provide links or generate policies for your customers. These will be displayed to customers when they make a payment, so they know your terms in advance.</p>

                                    <div class="payments-policy-card">
                                        <div class="payments-policy-grid">
                                            <div class="payments-form-field">
                                                <label>Terms of Service<span class="required">*</span></label>
                                                <div class="payments-radio-row">
                                                    <label><input type="radio" name="paymentsTermsMode" checked> <span>Enter URL</span></label>
                                                    <label><input type="radio" name="paymentsTermsMode"> <span>Generate Template</span></label>
                                                </div>
                                                <button class="payments-chip-add" type="button" data-payments-website-open><i class="fa-solid fa-plus"></i><span>Add URL</span></button>
                                                <div class="payments-url-display" data-payments-policy-terms-display hidden>
                                                    <span>https://subscriptions.zoho.in/app/60066681652#/s...</span>
                                                    <button type="button" aria-label="Edit terms url"><i class="fa-regular fa-pen-to-square"></i></button>
                                                </div>
                                            </div>

                                            <div class="payments-form-field">
                                                <label>Refund and Cancellation Policy<span class="required">*</span></label>
                                                <div class="payments-radio-row">
                                                    <label><input type="radio" name="paymentsRefundMode" checked> <span>Enter URL</span></label>
                                                    <label><input type="radio" name="paymentsRefundMode"> <span>Generate Template</span></label>
                                                </div>
                                                <button class="payments-chip-add" type="button" data-payments-website-open><i class="fa-solid fa-plus"></i><span>Add URL</span></button>
                                                <div class="payments-url-display" data-payments-policy-refund-display hidden>
                                                    <span>https://subscriptions.zoho.in/app/60066681652#/s...</span>
                                                    <button type="button" aria-label="Edit refund url"><i class="fa-regular fa-pen-to-square"></i></button>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="payments-profile-divider"></div>
                                        <div class="payments-required-note"><span class="required">*</span> Indicates mandatory fields</div>

                                        <div class="payments-card-foot">
                                            <button class="payments-back-btn" type="button" data-payments-step-prev="1"><i class="fa-solid fa-angle-left"></i> Back</button>
                                            <button class="payments-save-next" type="button" data-payments-step-next="3">Save and Next</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="payments-step-page" data-payments-step-page="3" hidden>
                                <div class="payments-profile-wrap">
                                    <h1>Order Fulfillment</h1>
                                    <p>Provide details about the products you offer and how and when they're fulfilled to customers.</p>

                                    <div class="payments-fulfillment-card">
                                        <div class="payments-fulfillment-grid">
                                            <div class="payments-form-field">
                                                <label>Business Model<span class="required">*</span></label>
                                                <div class="payments-form-select" data-payments-select="businessModel">
                                                    <button type="button" data-payments-select-trigger="businessModel">
                                                        <span data-payments-business-model-text>B2B (Business-to-Business)</span>
                                                        <i class="fa-solid fa-angle-down"></i>
                                                    </button>
                                                    <div class="payments-select-dropdown" data-payments-select-menu="businessModel" hidden>
                                                        <button class="payments-select-option is-selected" type="button" data-payments-select-option="businessModel" data-value="B2B (Business-to-Business)">
                                                            <span>B2B (Business-to-Business)</span>
                                                            <i class="fa-solid fa-check"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="payments-form-field">
                                                <label>Product Type<span class="required">*</span></label>
                                                <div class="payments-form-select" data-payments-select="productType">
                                                    <button type="button" data-payments-select-trigger="productType">
                                                        <span data-payments-product-type-text>Goods</span>
                                                        <i class="fa-solid fa-angle-down"></i>
                                                    </button>
                                                    <div class="payments-select-dropdown" data-payments-select-menu="productType" hidden>
                                                        <button class="payments-select-option is-selected" type="button" data-payments-select-option="productType" data-value="Goods"><span>Goods</span><i class="fa-solid fa-check"></i></button>
                                                        <button class="payments-select-option" type="button" data-payments-select-option="productType" data-value="Services"><span>Services</span><i class="fa-solid fa-check"></i></button>
                                                        <button class="payments-select-option" type="button" data-payments-select-option="productType" data-value="Goods and Services"><span>Goods and Services</span><i class="fa-solid fa-check"></i></button>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="payments-form-field">
                                                <label>How do you deliver your goods?<span class="required">*</span></label>
                                                <div class="payments-form-select" data-payments-select="deliveryMethod">
                                                    <button type="button" data-payments-select-trigger="deliveryMethod">
                                                        <span data-payments-delivery-method-text>Choose the delivery method</span>
                                                        <i class="fa-solid fa-angle-down"></i>
                                                    </button>
                                                    <div class="payments-select-dropdown" data-payments-select-menu="deliveryMethod" hidden>
                                                        <?php foreach ($deliveryOptions as $option): ?>
                                                            <button class="payments-select-option" type="button" data-payments-select-option="deliveryMethod" data-value="<?php echo billing_escape($option); ?>">
                                                                <span><?php echo billing_escape($option); ?></span>
                                                                <i class="fa-solid fa-check"></i>
                                                            </button>
                                                        <?php endforeach; ?>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="payments-form-field">
                                                <label>When do customers receive their products?<span class="required">*</span></label>
                                                <div class="payments-form-select" data-payments-select="deliveryTime">
                                                    <button type="button" data-payments-select-trigger="deliveryTime">
                                                        <span data-payments-delivery-time-text>Choose an average time frame</span>
                                                        <i class="fa-solid fa-angle-down"></i>
                                                    </button>
                                                    <div class="payments-select-dropdown" data-payments-select-menu="deliveryTime" hidden>
                                                        <?php foreach ($timeframeOptions as $index => $option): ?>
                                                            <button class="payments-select-option <?php echo $index === 0 ? 'is-highlight' : ''; ?>" type="button" data-payments-select-option="deliveryTime" data-value="<?php echo billing_escape($option); ?>">
                                                                <span><?php echo billing_escape($option); ?></span>
                                                                <i class="fa-solid fa-check"></i>
                                                            </button>
                                                        <?php endforeach; ?>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="payments-profile-divider"></div>
                                        <div class="payments-required-note"><span class="required">*</span> Indicates mandatory fields</div>

                                        <div class="payments-card-foot">
                                            <button class="payments-back-btn" type="button" data-payments-step-prev="2"><i class="fa-solid fa-angle-left"></i> Back</button>
                                            <button class="payments-save-next" type="button" data-payments-step-next="4">Save and Next</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="payments-step-page" data-payments-step-page="4" hidden>
                                <div class="payments-profile-wrap">
                                    <h1>Bank Account</h1>
                                    <p>Provide the details of the bank account where you'd like us to deposit your payouts.</p>

                                    <div class="payments-mfa-alert">
                                        <div class="payments-mfa-copy">
                                            <i class="fa-solid fa-circle-exclamation"></i>
                                            <div>
                                                <strong>Secure your account with Multi-Factor Authentication (MFA)</strong>
                                                <p>To enhance your account security, set up MFA (except passkey) to proceed with Zoho Payments. MFA adds an extra layer of protection beyond your password, ensuring that only you can access your account.</p>
                                            </div>
                                        </div>
                                        <a class="payments-mfa-btn" href="https://accounts.zoho.in/home#multiTFA/modes" target="_blank" rel="noreferrer">
                                            <i class="fa-solid fa-shield-halved"></i>
                                            <span>Configure MFA</span>
                                        </a>
                                    </div>

                                    <div class="payments-bank-card">
                                        <div class="payments-bank-grid">
                                            <div class="payments-form-field">
                                                <label for="paymentsAccountNumber">Account Number<span class="required">*</span></label>
                                                <div class="payments-input-shell payments-input-shell--phone" data-payments-account-shell>
                                                    <input id="paymentsAccountNumber" type="password" value="">
                                                    <span><i class="fa-regular fa-eye-slash"></i></span>
                                                </div>
                                            </div>

                                            <div class="payments-form-field">
                                                <label for="paymentsConfirmAccountNumber">Confirm Account Number<span class="required">*</span></label>
                                                <input class="payments-inline-input" id="paymentsConfirmAccountNumber" type="text" value="">
                                                <div class="payments-field-error" data-payments-account-error hidden>
                                                    <i class="fa-solid fa-circle-exclamation"></i>
                                                    <span>Account numbers don't match</span>
                                                </div>
                                            </div>

                                            <div class="payments-form-field">
                                                <label for="paymentsIfsc">IFSC<span class="required">*</span></label>
                                                <input class="payments-inline-input" id="paymentsIfsc" type="text" value="">
                                            </div>
                                        </div>

                                        <div class="payments-profile-divider"></div>
                                        <div class="payments-required-note"><span class="required">*</span> Indicates mandatory fields</div>

                                        <div class="payments-card-foot">
                                            <button class="payments-back-btn" type="button" data-payments-step-prev="3"><i class="fa-solid fa-angle-left"></i> Back</button>
                                            <button class="payments-save-next" type="button" data-payments-step-next="5">Save and Next</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="payments-step-page" data-payments-step-page="5" hidden>
                                <div class="payments-profile-wrap">
                                    <h1>Review and Submit Account Details</h1>
                                    <p>Review the details provided and submit them for verification.</p>

                                    <div class="payments-mfa-alert">
                                        <div class="payments-mfa-copy">
                                            <i class="fa-solid fa-circle-exclamation"></i>
                                            <div>
                                                <strong>Secure your account with Multi-Factor Authentication (MFA)</strong>
                                                <p>To enhance your account security, set up MFA (except passkey) to proceed with Zoho Payments. MFA adds an extra layer of protection beyond your password, ensuring that only you can access your account.</p>
                                            </div>
                                        </div>
                                        <a class="payments-mfa-btn" href="https://accounts.zoho.in/home#multiTFA/modes" target="_blank" rel="noreferrer">
                                            <i class="fa-solid fa-shield-halved"></i>
                                            <span>Configure MFA</span>
                                        </a>
                                    </div>

                                    <div class="payments-summary-card">
                                        <section class="payments-summary-section">
                                            <div class="payments-summary-block">
                                                <div class="payments-summary-head">
                                                    <strong><i class="fa-regular fa-building"></i> Business Profile</strong>
                                                    <button class="payments-summary-edit" type="button" data-payments-step-jump="1">Edit</button>
                                                </div>
                                                <div class="payments-summary-divider"></div>
                                                <dl class="payments-summary-grid">
                                                    <dt>Business Type</dt>
                                                    <dd data-summary-business-type>Individual</dd>
                                                    <dt>Business Name</dt>
                                                    <dd data-summary-business-name>-</dd>
                                                    <dt>Trade Name</dt>
                                                    <dd data-summary-trade-name>-</dd>
                                                    <dt>GSTIN</dt>
                                                    <dd data-summary-gstin>-</dd>
                                                    <dt>Business Address</dt>
                                                    <dd data-summary-business-address>-</dd>
                                                    <dt>Business Phone Number</dt>
                                                    <dd data-summary-business-phone>-</dd>
                                                    <dt>Customer Support Helpline</dt>
                                                    <dd data-summary-support-helpline>-</dd>
                                                    <dt>Industry</dt>
                                                    <dd data-summary-industry>-</dd>
                                                    <dt>Business Website</dt>
                                                    <dd data-summary-website>-</dd>
                                                    <dt>Business Description</dt>
                                                    <dd data-summary-description>-</dd>
                                                </dl>
                                            </div>
                                        </section>

                                        <section class="payments-summary-section">
                                            <div class="payments-summary-block">
                                                <div class="payments-summary-head">
                                                    <strong><i class="fa-regular fa-user"></i> Business Representative</strong>
                                                    <button class="payments-summary-edit" type="button" data-payments-step-jump="1">Edit</button>
                                                </div>
                                                <div class="payments-summary-divider"></div>
                                                <dl class="payments-summary-grid">
                                                    <dt>First Name</dt>
                                                    <dd data-summary-first-name>-</dd>
                                                    <dt>Middle Name</dt>
                                                    <dd data-summary-middle-name>-</dd>
                                                    <dt>Last Name</dt>
                                                    <dd data-summary-last-name>-</dd>
                                                    <dt>Email</dt>
                                                    <dd data-summary-rep-email>-</dd>
                                                    <dt>Date of Birth</dt>
                                                    <dd data-summary-dob>-</dd>
                                                    <dt>Phone</dt>
                                                    <dd data-summary-rep-phone>-</dd>
                                                    <dt>Permanent Account Number (PAN)</dt>
                                                    <dd data-summary-pan>**********</dd>
                                                    <dt>Residential Address</dt>
                                                    <dd data-summary-residential-address>-</dd>
                                                    <dt>Personal PAN</dt>
                                                    <dd>
                                                        <div class="payments-summary-files">
                                                            <span class="payments-summary-file"><i class="fa-regular fa-image"></i> Screenshot 2026-01-29 132336.png</span>
                                                        </div>
                                                    </dd>
                                                    <dt>Driving Licence</dt>
                                                    <dd>
                                                        <div class="payments-summary-files">
                                                            <span class="payments-summary-file"><i class="fa-regular fa-image"></i> Screenshot 2026-01-front.png</span>
                                                            <span class="payments-summary-file"><i class="fa-regular fa-image"></i> Screenshot 2026-01-back.png</span>
                                                        </div>
                                                    </dd>
                                                </dl>
                                            </div>
                                        </section>

                                        <section class="payments-summary-section">
                                            <div class="payments-summary-block">
                                                <div class="payments-summary-head">
                                                    <strong><i class="fa-regular fa-file-lines"></i> Business Policies</strong>
                                                    <button class="payments-summary-edit" type="button" data-payments-step-jump="2">Edit</button>
                                                </div>
                                                <div class="payments-summary-divider"></div>
                                                <dl class="payments-summary-grid">
                                                    <dt>Terms of Service</dt>
                                                    <dd data-summary-terms-url>-</dd>
                                                    <dt>Refund and Cancellation Policy</dt>
                                                    <dd data-summary-refund-url>-</dd>
                                                </dl>
                                            </div>
                                        </section>

                                        <section class="payments-summary-section">
                                            <div class="payments-summary-block">
                                                <div class="payments-summary-head">
                                                    <strong><i class="fa-regular fa-clipboard"></i> Order Fulfillment</strong>
                                                    <button class="payments-summary-edit" type="button" data-payments-step-jump="3">Edit</button>
                                                </div>
                                                <div class="payments-summary-divider"></div>
                                                <dl class="payments-summary-grid">
                                                    <dt>How do you deliver your goods?</dt>
                                                    <dd data-summary-delivery-method>-</dd>
                                                    <dt>When do customers receive their products?</dt>
                                                    <dd data-summary-delivery-time>-</dd>
                                                    <dt>Business Model</dt>
                                                    <dd data-summary-business-model>-</dd>
                                                    <dt>Product Type</dt>
                                                    <dd data-summary-product-type>-</dd>
                                                </dl>
                                            </div>
                                        </section>

                                        <section class="payments-summary-section">
                                            <div class="payments-summary-block">
                                                <div class="payments-summary-head">
                                                    <strong><i class="fa-regular fa-building-columns"></i> Bank Account</strong>
                                                    <button class="payments-summary-edit" type="button" data-payments-step-jump="4">Edit</button>
                                                </div>
                                                <div class="payments-summary-divider"></div>
                                                <dl class="payments-summary-grid">
                                                    <dt>Account Number</dt>
                                                    <dd data-summary-account-number>********</dd>
                                                    <dt>IFSC</dt>
                                                    <dd data-summary-ifsc>-</dd>
                                                </dl>
                                            </div>
                                        </section>

                                        <label class="payments-summary-check">
                                            <input type="checkbox" data-payments-terms-check>
                                            <span>I agree to the <a href="#" target="_blank" rel="noreferrer">Terms of Service</a> and <a href="#" target="_blank" rel="noreferrer">Privacy Policy</a> of Zoho Payments.</span>
                                        </label>
                                        <div class="payments-summary-submit-error" data-payments-terms-error hidden>
                                            <i class="fa-solid fa-circle-exclamation"></i>
                                            <span>Please read and accept the Terms of Service and Privacy Policy before you proceed.</span>
                                        </div>

                                        <div class="payments-profile-divider"></div>

                                        <div class="payments-card-foot">
                                            <button class="payments-back-btn" type="button" data-payments-step-prev="4"><i class="fa-solid fa-angle-left"></i> Back</button>
                                            <button class="payments-save-next" type="button" data-payments-final-submit>Submit</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="payments-onboarding-overlay" data-payments-business-record-modal hidden>
                                <div class="payments-inline-modal">
                                    <div class="payments-inline-head">
                                        <h2>Select a Business</h2>
                                    </div>
                                    <div class="payments-inline-body">
                                        <div class="payments-info-box"><i class="fa-solid fa-circle-info"></i><div>As per RBI guidelines, we are required to obtain your KYC record from Central KYC Records Registry(CKYCR).</div></div>
                                        <div class="payments-success-box"><i class="fa-solid fa-shield-halved"></i><div><strong>Multiple CKYC Records Found</strong> <i class="fa-solid fa-circle-info"></i><br>We found multiple KYC records. Please select one business from the records for which a Zoho Payments account will be created.</div></div>
                                        <div class="payments-record-select">
                                            <label>Business Records</label>
                                            <button class="payments-record-select-trigger" type="button" data-payments-record-select-trigger><span data-payments-record-selected>Select a Business</span><i class="fa-solid fa-angle-down"></i></button>
                                            <div class="payments-record-dropdown" data-payments-record-dropdown hidden>
                                                <?php foreach ($businessRecords as $record): ?>
                                                    <button class="payments-record-option" type="button" data-payments-record-option="<?php echo billing_escape($record); ?>"><?php echo billing_escape($record); ?></button>
                                                <?php endforeach; ?>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="payments-inline-foot">
                                        <button class="payments-blue-btn" type="button" data-payments-business-record-continue>Continue</button>
                                    </div>
                                </div>
                            </div>

                            <div class="payments-onboarding-overlay" data-payments-verify-modal hidden>
                                <div class="payments-inline-modal payments-inline-modal--wide">
                                    <div class="payments-inline-head">
                                        <h2>Verify Your Business Entity</h2>
                                    </div>
                                    <div class="payments-inline-body">
                                        <div class="payments-info-box"><i class="fa-solid fa-circle-info"></i><div>As per RBI guidelines, we are required to obtain your KYC record from Central KYC Records Registry(CKYCR).</div></div>
                                        <div class="payments-success-box">
                                            <i class="fa-solid fa-shield-halved"></i>
                                            <div>
                                                <strong>CKYC Records Found</strong> <i class="fa-solid fa-circle-info"></i><br>
                                                Legal Business Name :
                                                <span class="payments-success-pill" data-payments-verify-record-name>Mr. GVENKATESWARLU</span><br>
                                                Verify to auto-fill your details and complete onboarding faster for the selected business.
                                            </div>
                                        </div>
                                        <p class="payments-verify-copy">Verify your business identity using either your registered mobile number or the date of incorporation.</p>
                                        <div class="payments-choice-row">
                                            <label class="payments-choice"><input type="radio" name="paymentsVerifyMode" value="mobile" checked><span>Verify via Mobile</span></label>
                                            <label class="payments-choice"><input type="radio" name="paymentsVerifyMode" value="date"><span>Verify via Date of Incorporation</span></label>
                                        </div>
                                        <div class="payments-verify-input" data-payments-verify-mobile-field>
                                            <label for="paymentsVerifyMobile">Mobile Number<span class="required">*</span></label>
                                            <div class="payments-input-shell">
                                                <span><i class="fa-solid fa-mobile-screen-button"></i></span>
                                                <input id="paymentsVerifyMobile" type="text" value="IN (+91)   98765 43210">
                                            </div>
                                            <div class="payments-verify-note">Enter the mobile number registered with Central KYC Records Registry.</div>
                                        </div>
                                        <div class="payments-verify-input" data-payments-verify-date-field hidden>
                                            <label for="paymentsVerifyDate">Date of Incorporation<span class="required">*</span></label>
                                            <div class="payments-input-shell">
                                                <span><i class="fa-regular fa-calendar"></i></span>
                                                <input id="paymentsVerifyDate" type="text" value="06-05-2026">
                                            </div>
                                            <div class="payments-verify-note">Enter the date of incorporation as per your business registration documents.</div>
                                        </div>
                                        <div class="payments-verify-agree"><i class="fa-solid fa-circle-info"></i><div>By proceeding, you agree to obtain KYC records from the CKYCR for KYC verification purposes.</div></div>
                                    </div>
                                    <div class="payments-inline-foot">
                                        <button class="payments-outline-btn" type="button" data-payments-verify-back>Go Back</button>
                                        <button class="payments-blue-btn" type="button" data-payments-verify-submit>Verify</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </section>
        </main>
    </div>
</div>
<div class="payments-modal-backdrop" data-payments-setup-modal hidden>
    <div class="payments-modal" role="dialog" aria-modal="true" aria-labelledby="paymentsSetupTitle">
        <div class="payments-modal-head">
            <h2 id="paymentsSetupTitle">Set Up Zoho Payments</h2>
            <button class="payments-modal-close" type="button" aria-label="Close" data-payments-setup-close>&times;</button>
        </div>
        <div class="payments-support-body">
            <p class="payments-setup-copy">Ensure you're either the <strong>business owner or an authorized person</strong> to share business details, set up and manage online payments. If you think you're not the right person, request someone who has significant responsibility to continue.</p>
            <div class="payments-owner-card">
                <div class="payments-owner-label">Account Owner</div>
                <div class="payments-owner-row">
                    <div class="payments-owner-avatar">B</div>
                    <div>
                        <div class="payments-owner-name">balachandar k</div>
                        <div class="payments-owner-mail"><?php echo billing_escape($userLabel); ?></div>
                    </div>
                </div>
                <div class="payments-owner-note"><i class="fa-solid fa-circle-exclamation"></i><div>By proceeding, you'll be added as the account owner and only you will have the permission to access Zoho Payments.</div></div>
            </div>
            <div class="payments-check-list">
                <label class="payments-check-item"><input type="checkbox" data-payments-setup-check><span>I confirm that I am authorised to share business details, set up and manage Zoho Payments.</span></label>
                <label class="payments-check-item"><input type="checkbox" data-payments-setup-check><span>I have read and agree to the <a href="#">end-user terms <i class="fa-solid fa-arrow-up-right-from-square"></i></a></span></label>
            </div>
        </div>
        <div class="payments-support-foot payments-setup-foot">
            <button class="payments-support-submit payments-setup-submit" type="button" data-payments-setup-submit disabled>Set Up Zoho Payments</button>
            <button class="payments-support-cancel" type="button" data-payments-setup-close>Cancel</button>
        </div>
    </div>
</div>
<div class="payments-modal-backdrop" data-payments-support-modal hidden>
    <div class="payments-modal" role="dialog" aria-modal="true" aria-labelledby="paymentsSupportTitle">
        <div class="payments-modal-head">
            <h2 id="paymentsSupportTitle">How Can We Help You Today?</h2>
            <button class="payments-modal-close" type="button" aria-label="Close" data-payments-support-close hidden>&times;</button>
        </div>
        <div class="payments-support-body">
            <div class="payments-support-issue">
                <div class="payments-support-issue-icon">
                    <span><i class="fa-solid fa-video"></i></span>
                </div>
                <div class="payments-support-issue-copy">
                    <h3>Are you facing an issue?</h3>
                    <p>Record a video of the issue you're facing and help us resolve it faster.</p>
                </div>
                <button class="payments-record-btn" type="button" data-payments-record-open><i class="fa-regular fa-circle-dot"></i><span>Record Screen</span></button>
            </div>

            <form class="payments-support-form" data-payments-support-form>
                <div class="payments-support-field">
                    <label class="is-required" for="paymentsSupportSubject">Subject*</label>
                    <input class="payments-support-input" id="paymentsSupportSubject" name="subject" type="text" value="I'm interested in Zoho Payments">
                </div>

                <div class="payments-support-field">
                    <label class="is-required" for="paymentsSupportDetail">Tell us in detail*</label>
                    <textarea class="payments-support-textarea" id="paymentsSupportDetail" name="detail" placeholder="Post your support request online and we will connect you with an expert."></textarea>
                </div>

                <div class="payments-support-field">
                    <label for="paymentsSupportAttachment">Attachments <i class="fa-regular fa-circle-question"></i></label>
                    <div class="payments-attachment-row">
                        <label class="payments-attachment-button" for="paymentsSupportAttachment">
                            <span>Choose File</span>
                            <input id="paymentsSupportAttachment" type="file" data-payments-attachment-input>
                        </label>
                        <div class="payments-attachment-chip" data-payments-attachment-chip hidden>
                            <span data-payments-attachment-name></span>
                            <button type="button" aria-label="Remove attachment" data-payments-attachment-clear>&times;</button>
                        </div>
                    </div>
                </div>

                <div class="payments-support-field">
                    <label for="paymentsSupportPhone">Mobile Number</label>
                    <div class="payments-support-phone">
                        <div class="payments-support-phone-icon"><i class="fa-solid fa-mobile-screen-button"></i></div>
                        <input class="payments-support-phone-input" id="paymentsSupportPhone" name="phone" type="text" inputmode="numeric">
                    </div>
                </div>

                <div class="payments-support-note">
                    <strong>Note:</strong> Responses to this email will be sent to <?php echo billing_escape($userLabel); ?>.
                </div>
            </form>
        </div>
        <div class="payments-support-foot">
            <div class="payments-support-actions">
                <button class="payments-support-submit" type="button">Send</button>
                <button class="payments-support-cancel" type="button" data-payments-support-close>Cancel</button>
            </div>
            <div class="payments-support-helpline">
                <div>Zoho Billing India Helpline: <strong>18005692881</strong></div>
                <div>Mon - Fri : 9:00 AM - 7:00 PM Â· Toll Free</div>
            </div>
        </div>
    </div>
</div>

<div class="payments-modal-backdrop" data-payments-record-modal hidden>
    <div class="payments-modal" role="dialog" aria-modal="true" aria-labelledby="paymentsRecordTitle">
        <div class="payments-modal-head">
            <h2 id="paymentsRecordTitle">Record Screen &amp; Share Feedback</h2>
            <button class="payments-modal-close" type="button" aria-label="Close" data-payments-record-close>&times;</button>
        </div>
        <div class="payments-recording-body">
            <div class="payments-recording-title"><i class="fa-solid fa-circle-info"></i><span>Provide consent for recording</span></div>
            <p class="payments-recording-copy">You can record your screen for up to 5 minutes or less. Once you click Start Recording, you are consenting to allow us to collect the following details:</p>
            <ul class="payments-recording-list">
                <li><i class="fa-solid fa-check"></i><span>Your IP address.</span></li>
                <li><i class="fa-solid fa-check"></i><span>Browser console logs generated during the recording.</span></li>
                <li><i class="fa-solid fa-check"></i><span>Device details that include screen resolution, browser version, and operating system.</span></li>
                <li><i class="fa-solid fa-check"></i><span>Client-side performance metrics (DNS look-up time, TCP connection time, and similar metrics)</span></li>
                <li><i class="fa-solid fa-check"></i><span>A screen recording of the window or the screen area that you specify. If the screen contains any sensitive information, you'll have the option to edit and mask such details.</span></li>
                <li><i class="fa-solid fa-check"></i><span>Audio recorded during the screen recording. If you don't want the audio, you may mute it during recording, or record voiceover separately.</span></li>
            </ul>
            <label class="payments-recording-agree">
                <input type="checkbox" checked>
                <span>I agree to allow Zoho Billing to collect the data mentioned above</span>
            </label>
        </div>
        <div class="payments-recording-foot">
            <button class="payments-record-start" type="button">Start Recording</button>
        </div>
    </div>
</div>
<div class="payments-modal-overlay" data-payments-upload-pan-modal hidden>
    <div class="payments-modal payments-inline-modal payments-inline-modal--wide">
        <div class="payments-inline-head">
            <h2>Driving Licence</h2>
            <button type="button" data-payments-upload-pan-close>&times;</button>
        </div>
        <div class="payments-inline-body payments-upload-review-body">
            <div>
                <div class="payments-doc-panel">
                    <div class="payments-doc-head is-complete"><i class="fa-solid fa-circle-check" style="color:#20b26b;"></i><span>Front side of document</span></div>
                    <div class="payments-doc-preview">
                        <div class="payments-doc-actions">
                            <button type="button" aria-label="Expand preview"><i class="fa-solid fa-expand"></i></button>
                            <span class="divider"></span>
                            <button type="button" aria-label="Delete preview"><i class="fa-regular fa-trash-can"></i></button>
                        </div>
                    </div>
                </div>
                <label class="payments-form-checkbox" style="margin-top:14px;"><input type="checkbox"><span>Upload as a single document</span></label>
                <div class="payments-doc-panel" style="margin-top:18px;">
                    <div class="payments-doc-head is-pending"><span class="step">2</span><span><span class="accent">Back</span> side of document</span></div>
                    <div class="payments-doc-dropzone">
                        <div>
                            <i class="fa-solid fa-arrow-up"></i>
                            <div>Drag &amp; drop file here or<br><strong style="color:#2563eb;">Choose File</strong></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="payments-review-checks">
                <div style="font-size:18px;color:#36455f;">Before you upload, ensure that:</div>
                <label class="payments-choice"><input type="checkbox" checked> <span>The document belongs to this person.</span></label>
                <div class="payments-review-card">
                    <dl>
                        <dt>First Name</dt><dd>Balachandar</dd>
                        <dt>Last Name</dt><dd>Kathiresan</dd>
                        <dt>Address</dt><dd>S,/Dssa</dd>
                    </dl>
                </div>
                <label class="payments-choice"><input type="checkbox"> <span>The document displays the person's details clearly and is in the acceptable format.</span></label>
                <a class="payments-doc-link" href="#">Show Acceptable Document Formats <i class="fa-solid fa-angle-down"></i></a>
            </div>
        </div>
        <div class="payments-inline-foot">
            <button class="payments-outline-btn" type="button" data-payments-upload-pan-close>Cancel</button>
            <button class="payments-blue-btn" type="button" data-payments-upload-pan-submit>Upload</button>
        </div>
    </div>
</div>

<div class="payments-modal-overlay" data-payments-upload-identity-modal hidden>
    <div class="payments-modal payments-inline-modal payments-inline-modal--wide">
        <div class="payments-inline-head">
            <h2>Driving Licence</h2>
            <button type="button" data-payments-upload-identity-close>&times;</button>
        </div>
        <div class="payments-inline-body payments-upload-review-body">
            <div>
                <div class="payments-doc-panel">
                    <div class="payments-doc-head is-complete"><i class="fa-solid fa-circle-check" style="color:#20b26b;"></i><span>Front side of document</span></div>
                    <div class="payments-doc-preview">
                        <div class="payments-doc-actions">
                            <button type="button" aria-label="Expand preview"><i class="fa-solid fa-expand"></i></button>
                            <span class="divider"></span>
                            <button type="button" aria-label="Delete preview"><i class="fa-regular fa-trash-can"></i></button>
                        </div>
                    </div>
                </div>
                <label class="payments-form-checkbox" style="margin-top:14px;"><input type="checkbox"><span>Upload as a single document</span></label>
                <div class="payments-doc-panel" style="margin-top:18px;">
                    <div class="payments-doc-head is-pending"><span class="step">2</span><span><span class="accent">Back</span> side of document</span></div>
                    <div class="payments-doc-dropzone">
                        <div>
                            <i class="fa-solid fa-arrow-up"></i>
                            <div>Drag &amp; drop file here or<br><strong style="color:#2563eb;">Choose File</strong></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="payments-review-checks">
                <label class="payments-choice"><input type="checkbox" checked> <span>The document belongs to this person.</span></label>
                <div class="payments-review-card">
                    <dl>
                        <dt>First Name</dt><dd>Balachandar</dd>
                        <dt>Last Name</dt><dd>Kathiresan</dd>
                        <dt>Address</dt><dd>S,/Dssa</dd>
                    </dl>
                </div>
                <label class="payments-choice"><input type="checkbox"> <span>The document displays the person's details clearly and is in the acceptable format.</span></label>
                <a class="payments-doc-link" href="#">Show Acceptable Document Formats <i class="fa-solid fa-angle-down"></i></a>
            </div>
        </div>
        <div class="payments-inline-foot">
            <button class="payments-outline-btn" type="button" data-payments-upload-identity-close>Cancel</button>
            <button class="payments-blue-btn" type="button" data-payments-upload-identity-submit>Upload</button>
        </div>
    </div>
</div>

<div class="payments-modal-overlay" data-payments-website-modal hidden>
    <div class="payments-modal payments-inline-modal">
        <div class="payments-inline-head">
            <h2>Business Website</h2>
            <button type="button" data-payments-website-close>&times;</button>
        </div>
        <div class="payments-inline-body">
            <div class="payments-inline-form-field">
                <label>Enter URL<span class="required">*</span></label>
                <div class="payments-url-input-shell">
                    <span><i class="fa-solid fa-globe"></i></span>
                    <input id="paymentsWebsiteUrl" type="text" value="https://subscriptions.zoho.in/app/60066681652#/settings/onlinepayments/customer-onlinepayments">
                </div>
                <div class="payments-form-help" style="margin-top:10px;">The website must include your <strong>contact details, terms and conditions, privacy, refund and shipping policies</strong> for your products or services.</div>
            </div>
        </div>
        <div class="payments-inline-foot">
            <button class="payments-outline-btn" type="button" data-payments-website-close>Cancel</button>
            <button class="payments-blue-btn" type="button" data-payments-website-submit>Verify and Submit</button>
        </div>
    </div>
</div>

<div class="payments-modal-overlay" data-payments-description-modal hidden>
    <div class="payments-modal payments-inline-modal payments-inline-modal--wide" style="width:min(1380px,calc(100vw - 40px));">
        <div class="payments-inline-head">
            <h2>Generate Business Description</h2>
            <button type="button" data-payments-description-close>&times;</button>
        </div>
        <div class="payments-description-grid">
            <div class="payments-inline-body payments-description-form">
                <div class="payments-inline-form-field">
                    <label>Nature of Business &amp; Customers<span class="required">*</span></label>
                    <textarea id="paymentsDescriptionNature">E.g., Online marketing services for small businesses in India</textarea>
                    <div class="payments-form-help">Briefly describe what your business does and who your customers are.</div>
                </div>
                <div class="payments-inline-form-field">
                    <label>Products or Services Offered<span class="required">*</span></label>
                    <textarea id="paymentsDescriptionOfferings">E.g., Monthly social media management that helps businesses grow their online presence.</textarea>
                    <div class="payments-form-help">Explain what you sell and how customers use your products or services.</div>
                </div>
                <div class="payments-inline-form-field">
                    <label>What You're Collecting Payments For<span class="required">*</span></label>
                    <textarea id="paymentsDescriptionPaymentsFor">E.g., One-time service fees and recurring monthly subscriptions for marketing tools.</textarea>
                    <div class="payments-form-help">Let us know what customers are paying you for through Zoho Payments.</div>
                </div>
            </div>
            <div class="payments-description-preview">
                <div style="color:#44536f;font-size:16px;font-weight:700;"><i class="fa-solid fa-lightbulb" style="color:#f5c94d;"></i> Preview</div>
                <div class="payments-preview-card" data-payments-description-preview>
                    Our business is in <em>[nature of business and who your customers are]</em>. We offer <em>[products or services and how customers use them]</em>.<br><br>
                    Through Zoho Payments, we collect payments for <em>[what customers are paying for, such as one-time service fees, product sales, or subscriptions]</em>.
                </div>
                <div class="payments-preview-foot">
                    <span>The highlighted placeholders will be replaced with your inputs.</span>
                    <span data-payments-description-count>0/1000</span>
                </div>
            </div>
        </div>
        <div class="payments-inline-foot">
            <button class="payments-outline-btn" type="button" data-payments-description-close>Cancel</button>
            <button class="payments-blue-btn" type="button" data-payments-description-submit>Use Template</button>
        </div>
    </div>
</div>
<script src="assets/billing.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
  var closeButton = document.querySelector('[data-payments-banner-close]');
  var banner = document.querySelector('[data-payments-banner]');
  if (closeButton && banner) {
    closeButton.addEventListener('click', function () {
      banner.hidden = true;
    });
  }

  var supportModal = document.querySelector('[data-payments-support-modal]');
  var recordModal = document.querySelector('[data-payments-record-modal]');
  var setupModal = document.querySelector('[data-payments-setup-modal]');
  var supportOpen = document.querySelector('[data-payments-support-open]');
  var setupOpen = document.querySelector('[data-payments-setup-open]');
  var supportClosers = document.querySelectorAll('[data-payments-support-close]');
  var setupClosers = document.querySelectorAll('[data-payments-setup-close]');
  var recordOpen = document.querySelector('[data-payments-record-open]');
  var recordClosers = document.querySelectorAll('[data-payments-record-close]');
  var attachmentInput = document.querySelector('[data-payments-attachment-input]');
  var attachmentChip = document.querySelector('[data-payments-attachment-chip]');
  var attachmentName = document.querySelector('[data-payments-attachment-name]');
  var attachmentClear = document.querySelector('[data-payments-attachment-clear]');
  var setupChecks = document.querySelectorAll('[data-payments-setup-check]');
  var setupSubmit = document.querySelector('[data-payments-setup-submit]');
  var landingPage = document.querySelector('.payments-app-page');
  var onboardingPage = document.querySelector('[data-payments-onboarding]');
  var onboardingClose = document.querySelector('[data-payments-onboarding-close]');
  var onboardingBannerClose = document.querySelector('[data-payments-onboarding-banner-close]');
  var onboardingBanner = document.querySelector('[data-payments-onboarding-banner]');
  var businessRecordModal = document.querySelector('[data-payments-business-record-modal]');
  var businessRecordOpen = document.querySelector('[data-payments-business-record-open]');
  var recordSelectTrigger = document.querySelector('[data-payments-record-select-trigger]');
  var recordDropdown = document.querySelector('[data-payments-record-dropdown]');
  var recordSelected = document.querySelector('[data-payments-record-selected]');
  var recordOptions = document.querySelectorAll('[data-payments-record-option]');
  var businessRecordContinue = document.querySelector('[data-payments-business-record-continue]');
  var verifyModal = document.querySelector('[data-payments-verify-modal]');
  var verifyRecordName = document.querySelector('[data-payments-verify-record-name]');
  var businessTypeText = document.querySelector('[data-payments-business-type-text]');
  var verifyModeInputs = document.querySelectorAll('input[name="paymentsVerifyMode"]');
  var verifyMobileField = document.querySelector('[data-payments-verify-mobile-field]');
  var verifyDateField = document.querySelector('[data-payments-verify-date-field]');
  var verifyBack = document.querySelector('[data-payments-verify-back]');
  var verifySubmit = document.querySelector('[data-payments-verify-submit]');
  var stepLabel = document.querySelector('.payments-step-label');
  var stepItems = document.querySelectorAll('.payments-step-item');
  var stepPages = document.querySelectorAll('[data-payments-step-page]');
  var stepNextButtons = document.querySelectorAll('[data-payments-step-next]');
  var stepPrevButtons = document.querySelectorAll('[data-payments-step-prev]');
  var selectTriggers = document.querySelectorAll('[data-payments-select-trigger]');
  var selectOptions = document.querySelectorAll('[data-payments-select-option]');
  var uploadPanModal = document.querySelector('[data-payments-upload-pan-modal]');
  var uploadPanOpen = document.querySelector('[data-payments-pan-upload-open]');
  var uploadPanClosers = document.querySelectorAll('[data-payments-upload-pan-close]');
  var uploadPanSubmit = document.querySelector('[data-payments-upload-pan-submit]');
  var uploadPanRow = document.querySelector('[data-payments-pan-upload-row]');
  var uploadIdentityModal = document.querySelector('[data-payments-upload-identity-modal]');
  var uploadIdentityOpen = document.querySelector('[data-payments-identity-upload-open]');
  var uploadIdentityClosers = document.querySelectorAll('[data-payments-upload-identity-close]');
  var uploadIdentitySubmit = document.querySelector('[data-payments-upload-identity-submit]');
  var uploadIdentityRow = document.querySelector('[data-payments-identity-upload-row]');
  var websiteModal = document.querySelector('[data-payments-website-modal]');
  var websiteOpens = document.querySelectorAll('[data-payments-website-open]');
  var websiteClosers = document.querySelectorAll('[data-payments-website-close]');
  var websiteSubmit = document.querySelector('[data-payments-website-submit]');
  var websiteDisplay = document.querySelector('[data-payments-website-display]');
  var policyTermsDisplay = document.querySelector('[data-payments-policy-terms-display]');
  var policyRefundDisplay = document.querySelector('[data-payments-policy-refund-display]');
  var descriptionModal = document.querySelector('[data-payments-description-modal]');
  var descriptionOpen = document.querySelector('[data-payments-description-open]');
  var descriptionClosers = document.querySelectorAll('[data-payments-description-close]');
  var descriptionSubmit = document.querySelector('[data-payments-description-submit]');
  var descriptionError = document.querySelector('[data-payments-description-error]');
  var stepJumpButtons = document.querySelectorAll('[data-payments-step-jump]');
  var finalSubmit = document.querySelector('[data-payments-final-submit]');
  var termsCheck = document.querySelector('[data-payments-terms-check]');
  var termsError = document.querySelector('[data-payments-terms-error]');
  var accountNumberInput = document.getElementById('paymentsAccountNumber');
  var confirmAccountInput = document.getElementById('paymentsConfirmAccountNumber');
  var ifscInput = document.getElementById('paymentsIfsc');
  var accountError = document.querySelector('[data-payments-account-error]');
  var accountShell = document.querySelector('[data-payments-account-shell]');
  var websiteUrlInput = document.getElementById('paymentsWebsiteUrl');
  var descriptionNature = document.getElementById('paymentsDescriptionNature');
  var descriptionOfferings = document.getElementById('paymentsDescriptionOfferings');
  var descriptionPaymentsFor = document.getElementById('paymentsDescriptionPaymentsFor');
  var descriptionPreview = document.querySelector('[data-payments-description-preview]');
  var descriptionCount = document.querySelector('[data-payments-description-count]');
  var summaryTermsUrl = document.querySelector('[data-summary-terms-url]');
  var summaryRefundUrl = document.querySelector('[data-summary-refund-url]');
  var selectedBusinessRecord = '';
  var generatedDescription = '';
  var currentStep = 1;

  var summaryTargets = {
    businessType: document.querySelector('[data-summary-business-type]'),
    businessName: document.querySelector('[data-summary-business-name]'),
    tradeName: document.querySelector('[data-summary-trade-name]'),
    gstin: document.querySelector('[data-summary-gstin]'),
    businessAddress: document.querySelector('[data-summary-business-address]'),
    businessPhone: document.querySelector('[data-summary-business-phone]'),
    supportHelpline: document.querySelector('[data-summary-support-helpline]'),
    industry: document.querySelector('[data-summary-industry]'),
    website: document.querySelector('[data-summary-website]'),
    description: document.querySelector('[data-summary-description]'),
    firstName: document.querySelector('[data-summary-first-name]'),
    middleName: document.querySelector('[data-summary-middle-name]'),
    lastName: document.querySelector('[data-summary-last-name]'),
    repEmail: document.querySelector('[data-summary-rep-email]'),
    dob: document.querySelector('[data-summary-dob]'),
    repPhone: document.querySelector('[data-summary-rep-phone]'),
    residentialAddress: document.querySelector('[data-summary-residential-address]'),
    termsUrl: summaryTermsUrl,
    refundUrl: summaryRefundUrl,
    deliveryMethod: document.querySelector('[data-summary-delivery-method]'),
    deliveryTime: document.querySelector('[data-summary-delivery-time]'),
    businessModel: document.querySelector('[data-summary-business-model]'),
    productType: document.querySelector('[data-summary-product-type]'),
    accountNumber: document.querySelector('[data-summary-account-number]'),
    ifsc: document.querySelector('[data-summary-ifsc]')
  };

  function renderStep(step) {
    var numericStep = Number(step) || 1;
    var labels = {
      1: 'Business Profile',
      2: 'Business Policies',
      3: 'Order Fulfillment',
      4: 'Bank Account',
      5: 'Summary'
    };
    currentStep = numericStep;
    stepPages.forEach(function (page) {
      page.hidden = page.getAttribute('data-payments-step-page') !== String(numericStep);
    });
    if (stepLabel) {
      stepLabel.textContent = labels[numericStep] || 'Business Profile';
    }
    stepItems.forEach(function (item, index) {
      var stepNumber = index + 1;
      item.classList.remove('is-active');
      item.innerHTML = String(stepNumber);
      if (stepNumber < numericStep) {
        item.classList.add('payments-step-done');
        item.innerHTML = '<i class="fa-solid fa-check"></i>';
      } else if (stepNumber === numericStep) {
        item.classList.add('is-active');
        item.classList.remove('payments-step-done');
      } else {
        item.classList.remove('payments-step-done');
      }
    });

    if (numericStep === 5) {
      updateSummary();
    }
  }

  function closeModal(modal) {
    if (modal) {
      modal.hidden = true;
    }
    document.body.classList.remove('billing-drawer-open');
  }

  function openModal(modal) {
    if (modal) {
      modal.hidden = false;
      document.body.classList.add('billing-drawer-open');
    }
  }

  function setOnboardingVisible(visible) {
    if (landingPage) {
      landingPage.hidden = visible;
    }
    if (onboardingPage) {
      onboardingPage.hidden = !visible;
    }
    window.scrollTo({ top: 0, behavior: 'instant' });
  }

  function refreshSetupState() {
    if (!setupSubmit) {
      return;
    }
    var allChecked = Array.from(setupChecks).every(function (input) {
      return input.checked;
    });
    setupSubmit.disabled = !allChecked;
  }

  function updateVerifyMode() {
    var mode = Array.from(verifyModeInputs).find(function (input) {
      return input.checked;
    });
    var isDate = mode && mode.value === 'date';
    if (verifyMobileField) {
      verifyMobileField.hidden = !!isDate;
    }
    if (verifyDateField) {
      verifyDateField.hidden = !isDate;
    }
  }

  function closeAllSelects() {
    document.querySelectorAll('[data-payments-select-menu]').forEach(function (menu) {
      menu.hidden = true;
    });
    document.querySelectorAll('[data-payments-select]').forEach(function (shell) {
      shell.classList.remove('is-open');
    });
  }

  function getInputValue(id) {
    var input = document.getElementById(id);
    return input ? input.value.trim() : '';
  }

  function getText(selector) {
    var node = document.querySelector(selector);
    return node ? node.textContent.trim() : '';
  }

  function withFallback(value) {
    return value && value.trim() !== '' ? value.trim() : '-';
  }

  function maskAccountNumber(value) {
    var trimmed = (value || '').replace(/\s+/g, '');
    if (!trimmed) {
      return '********';
    }
    if (trimmed.length <= 4) {
      return trimmed;
    }
    return new Array(trimmed.length - 3).join('*') + trimmed.slice(-4);
  }

  function joinAddress(parts) {
    var filtered = parts.filter(function (part) {
      return part && part.trim() !== '' && part.trim() !== 'State' && part.trim() !== 'Select your industry';
    });
    return filtered.length ? filtered.join('<br>') : '-';
  }

  function setInvalidState(target, invalid) {
    if (!target) {
      return;
    }
    target.classList.toggle('is-invalid', !!invalid);
  }

  function validateBankAccount() {
    var accountNumber = accountNumberInput ? accountNumberInput.value.trim() : '';
    var confirmAccountNumber = confirmAccountInput ? confirmAccountInput.value.trim() : '';
    var ifsc = ifscInput ? ifscInput.value.trim() : '';
    var hasMismatch = !!accountNumber && !!confirmAccountNumber && accountNumber !== confirmAccountNumber;
    var hasEmptyRequired = !accountNumber || !confirmAccountNumber || !ifsc;

    if (accountError) {
      accountError.hidden = !hasMismatch;
    }
    setInvalidState(confirmAccountInput, hasMismatch);
    setInvalidState(accountShell, hasMismatch || !accountNumber);
    setInvalidState(ifscInput, !ifsc);

    return !hasMismatch && !hasEmptyRequired;
  }

  function buildGeneratedDescription() {
    var nature = descriptionNature ? descriptionNature.value.trim() : '';
    var offerings = descriptionOfferings ? descriptionOfferings.value.trim() : '';
    var paymentsFor = descriptionPaymentsFor ? descriptionPaymentsFor.value.trim() : '';
    if (!nature || !offerings || !paymentsFor) {
      return '';
    }
    return 'Our business is in ' + nature + '. We offer ' + offerings + '. Through Zoho Payments, we collect payments for ' + paymentsFor + '.';
  }

  function refreshDescriptionPreview() {
    var previewText = buildGeneratedDescription();
    generatedDescription = previewText;
    if (descriptionPreview) {
      descriptionPreview.innerHTML = previewText || 'Our business is in <em>[nature of business and who your customers are]</em>. We offer <em>[products or services and how customers use them]</em>.<br><br>Through Zoho Payments, we collect payments for <em>[what customers are paying for, such as one-time service fees, product sales, or subscriptions]</em>.';
    }
    if (descriptionCount) {
      descriptionCount.textContent = String(previewText.length) + '/1000';
    }
  }

  function updateSummary() {
    if (summaryTargets.businessType) {
      summaryTargets.businessType.textContent = withFallback(getText('[data-payments-business-type-text]'));
    }
    if (summaryTargets.businessName) {
      summaryTargets.businessName.textContent = withFallback(getInputValue('paymentsBusinessName'));
    }
    if (summaryTargets.tradeName) {
      summaryTargets.tradeName.textContent = withFallback(getInputValue('paymentsTradeNameSecond') || getInputValue('paymentsTradeName'));
    }
    if (summaryTargets.gstin) {
      summaryTargets.gstin.textContent = withFallback(getInputValue('paymentsGstin'));
    }
    if (summaryTargets.businessAddress) {
      summaryTargets.businessAddress.innerHTML = joinAddress([
        getInputValue('paymentsAddress1'),
        getInputValue('paymentsAddress2'),
        getInputValue('paymentsAddress3'),
        getInputValue('paymentsCity'),
        getInputValue('paymentsPin'),
        getText('[data-payments-state-text]'),
        'India'
      ]);
    }
    if (summaryTargets.businessPhone) {
      summaryTargets.businessPhone.textContent = withFallback(getInputValue('paymentsBusinessPhone'));
    }
    if (summaryTargets.supportHelpline) {
      summaryTargets.supportHelpline.textContent = withFallback(getInputValue('paymentsSupportHelpline'));
    }
    if (summaryTargets.industry) {
      summaryTargets.industry.textContent = withFallback(getText('[data-payments-industry-text]'));
    }
    if (summaryTargets.website) {
      summaryTargets.website.textContent = withFallback(websiteUrlInput ? websiteUrlInput.value.trim() : '');
    }
    if (summaryTargets.description) {
      summaryTargets.description.textContent = withFallback(generatedDescription);
    }
    if (summaryTargets.firstName) {
      summaryTargets.firstName.textContent = withFallback(getInputValue('paymentsFirstName'));
    }
    if (summaryTargets.middleName) {
      summaryTargets.middleName.textContent = withFallback(getInputValue('paymentsMiddleName'));
    }
    if (summaryTargets.lastName) {
      summaryTargets.lastName.textContent = withFallback(getInputValue('paymentsLastName'));
    }
    if (summaryTargets.repEmail) {
      summaryTargets.repEmail.textContent = withFallback(getInputValue('paymentsRepEmail'));
    }
    if (summaryTargets.dob) {
      summaryTargets.dob.textContent = withFallback(getInputValue('paymentsDob'));
    }
    if (summaryTargets.repPhone) {
      summaryTargets.repPhone.textContent = withFallback(getInputValue('paymentsRepPhone'));
    }
    if (summaryTargets.residentialAddress) {
      summaryTargets.residentialAddress.innerHTML = joinAddress([
        getInputValue('paymentsResidential1'),
        getInputValue('paymentsResidential2'),
        getInputValue('paymentsResidential3'),
        getInputValue('paymentsRepCity'),
        getInputValue('paymentsRepPin'),
        getText('[data-payments-rep-state-text]'),
        'India'
      ]);
    }
    if (summaryTargets.termsUrl) {
      summaryTargets.termsUrl.textContent = withFallback(websiteUrlInput ? websiteUrlInput.value.trim() : '');
    }
    if (summaryTargets.refundUrl) {
      summaryTargets.refundUrl.textContent = withFallback(websiteUrlInput ? websiteUrlInput.value.trim() : '');
    }
    if (summaryTargets.deliveryMethod) {
      summaryTargets.deliveryMethod.textContent = withFallback(getText('[data-payments-delivery-method-text]'));
    }
    if (summaryTargets.deliveryTime) {
      summaryTargets.deliveryTime.textContent = withFallback(getText('[data-payments-delivery-time-text]'));
    }
    if (summaryTargets.businessModel) {
      summaryTargets.businessModel.textContent = withFallback(getText('[data-payments-business-model-text]'));
    }
    if (summaryTargets.productType) {
      summaryTargets.productType.textContent = withFallback(getText('[data-payments-product-type-text]'));
    }
    if (summaryTargets.accountNumber) {
      summaryTargets.accountNumber.textContent = maskAccountNumber(accountNumberInput ? accountNumberInput.value : '');
    }
    if (summaryTargets.ifsc) {
      summaryTargets.ifsc.textContent = withFallback(ifscInput ? ifscInput.value.trim().toUpperCase() : '');
    }
  }

  function bindOpeners(openers, modal) {
    openers.forEach(function (button) {
      button.addEventListener('click', function () {
        openModal(modal);
      });
    });
  }

  function bindClosers(closers, modal) {
    closers.forEach(function (button) {
      button.addEventListener('click', function () {
        closeModal(modal);
      });
    });
  }

  if (supportOpen && supportModal) {
    supportOpen.addEventListener('click', function () {
      openModal(supportModal);
    });
  }

  if (setupOpen && setupModal) {
    setupOpen.addEventListener('click', function () {
      openModal(setupModal);
    });
  }

  supportClosers.forEach(function (button) {
    button.addEventListener('click', function () {
      closeModal(supportModal);
    });
  });

  setupClosers.forEach(function (button) {
    button.addEventListener('click', function () {
      closeModal(setupModal);
    });
  });

  if (recordOpen && recordModal) {
    recordOpen.addEventListener('click', function () {
      openModal(recordModal);
    });
  }

  recordClosers.forEach(function (button) {
    button.addEventListener('click', function () {
      closeModal(recordModal);
    });
  });

  [setupModal, supportModal, recordModal].forEach(function (modal) {
    if (!modal) {
      return;
    }
    modal.addEventListener('click', function (event) {
      if (event.target === modal) {
        closeModal(modal);
      }
    });
  });

  document.addEventListener('keydown', function (event) {
    if (event.key !== 'Escape') {
      return;
    }
    if (descriptionModal && !descriptionModal.hidden) {
      closeModal(descriptionModal);
      return;
    }
    if (websiteModal && !websiteModal.hidden) {
      closeModal(websiteModal);
      return;
    }
    if (uploadIdentityModal && !uploadIdentityModal.hidden) {
      closeModal(uploadIdentityModal);
      return;
    }
    if (uploadPanModal && !uploadPanModal.hidden) {
      closeModal(uploadPanModal);
      return;
    }
    if (verifyModal && !verifyModal.hidden) {
      closeModal(verifyModal);
      return;
    }
    if (businessRecordModal && !businessRecordModal.hidden) {
      closeModal(businessRecordModal);
      return;
    }
    if (recordModal && !recordModal.hidden) {
      closeModal(recordModal);
      return;
    }
    if (setupModal && !setupModal.hidden) {
      closeModal(setupModal);
      return;
    }
    if (supportModal && !supportModal.hidden) {
      closeModal(supportModal);
    }
  });

  if (attachmentInput && attachmentChip && attachmentName) {
    attachmentInput.addEventListener('change', function () {
      var file = attachmentInput.files && attachmentInput.files[0];
      if (!file) {
        attachmentChip.hidden = true;
        attachmentName.textContent = '';
        return;
      }
      attachmentName.textContent = file.name;
      attachmentChip.hidden = false;
    });
  }

  if (attachmentClear && attachmentInput && attachmentChip && attachmentName) {
    attachmentClear.addEventListener('click', function () {
      attachmentInput.value = '';
      attachmentName.textContent = '';
      attachmentChip.hidden = true;
    });
  }

  setupChecks.forEach(function (checkbox) {
    checkbox.addEventListener('change', refreshSetupState);
  });
  refreshSetupState();

  if (setupSubmit) {
    setupSubmit.addEventListener('click', function () {
      if (setupSubmit.disabled) {
        return;
      }
      closeModal(setupModal);
      renderStep(1);
      setOnboardingVisible(true);
    });
  }

  if (onboardingClose) {
    onboardingClose.addEventListener('click', function () {
      setOnboardingVisible(false);
      closeModal(businessRecordModal);
      closeModal(verifyModal);
    });
  }

  if (onboardingBanner && onboardingBannerClose) {
    onboardingBannerClose.addEventListener('click', function () {
      onboardingBanner.hidden = true;
    });
  }

  if (businessRecordOpen && businessRecordModal) {
    businessRecordOpen.addEventListener('click', function () {
      openModal(businessRecordModal);
    });
  }

  bindOpeners(Array.from(websiteOpens), websiteModal);
  if (descriptionOpen && descriptionModal) {
    descriptionOpen.addEventListener('click', function () {
      openModal(descriptionModal);
    });
  }
  if (uploadPanOpen && uploadPanModal) {
    uploadPanOpen.addEventListener('click', function () {
      openModal(uploadPanModal);
    });
  }
  if (uploadIdentityOpen && uploadIdentityModal) {
    uploadIdentityOpen.addEventListener('click', function () {
      openModal(uploadIdentityModal);
    });
  }
  bindClosers(Array.from(websiteClosers), websiteModal);
  bindClosers(Array.from(descriptionClosers), descriptionModal);
  bindClosers(Array.from(uploadPanClosers), uploadPanModal);
  bindClosers(Array.from(uploadIdentityClosers), uploadIdentityModal);

  selectTriggers.forEach(function (trigger) {
    trigger.addEventListener('click', function () {
      var key = trigger.getAttribute('data-payments-select-trigger');
      var shell = trigger.closest('[data-payments-select]');
      var menu = document.querySelector('[data-payments-select-menu="' + key + '"]');
      var willOpen = !!(menu && menu.hidden);
      closeAllSelects();
      if (menu) {
        menu.hidden = !willOpen;
      }
      if (shell) {
        shell.classList.toggle('is-open', willOpen);
      }
    });
  });

  selectOptions.forEach(function (option) {
    option.addEventListener('click', function () {
      var key = option.getAttribute('data-payments-select-option');
      var value = option.getAttribute('data-value') || '';
      var textTarget = document.querySelector('[data-payments-' + key.replace(/[A-Z]/g, function (match) { return '-' + match.toLowerCase(); }) + '-text]');
      if (key === 'businessType') {
        textTarget = document.querySelector('[data-payments-business-type-text]');
      }
      if (key === 'state') {
        textTarget = document.querySelector('[data-payments-state-text]');
      }
      if (key === 'repState') {
        textTarget = document.querySelector('[data-payments-rep-state-text]');
      }
      if (key === 'industry') {
        textTarget = document.querySelector('[data-payments-industry-text]');
      }
      document.querySelectorAll('[data-payments-select-option="' + key + '"]').forEach(function (item) {
        item.classList.remove('is-selected');
      });
      option.classList.add('is-selected');
      if (textTarget) {
        textTarget.textContent = value;
      }
      closeAllSelects();
    });
  });

  if (recordSelectTrigger && recordDropdown) {
    recordSelectTrigger.addEventListener('click', function () {
      recordDropdown.hidden = !recordDropdown.hidden;
    });
  }

  recordOptions.forEach(function (button) {
    button.addEventListener('click', function () {
      selectedBusinessRecord = button.getAttribute('data-payments-record-option') || '';
      if (recordSelected) {
        recordSelected.textContent = selectedBusinessRecord;
      }
      if (verifyRecordName) {
        verifyRecordName.textContent = selectedBusinessRecord;
      }
      if (businessTypeText) {
        businessTypeText.textContent = 'Individual';
      }
      if (recordDropdown) {
        recordDropdown.hidden = true;
      }
    });
  });

  if (businessRecordContinue) {
    businessRecordContinue.addEventListener('click', function () {
      closeModal(businessRecordModal);
      openModal(verifyModal);
    });
  }

  verifyModeInputs.forEach(function (input) {
    input.addEventListener('change', updateVerifyMode);
  });
  updateVerifyMode();

  if (verifyBack) {
    verifyBack.addEventListener('click', function () {
      closeModal(verifyModal);
      openModal(businessRecordModal);
    });
  }

  if (verifySubmit) {
    verifySubmit.addEventListener('click', function () {
      closeModal(verifyModal);
    });
  }

  if (uploadPanSubmit) {
    uploadPanSubmit.addEventListener('click', function () {
      if (uploadPanRow) {
        uploadPanRow.hidden = false;
      }
      closeModal(uploadPanModal);
    });
  }

  if (uploadIdentitySubmit) {
    uploadIdentitySubmit.addEventListener('click', function () {
      if (uploadIdentityRow) {
        uploadIdentityRow.hidden = false;
      }
      closeModal(uploadIdentityModal);
    });
  }

  if (websiteSubmit) {
    websiteSubmit.addEventListener('click', function () {
      if (websiteDisplay) {
        websiteDisplay.hidden = false;
      }
      if (policyTermsDisplay) {
        policyTermsDisplay.hidden = false;
      }
      if (policyRefundDisplay) {
        policyRefundDisplay.hidden = false;
      }
      if (summaryTermsUrl) {
        summaryTermsUrl.textContent = withFallback(websiteUrlInput ? websiteUrlInput.value.trim() : '');
      }
      if (summaryRefundUrl) {
        summaryRefundUrl.textContent = withFallback(websiteUrlInput ? websiteUrlInput.value.trim() : '');
      }
      closeModal(websiteModal);
    });
  }

  [descriptionNature, descriptionOfferings, descriptionPaymentsFor].forEach(function (field) {
    if (!field) {
      return;
    }
    field.addEventListener('input', refreshDescriptionPreview);
  });
  refreshDescriptionPreview();

  if (descriptionSubmit) {
    descriptionSubmit.addEventListener('click', function () {
      generatedDescription = buildGeneratedDescription();
      if (descriptionError) {
        descriptionError.hidden = !!generatedDescription;
      }
      if (!generatedDescription) {
        return;
      }
      closeModal(descriptionModal);
    });
  }

  if (accountNumberInput) {
    accountNumberInput.addEventListener('input', validateBankAccount);
  }
  if (confirmAccountInput) {
    confirmAccountInput.addEventListener('input', validateBankAccount);
  }
  if (ifscInput) {
    ifscInput.addEventListener('input', function () {
      ifscInput.value = ifscInput.value.toUpperCase();
      validateBankAccount();
    });
  }

  if (termsCheck && termsError) {
    termsCheck.addEventListener('change', function () {
      termsError.hidden = termsCheck.checked;
    });
  }

  stepNextButtons.forEach(function (button) {
    button.addEventListener('click', function () {
      var nextStep = button.getAttribute('data-payments-step-next');
      if (nextStep === '5' && !validateBankAccount()) {
        return;
      }
      renderStep(nextStep);
    });
  });

  stepPrevButtons.forEach(function (button) {
    button.addEventListener('click', function () {
      renderStep(button.getAttribute('data-payments-step-prev'));
    });
  });

  stepJumpButtons.forEach(function (button) {
    button.addEventListener('click', function () {
      renderStep(button.getAttribute('data-payments-step-jump'));
    });
  });

  if (finalSubmit) {
    finalSubmit.addEventListener('click', function () {
      updateSummary();
      if (termsCheck && !termsCheck.checked) {
        if (termsError) {
          termsError.hidden = false;
        }
        return;
      }
      if (termsError) {
        termsError.hidden = true;
      }
      window.alert('Zoho Payments account details submitted for verification.');
    });
  }

  [
    businessRecordModal,
    verifyModal,
    uploadPanModal,
    uploadIdentityModal,
    websiteModal,
    descriptionModal
  ].forEach(function (modal) {
    if (!modal) {
      return;
    }
    modal.addEventListener('click', function (event) {
      if (event.target === modal) {
        closeModal(modal);
      }
    });
  });

  document.addEventListener('click', function (event) {
    var insideCustomSelect = event.target.closest('[data-payments-select]');
    if (!insideCustomSelect) {
      closeAllSelects();
    }
    if (!recordDropdown || recordDropdown.hidden) {
      return;
    }
    var insideTrigger = recordSelectTrigger && recordSelectTrigger.contains(event.target);
    var insideDropdown = recordDropdown.contains(event.target);
    if (!insideTrigger && !insideDropdown) {
      recordDropdown.hidden = true;
    }
  });

  renderStep(currentStep);
});
</script>
</body>
</html>



