@php
    $hostedCustomerFlowsEndpoints = [
        'data' => route('hosted-customer-flows.data'),
        'save' => route('hosted-customer-flows.save'),
    ];
@endphp

<x-filament-panels::page>
    <section class="dashboard-root-section flex flex-col gap-y-8">
        <div class="dashboard-content-wrapper">
            <div id="hosted-customer-flows-root">
                <div class="full-page-loader" id="hcf-page-loader" style="display: none;">
                    <div class="loader-content">
                        <div class="spinner" aria-hidden="true"></div>
                        <div class="loader-text" id="hcf-page-loader-text">Loading hosted customer flows...</div>
                    </div>
                </div>

                <div
                    class="hcf-page"
                    id="hosted-customer-flows-page"
                    data-endpoints='@json($hostedCustomerFlowsEndpoints)'
                >
                    <div class="hcf-page-header">
                        <h1 class="hcf-page-title">Hosted Customer Flows</h1>
                        <p class="hcf-page-subtitle">Configure SMS-hosted acquisition, checkout, account, and support widgets for the active tenant.</p>
                    </div>

                    <div class="hcf-tabs" id="hcf-tabs"></div>

                    <div class="hcf-page-content" id="hcf-page-content" hidden>
                        <div class="hcf-layout">
                            <div class="hcf-left-column" id="hcf-left-column"></div>
                            <div class="hcf-right-column" id="hcf-right-column"></div>
                        </div>
                        <div class="hcf-bottom-row" id="hcf-bottom-row" hidden></div>
                    </div>

                    <div class="hcf-tooltip-bubble" id="hcf-tooltip-bubble" hidden></div>

                    <div class="hcf-picker-popover" id="hcf-color-picker" hidden>
                        <div class="hcf-picker-panel">
                            <div class="hcf-picker-spectrum" data-picker="spectrum">
                                <span class="hcf-picker-spectrum-cursor" data-picker="spectrum-cursor"></span>
                            </div>
                            <div class="hcf-picker-controls">
                                <span class="hcf-picker-current" data-picker="current"></span>
                                <div class="hcf-picker-hue" data-picker="hue">
                                    <span class="hcf-picker-hue-cursor" data-picker="hue-cursor"></span>
                                </div>
                            </div>
                            <div class="hcf-picker-rgb">
                                <label class="hcf-picker-channel">
                                    <input type="number" min="0" max="255" data-picker-rgb="r">
                                    <span>R</span>
                                </label>
                                <label class="hcf-picker-channel">
                                    <input type="number" min="0" max="255" data-picker-rgb="g">
                                    <span>G</span>
                                </label>
                                <label class="hcf-picker-channel">
                                    <input type="number" min="0" max="255" data-picker-rgb="b">
                                    <span>B</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</x-filament-panels::page>

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/loaders.css') }}">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Lato:wght@400;700&family=Lora:wght@400;600;700&family=Roboto:wght@400;500;700&family=Roboto+Slab:wght@400;600;700&family=Manrope:wght@400;600;700;800&family=Nunito:wght@400;600;700;800&display=swap');

        #hosted-customer-flows-root {
            margin-right: 12px !important;
            margin-left: 15px !important;
        }

        .hcf-page {
            position: relative;
            color: #1c2f4d;
            font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif;
            --hcf-sidebar-width: 336px;
            --hcf-core-blue-50: #eff6ff;
            --hcf-core-blue-100: #dbeafe;
            --hcf-core-blue-500: #3b82f6;
            --hcf-core-blue-600: #2563eb;
            --hcf-core-blue-700: #1d4ed8;
            --hcf-core-blue-900: #1e3a8a;
            --hcf-tab-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
        }

        .hcf-page,
        .hcf-page button,
        .hcf-page input,
        .hcf-page select,
        .hcf-page textarea {
            font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif;
        }

        .hcf-page-header {
            margin-bottom: 18px;
        }

        .hcf-page-title {
            margin: 0;
            font-size: 39px;
            line-height: 1.05;
            font-weight: 700;
            /* letter-spacing: -0.03em; */
            color: #0a1630;
        }

        .hcf-page-subtitle {
            display: none;
        }

        .hcf-page-content[hidden] {
            display: none !important;
        }

        .hcf-page-content {
            min-width: 0;
        }

        .hcf-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            align-items: center;
            overflow-x: auto;
            margin-bottom: 1rem;
            padding: 0 0 0.5rem;
            border-bottom: 0;
            scrollbar-width: none;
        }

        .hcf-tabs::-webkit-scrollbar {
            display: none;
        }

        .hcf-tab-button {
            border: 1px solid transparent;
            background: #f3f3f6;
            color: #6b7280;
            font-size: 14px;
            line-height: 1.2;
            font-weight: 600;
            min-height: 40px;
            padding: 0 16px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
            cursor: pointer;
            transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
        }

        .hcf-tab-button:hover {
            background: #eceff4;
            color: #1f2937;
        }

        .hcf-tab-button:focus-visible {
            outline: none;
            border-color: #dbe4f0;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        }

        .hcf-tab-button.is-active {
            background: #ffffff;
            color: #111827;
            border-color: #e5e7eb;
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
        }

        .hcf-tab-button.is-active:hover {
            background: #ffffff;
        }

        .hcf-tab-button-icon {
            width: 16px;
            height: 16px;
            display: block;
            flex: 0 0 auto;
            color: inherit;
        }

        .hcf-layout {
            display: grid;
            grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
            gap: 28px;
            align-items: start;
        }

        .hcf-left-column,
        .hcf-right-column {
            min-width: 0;
            width: 100%;
            max-width: 100%;
        }

        .hcf-right-column {
            overflow: hidden;
        }

        .hcf-bottom-row {
            margin-top: 16px;
        }

        .hcf-bottom-row[hidden] {
            display: none !important;
        }

        .hcf-bottom-row-panels {
            display: grid;
            gap: 16px;
            justify-content: start;
        }

        .hcf-bottom-row-panels.is-compact {
            max-width: var(--hcf-sidebar-width);
        }

        .hcf-bottom-row-panels.is-compact .hcf-card {
            width: 100%;
        }

        .hcf-bottom-row-panels.is-info {
            grid-template-columns: repeat(auto-fit, minmax(280px, calc(var(--hcf-sidebar-width) - 8px)));
            max-width: calc((var(--hcf-sidebar-width) * 2) - 8px);
        }

        .hcf-stack {
            display: grid;
            gap: 18px;
        }

        .hcf-panel-heading {
            display: flex;
            align-items: center;
            gap: 10px;
            min-height: 28px;
        }

        .hcf-panel-heading h2 {
            margin: 0;
            font-size: 16px;
            line-height: 1.25;
            font-weight: 800;
            color: #111111;
        }

        .hcf-card {
            background: #ffffff;
            border: 1px solid rgba(15, 23, 42, 0.03);
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
            overflow: visible;
        }

        .hcf-card-body {
            padding: 26px;
        }

        .hcf-settings-card .hcf-card-body {
            padding: 24px 28px 26px;
        }

        .hcf-form {
            display: grid;
            gap: 22px;
        }

        .hcf-field {
            display: grid;
            gap: 9px;
            min-width: 0;
        }

        .hcf-field-label-row {
            display: flex;
            align-items: center;
            gap: 7px;
            min-height: 20px;
        }

        .hcf-field-label {
            font-size: 13px;
            line-height: 1.3;
            font-weight: 600;
            color: #5f6e86;
        }

        .hcf-help-trigger {
            border: 0;
            padding: 0;
            width: 14px;
            height: 14px;
            border-radius: 999px;
            background: transparent;
            color: #7d8190;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: color 0.18s ease;
        }

        .hcf-help-trigger:hover,
        .hcf-help-trigger:focus-visible,
        .hcf-help-trigger.is-active {
            color: #0b1d4d;
            outline: none;
        }

        .hcf-help-trigger svg {
            width: 14px;
            height: 14px;
            display: block;
        }

        .hcf-input-shell,
        .hcf-select-button {
            width: 100%;
            min-height: 40px;
            border: 1px solid #d8e4f7;
            border-radius: 9px;
            background: #ffffff;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
            transition: border-color 0.18s ease, box-shadow 0.18s ease;
        }

        .hcf-input-shell {
            display: flex;
            align-items: stretch;
            overflow: hidden;
        }

        .hcf-input-shell.has-suffix .hcf-input {
            padding-right: 8px;
        }

        .hcf-input-shell.is-focused,
        .hcf-select-wrap.is-open .hcf-select-button,
        .hcf-select-button:focus-visible {
            border-color: #3f67f7;
            box-shadow: 0 0 0 2px rgba(63, 103, 247, 0.12);
            outline: none;
        }

        .hcf-input {
            width: 100%;
            min-width: 0;
            border: 0;
            padding: 11px 14px;
            background: transparent;
            color: #1c2f4d;
            font-size: 14px;
            line-height: 1.2;
            font-weight: 600;
        }

        .hcf-input::placeholder {
            color: #a3acb9;
            font-weight: 500;
        }

        .hcf-input:focus {
            outline: none;
        }

        .hcf-input-suffix {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 38px;
            padding: 0 12px 0 8px;
            color: #b1b7c2;
            font-size: 13px;
            font-weight: 700;
        }

        .hcf-color-shell .hcf-input {
            padding-right: 6px;
        }

        .hcf-color-chip {
            flex: 0 0 40px;
            border: 0;
            border-left: 1px solid #d8e4f7;
            background: var(--hcf-swatch, #ffffff);
            cursor: pointer;
        }

        .hcf-select-wrap {
            position: relative;
        }

        .hcf-select-button {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 0 13px;
            color: #1c2f4d;
            font-size: 14px;
            line-height: 1.2;
            font-weight: 600;
            cursor: pointer;
        }

        .hcf-select-button span:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .hcf-select-chevron {
            flex: 0 0 auto;
            color: #7f8794;
            transition: transform 0.18s ease;
        }

        .hcf-select-wrap.is-open .hcf-select-chevron {
            transform: rotate(180deg);
        }

        .hcf-select-chevron svg {
            width: 14px;
            height: 14px;
            display: block;
        }

        .hcf-select-menu {
            position: absolute;
            top: calc(100% + 6px);
            right: 0;
            left: 0;
            z-index: 18;
            background: #ffffff;
            border: 1px solid #d8e4f7;
            border-radius: 10px;
            box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
            padding: 6px 0;
            overflow: hidden;
        }

        .hcf-select-option {
            width: 100%;
            border: 0;
            background: transparent;
            color: #252f3f;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 10px 12px;
            font-size: 14px;
            line-height: 1.25;
            font-weight: 600;
            text-align: left;
            cursor: pointer;
        }

        .hcf-select-option:hover,
        .hcf-select-option:focus-visible {
            background: #ffffff;
            outline: none;
        }

        .hcf-select-option.is-selected {
            background: #efefef;
        }

        .hcf-select-check {
            width: 16px;
            height: 16px;
            color: var(--hcf-core-blue-600);
            opacity: 0;
        }

        .hcf-select-option.is-selected .hcf-select-check {
            opacity: 1;
        }

        .hcf-inline-toggle {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px;
            border: 1px solid #cad1dc;
            border-radius: 10px;
            background: #ffffff;
            width: fit-content;
            min-width: 138px;
        }

        .hcf-toggle-button {
            min-width: 62px;
            border: 0;
            border-radius: 7px;
            padding: 8px 12px;
            background: transparent;
            color: #596579;
            font-size: 13px;
            line-height: 1.15;
            font-weight: 700;
            cursor: pointer;
        }

        .hcf-toggle-button.is-active {
            background: var(--hcf-core-blue-600);
            color: #ffffff;
        }

        .hcf-toggle-button.is-dark-active {
            background: #16223a;
            color: #ffffff;
        }

        .hcf-identity-note,
        .hcf-card-description,
        .hcf-info-copy,
        .hcf-embed-copy {
            margin: 0;
            color: #677487;
            font-size: 13px;
            line-height: 1.6;
        }

        .hcf-identity-note button {
            border: 0;
            background: transparent;
            padding: 0;
            color: var(--hcf-core-blue-600);
            font-weight: 700;
            cursor: pointer;
        }

        .hcf-card-footer {
            display: flex;
            justify-content: flex-end;
            padding-top: 8px;
        }

        .hcf-primary-button,
        .hcf-secondary-button {
            min-height: 38px;
            border: 0;
            border-radius: 9px;
            padding: 0 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 14px;
            line-height: 1.2;
            font-weight: 800;
            cursor: pointer;
            transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
        }

        .hcf-primary-button {
            background: #3f67f7;
            color: #ffffff;
        }

        .hcf-primary-button:disabled {
            background: #d4d6db;
            color: #ffffff;
            cursor: not-allowed;
            box-shadow: none;
        }

        .hcf-secondary-button {
            background: #ecf0f4;
            color: #1f2a3d;
        }

        .hcf-card-title,
        .hcf-embed-section-title {
            margin: 0 0 12px;
            font-size: 16px;
            line-height: 1.25;
            font-weight: 800;
            color: #111111;
        }

        .hcf-info-grid {
            display: grid;
            gap: 16px;
        }

        .hcf-info-card {
            background: #f8f8f8;
            border: 1px solid rgba(15, 23, 42, 0.03);
            border-radius: 12px;
            padding: 18px 20px;
            box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
        }

        .hcf-info-step {
            color: #65c58d;
            font-size: 28px;
            line-height: 1;
            font-weight: 800;
        }

        .hcf-info-title {
            margin: 10px 0 6px;
            font-size: 16px;
            line-height: 1.25;
            font-weight: 800;
            color: #111111;
        }

        .hcf-code-block {
            margin-top: 10px;
            border-radius: 10px;
            background: #16223a;
            border: 1px solid #26324f;
            overflow: auto;
        }

        .hcf-code-block pre {
            margin: 0;
            padding: 16px;
            color: #dbe5ff;
            font-size: 12px;
            line-height: 1.6;
            white-space: pre;
        }

        .hcf-code-copy {
            width: 100%;
            margin-top: 12px;
        }

        .hcf-preview-shell {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            background: #f4f8ff;
            border: 1px solid #d8e4f7;
            border-radius: 12px;
            padding: 16px 18px 18px;
            min-height: 597px;
        }

        .hcf-preview-topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            margin-bottom: 8px;
        }

        .hcf-device-switch {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px;
            border-radius: 8px;
            background: #dfe4eb;
        }

        .hcf-device-button {
            width: 28px;
            height: 28px;
            border: 1px solid transparent;
            border-radius: 6px;
            background: transparent;
            color: #4d5563;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .hcf-device-button.is-active {
            background: #ffffff;
            border-color: #cfd6df;
            color: #1f2a3d;
        }

        .hcf-device-button svg,
        .hcf-top-link svg {
            width: 14px;
            height: 14px;
            display: block;
        }

        .hcf-top-links {
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: 18px;
        }

        .hcf-top-link {
            border: 0;
            background: transparent;
            padding: 0;
            color: #6a7483;
            font-size: 12px;
            line-height: 1.2;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            cursor: pointer;
        }

        .hcf-preview-frame {
            margin: 0 auto;
            min-width: 0;
            transition: width 0.18s ease;
        }

        .hcf-right-column .hcf-preview-shell .hcf-preview-frame.is-desktop {
            width: 100%;
            max-width: 100%;
        }

        .hcf-preview-frame.is-mobile {
            width: min(100%, 400px);
        }

        .hcf-checkout-preview {
            display: grid;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            grid-template-columns: minmax(0, 1.02fr) minmax(352px, 0.98fr);
            min-height: 526px;
            border-radius: var(--hcf-radius, 12px);
            overflow: hidden;
            background: var(--hcf-panel-shell, #ffffff);
            box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
        }

        .hcf-checkout-preview.is-reversed {
            grid-template-columns: minmax(352px, 0.98fr) minmax(0, 1.02fr);
        }

        .hcf-preview-frame.is-mobile .hcf-checkout-preview,
        .hcf-signup-preview,
        .hcf-account-card,
        .hcf-preview-frame.is-mobile .hcf-account-card,
        .hcf-preview-frame.is-mobile .hcf-plan-grid {
            grid-template-columns: 1fr;
        }

        .hcf-checkout-primary {
            padding: 30px 36px 28px 38px;
            color: #ffffff;
        }

        .hcf-checkout-secondary {
            padding: 14px 14px 16px;
            background: var(--hcf-panel, #ffffff);
            color: #1c2f4d;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .hcf-checkout-primary-inner {
            width: 100%;
            max-width: 356px;
        }

        .hcf-checkout-primary-label {
            font-size: 16px;
            line-height: 1.2;
            font-weight: 800;
            margin-bottom: 12px;
        }

        .hcf-plan-summary {
            border: 1px solid rgba(255, 255, 255, 0.28);
            border-radius: calc(var(--hcf-radius, 12px) - 2px);
            overflow: hidden;
        }

        .hcf-plan-summary-top {
            padding: 20px 20px 17px;
        }

        .hcf-plan-summary-title {
            font-size: 18px;
            line-height: 1.25;
            font-weight: 800;
        }

        .hcf-plan-summary-price {
            margin-top: 6px;
            display: flex;
            align-items: baseline;
            gap: 9px;
            flex-wrap: wrap;
        }

        .hcf-plan-summary-price strong {
            font-size: 19px;
            line-height: 1.15;
            font-weight: 800;
        }

        .hcf-plan-summary-price span {
            font-size: 14px;
            line-height: 1.2;
            font-weight: 600;
        }

        .hcf-plan-summary-note {
            padding: 14px 20px 15px;
            border-top: 1px solid rgba(255, 255, 255, 0.22);
            color: rgba(255, 255, 255, 0.92);
            font-size: 14px;
            line-height: 1.45;
            font-weight: 500;
        }

        .hcf-coupon {
            margin: 20px 0 18px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-height: 36px;
            padding: 0 18px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.24);
            color: #ffffff;
            font-size: 14px;
            line-height: 1.2;
            font-weight: 600;
            width: fit-content;
        }

        .hcf-price-rows {
            display: grid;
            gap: 6px;
            margin-top: 16px;
        }

        .hcf-price-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            font-size: 15px;
            line-height: 1.45;
            font-weight: 600;
        }

        .hcf-price-row strong {
            font-size: 16px;
            font-weight: 800;
        }

        .hcf-price-row.is-total {
            margin-top: 10px;
            padding-top: 12px;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            font-weight: 800;
        }

        .hcf-payment-card {
            border: 1px solid #d8e4f7;
            border-radius: calc(var(--hcf-radius, 12px) - 2px);
            background: var(--hcf-payment-panel, #ffffff);
            padding: 14px 14px 16px;
        }

        .hcf-payment-title {
            display: flex;
            align-items: center;
            gap: 11px;
            font-size: 16px;
            line-height: 1.2;
            font-weight: 600;
            color: #0a1630;
        }

        .hcf-payment-icon {
            width: 29px;
            height: 22px;
            border-radius: 4px;
            background: #0b1d4d;
            color: #ffffff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .hcf-payment-icon svg {
            width: 16px;
            height: 16px;
        }

        .hcf-payment-required {
            margin-top: 9px;
            color: #5a6a85;
            font-size: 12px;
            line-height: 1.35;
            font-weight: 500;
        }

        .hcf-form-mini {
            display: grid;
            gap: 9px;
            margin-top: 8px;
        }

        .hcf-mini-label {
            display: grid;
            gap: 5px;
            color: #1c2f4d;
            font-size: 13px;
            line-height: 1.3;
            font-weight: 600;
        }

        .hcf-mini-input {
            width: 100%;
            min-height: 32px;
            border: 1px solid #d8e4f7;
            border-radius: 10px;
            background: #ffffff;
            color: #b2b2b2;
            padding: 7px 12px;
            font-size: 14px;
            line-height: 1.2;
            font-weight: 500;
        }

        .hcf-mini-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 11px;
        }

        .hcf-card-brands {
            display: flex;
            align-items: center;
            gap: 4px;
            margin-top: -1px;
        }

        .hcf-card-brand {
            min-width: 20px;
            height: 11px;
            border-radius: 2px;
            background: #ffffff;
            border: 1px solid #d4d8df;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 2px;
            font-size: 7px;
            line-height: 1;
            font-weight: 800;
            color: #16223a;
        }

        .hcf-card-brand.is-master {
            background: linear-gradient(90deg, #eb001b 0 50%, #f79e1b 50% 100%);
            color: transparent;
        }

        .hcf-card-brand.is-visa {
            color: #1434cb;
        }

        .hcf-mini-addon {
            position: relative;
        }

        .hcf-mini-addon .hcf-mini-input {
            padding-right: 34px;
        }

        .hcf-mini-addon::after {
            content: "";
            position: absolute;
            right: 10px;
            bottom: 10px;
            width: 18px;
            height: 10px;
            border-radius: 999px;
            background: #eef1f6;
            border: 1px solid #d9dde4;
            box-shadow: inset -7px 0 0 0 #9ea7b5;
        }

        .hcf-mini-addon::before {
            content: "";
            position: absolute;
            right: 12px;
            bottom: 13px;
            width: 4px;
            height: 4px;
            border-radius: 999px;
            background: #ff5959;
            z-index: 1;
        }

        .hcf-pay-button {
            min-height: 38px;
            border: 0;
            border-radius: 9px;
            background: var(--hcf-core-blue-600);
            color: #ffffff;
            font-size: 16px;
            line-height: 1.2;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: default;
            padding: 0 14px;
        }

        .hcf-payment-option {
            min-height: 44px;
            border: 1px solid #d8e4f7;
            border-radius: calc(var(--hcf-radius, 12px) - 2px);
            background: #ffffff;
            padding: 0 13px;
            display: flex;
            align-items: center;
            gap: 11px;
            color: #0a1630;
            font-size: 16px;
            line-height: 1.2;
            font-weight: 600;
        }

        .hcf-payment-badge {
            min-width: 34px;
            height: 20px;
            border-radius: 5px;
            border: 1px solid #cfd5de;
            background: #ffffff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 4px;
            font-size: 10px;
            line-height: 1;
            font-weight: 800;
            color: #111111;
        }

        .hcf-preview-footer-copy {
            margin-top: 2px;
            color: #6b7d9c;
            font-size: 11px;
            line-height: 1.35;
            font-weight: 500;
        }

        .hcf-brand-footer {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-top: 3px;
            color: #6b7d9c;
            font-size: 11px;
            line-height: 1.35;
            font-weight: 500;
        }

        .hcf-brand-footer svg {
            width: 11px;
            height: 11px;
        }

        .hcf-pricing-preview {
            background: linear-gradient(135deg, #0f172a 0%, var(--hcf-core-blue-900) 48%, var(--hcf-core-blue-700) 100%);
            border-radius: 18px;
            padding: 34px;
            color: #ffffff;
            box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
        }

        .hcf-pricing-title {
            margin: 0;
            text-align: center;
            font-size: 44px;
            line-height: 1.1;
            font-weight: 700;
            color: #ffffff !important;
        }

        .hcf-pricing-subtitle {
            margin: 10px 0 30px;
            text-align: center;
            color: rgba(255, 255, 255, 0.72);
            font-size: 14px;
        }

        .hcf-plan-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
        }

        .hcf-plan-card {
            position: relative;
            border: 1px solid rgba(148, 163, 184, 0.18);
            border-radius: 16px;
            padding: 26px 24px 22px;
            background: rgba(15, 23, 42, 0.12);
        }

        .hcf-plan-card.is-highlighted {
            border-color: var(--hcf-core-blue-500);
            box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.36);
        }

        .hcf-plan-badge {
            position: absolute;
            top: -12px;
            left: 22px;
            display: inline-flex;
            align-items: center;
            min-height: 25px;
            padding: 0 11px;
            border-radius: 999px;
            background: var(--hcf-core-blue-600);
            color: #ffffff;
            font-size: 12px;
            font-weight: 800;
        }

        .hcf-plan-name {
            font-size: 16px;
            font-weight: 700;
        }

        .hcf-plan-price {
            margin-top: 10px;
            font-size: 42px;
            line-height: 1;
            font-weight: 800;
        }

        .hcf-plan-copy {
            margin: 14px 0 16px;
            color: rgba(255, 255, 255, 0.76);
            font-size: 14px;
            line-height: 1.6;
        }

        .hcf-plan-list {
            display: grid;
            gap: 9px;
            font-size: 14px;
            line-height: 1.45;
        }

        .hcf-plan-list span::before {
            content: "✓";
            margin-right: 8px;
            color: var(--hcf-core-blue-500);
            font-weight: 800;
        }

        .hcf-plan-button {
            width: 100%;
            min-height: 42px;
            margin-top: 20px;
            border: 0;
            border-radius: 11px;
            background: var(--hcf-core-blue-600);
            color: #ffffff;
            font-size: 14px;
            font-weight: 800;
        }

        .hcf-signup-preview,
        .hcf-account-shell,
        .hcf-care-shell {
            border-radius: var(--hcf-radius, 12px);
            box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
        }

        .hcf-signup-preview {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            background: var(--hcf-panel, #ffffff);
            padding: 38px 28px;
        }

        .hcf-signup-card {
            width: min(100%, 340px);
            margin: 0 auto;
        }

        .hcf-signup-title {
            margin: 0;
            font-size: 32px;
            line-height: 1.05;
            font-weight: 800;
            color: #111111;
        }

        .hcf-signup-subtitle {
            margin: 10px 0 18px;
            font-size: 14px;
            line-height: 1.5;
            font-weight: 600;
            color: #2d3748;
        }

        .hcf-signup-footer {
            margin-top: 14px;
            text-align: center;
            font-size: 14px;
            font-weight: 600;
        }

        .hcf-account-preview,
        .hcf-care-preview {
            padding-top: 6px;
        }

        .hcf-account-shell {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            background: var(--hcf-background, #f8fafd);
            padding: 18px;
        }

        .hcf-account-card {
            display: grid;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            grid-template-columns: minmax(188px, 220px) minmax(0, 1fr);
            gap: 0;
            border-radius: calc(var(--hcf-radius, 12px) + 2px);
            overflow: hidden;
            background: var(--hcf-card, #ffffff);
        }

        .hcf-account-sidebar {
            padding: 24px 20px;
            border-right: 1px solid #edf0f3;
            background: var(--hcf-panel, #ffffff);
        }

        .hcf-avatar {
            width: 54px;
            height: 54px;
            border-radius: 999px;
            background: #e8ebef;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #95a0af;
            font-size: 22px;
        }

        .hcf-account-email {
            margin-top: 12px;
            color: #111111;
            font-size: 13px;
            line-height: 1.5;
            font-weight: 700;
            word-break: break-word;
        }

        .hcf-account-nav {
            display: grid;
            gap: 13px;
            margin-top: 20px;
        }

        .hcf-account-nav span {
            color: #9ba4b2;
            font-size: 14px;
            line-height: 1.3;
            font-weight: 700;
        }

        .hcf-account-nav span.is-active {
            color: var(--hcf-accent, var(--hcf-core-blue-600));
        }

        .hcf-account-main {
            padding: 24px;
            background: var(--hcf-panel, #ffffff);
        }

        .hcf-empty-panel {
            margin-top: 15px;
            min-height: 160px;
            border: 1px solid #edf0f3;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #6b7280;
            padding: 18px;
            font-size: 14px;
            line-height: 1.6;
        }

        .hcf-care-shell {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            background: var(--hcf-background, var(--hcf-core-blue-700));
            padding: 18px 16px 24px;
            color: #ffffff;
        }

        .hcf-care-title {
            margin: 0 0 18px;
            text-align: center;
            font-size: 30px;
            line-height: 1.08;
            font-weight: 800;
        }

        .hcf-faq-group {
            width: min(100%, 420px);
            margin: 0 auto;
            border-radius: calc(var(--hcf-radius, 12px) - 2px);
            background: var(--hcf-panel, #ffffff);
            color: #111111;
            padding: 14px;
        }

        .hcf-faq-heading {
            margin: 8px 0 10px;
            font-size: 14px;
            line-height: 1.2;
            font-weight: 800;
        }

        .hcf-faq-item {
            border: 1px solid #edf0f3;
            border-radius: 11px;
            background: #ffffff;
            margin-bottom: 8px;
            overflow: hidden;
        }

        .hcf-faq-trigger {
            width: 100%;
            border: 0;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            min-height: 44px;
            padding: 0 14px;
            color: #111111;
            font-size: 14px;
            line-height: 1.45;
            font-weight: 700;
            text-align: left;
            cursor: pointer;
        }

        .hcf-faq-item.is-open .hcf-faq-trigger {
            color: #0a1630;
        }

        .hcf-faq-answer {
            padding: 0 14px 14px;
            color: #5a6a85;
            font-size: 13px;
            line-height: 1.6;
            font-weight: 500;
            border-top: 1px solid #edf0f3;
            background: #fbfcfe;
        }

        .hcf-faq-answer[hidden] {
            display: none !important;
        }

        .hcf-faq-chevron {
            flex: 0 0 auto;
            color: var(--hcf-accent, var(--hcf-core-blue-600));
            font-size: 20px;
            line-height: 1;
            transition: transform 0.18s ease;
        }

        .hcf-faq-item.is-open .hcf-faq-chevron {
            transform: rotate(90deg);
        }

        .hcf-care-footer {
            margin-top: 16px;
            text-align: center;
        }

        .hcf-care-footer strong {
            display: block;
            margin-bottom: 10px;
        }

        .hcf-embed-block + .hcf-embed-block {
            margin-top: 18px;
        }

        .hcf-embed-label {
            font-size: 13px;
            line-height: 1.3;
            font-weight: 800;
            color: #111111;
        }

        .hcf-tooltip-bubble {
            position: fixed;
            z-index: 35;
            width: 263px;
            padding: 12px 14px;
            border-radius: 6px;
            background: #24335d;
            color: #ffffff;
            font-size: 12px;
            line-height: 1.35;
            font-weight: 600;
            box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
            pointer-events: none;
        }

        .hcf-tooltip-bubble::after {
            content: "";
            position: absolute;
            top: 18px;
            right: -6px;
            width: 0;
            height: 0;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            border-left: 6px solid #24335d;
        }

        .hcf-picker-popover {
            position: fixed;
            z-index: 34;
            width: 188px;
            padding: 0;
            border: 1px solid #c8ced9;
            background: #f8f8f8;
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
        }

        .hcf-picker-popover[hidden] {
            display: none !important;
        }

        .hcf-picker-panel {
            padding: 0;
        }

        .hcf-picker-spectrum {
            position: relative;
            height: 110px;
            cursor: crosshair;
            background:
                linear-gradient(to top, #000000, transparent),
                linear-gradient(to right, #ffffff, hsl(0, 100%, 50%));
        }

        .hcf-picker-spectrum-cursor,
        .hcf-picker-hue-cursor {
            position: absolute;
            display: block;
            pointer-events: none;
        }

        .hcf-picker-spectrum-cursor {
            width: 12px;
            height: 12px;
            margin: -6px 0 0 -6px;
            border: 2px solid #ffffff;
            border-radius: 999px;
            box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.7);
        }

        .hcf-picker-controls {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 18px 4px;
        }

        .hcf-picker-current {
            width: 28px;
            height: 28px;
            border-radius: 999px;
            border: 1px solid rgba(15, 23, 42, 0.12);
            background: #ffffff;
            flex: 0 0 auto;
        }

        .hcf-picker-hue {
            position: relative;
            flex: 1 1 auto;
            height: 10px;
            border-radius: 999px;
            background: linear-gradient(90deg, #ff0000 0%, #ffff00 16.7%, #00ff00 33.4%, #00ffff 50%, #0000ff 66.7%, #ff00ff 83.4%, #ff0000 100%);
            cursor: ew-resize;
        }

        .hcf-picker-hue-cursor {
            top: 50%;
            width: 12px;
            height: 12px;
            margin: -6px 0 0 -6px;
            border-radius: 999px;
            border: 2px solid #ffffff;
            box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.35);
            background: transparent;
        }

        .hcf-picker-rgb {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            padding: 8px 18px 12px;
        }

        .hcf-picker-channel {
            display: grid;
            gap: 4px;
            justify-items: center;
        }

        .hcf-picker-channel input {
            width: 100%;
            height: 28px;
            border: 1px solid #d1d7e0;
            border-radius: 2px;
            background: #ffffff;
            text-align: center;
            color: #1f2937;
            font-size: 13px;
            line-height: 1.15;
            font-weight: 600;
            padding: 0 4px;
        }

        .hcf-picker-channel input:focus {
            outline: none;
            border-color: #77cfa1;
            box-shadow: 0 0 0 2px rgba(119, 207, 161, 0.14);
        }

        .hcf-picker-channel span {
            color: #303846;
            font-size: 12px;
            line-height: 1;
            font-weight: 700;
        }

        .hcf-spinner-inline {
            width: 14px;
            height: 14px;
            border-radius: 999px;
            border: 2px solid rgba(255, 255, 255, 0.45);
            border-top-color: #ffffff;
            animation: hcf-spin 0.8s linear infinite;
        }

        @keyframes hcf-spin {
            to {
                transform: rotate(360deg);
            }
        }

        @media (max-width: 1440px) {
            .hcf-page {
                --hcf-sidebar-width: 308px;
            }

            .hcf-layout {
                gap: 22px;
            }

            .hcf-checkout-preview {
                grid-template-columns: minmax(0, 1fr) minmax(300px, 0.94fr);
            }

            .hcf-checkout-preview.is-reversed {
                grid-template-columns: minmax(300px, 0.94fr) minmax(0, 1fr);
            }

            .hcf-checkout-primary {
                padding: 26px 30px 24px 32px;
            }

            .hcf-checkout-primary-inner {
                max-width: 336px;
            }

            .hcf-account-card {
                grid-template-columns: 180px minmax(0, 1fr);
            }
        }

        @media (max-width: 1280px) {
            .hcf-layout {
                grid-template-columns: 1fr;
            }

            .hcf-preview-frame.is-desktop {
                width: 100%;
            }
        }

        @media (max-width: 767px) {
            .hcf-page-title {
                font-size: 30px;
            }

            .hcf-tabs {
                gap: 10px;
                padding-bottom: 6px;
            }

            .hcf-tab-button {
                font-size: 14px;
                min-height: 38px;
                padding: 0 14px;
            }

            .hcf-card-body,
            .hcf-settings-card .hcf-card-body {
                padding: 18px;
            }

            .hcf-preview-shell {
                padding: 14px;
                min-height: auto;
            }

            .hcf-preview-topbar {
                flex-direction: column;
                align-items: stretch;
            }

            .hcf-top-links {
                justify-content: flex-start;
                gap: 12px;
            }

            .hcf-checkout-preview,
            .hcf-plan-grid,
            .hcf-account-card {
                grid-template-columns: 1fr;
            }

            .hcf-checkout-primary {
                padding: 24px 20px;
            }

            .hcf-checkout-secondary {
                padding: 14px;
            }

            .hcf-pricing-preview {
                padding: 24px 20px;
            }

            .hcf-pricing-title {
                font-size: 30px;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        (function () {
            'use strict';

            function initHostedCustomerFlowsPage() {
                const root = document.getElementById('hosted-customer-flows-root');
                if (!root || root.dataset.initialized === '1') {
                    return;
                }

                root.dataset.initialized = '1';

                const page = document.getElementById('hosted-customer-flows-page');
                const endpoints = JSON.parse(page.dataset.endpoints || '{}');

                const refs = {
                    root,
                    page,
                    loader: document.getElementById('hcf-page-loader'),
                    loaderText: document.getElementById('hcf-page-loader-text'),
                    tabs: document.getElementById('hcf-tabs'),
                    content: document.getElementById('hcf-page-content'),
                    leftColumn: document.getElementById('hcf-left-column'),
                    rightColumn: document.getElementById('hcf-right-column'),
                    bottomRow: document.getElementById('hcf-bottom-row'),
                    tooltip: document.getElementById('hcf-tooltip-bubble'),
                    colorPicker: document.getElementById('hcf-color-picker'),
                };

                const colorPickerRefs = {
                    spectrum: refs.colorPicker?.querySelector('[data-picker="spectrum"]') || null,
                    spectrumCursor: refs.colorPicker?.querySelector('[data-picker="spectrum-cursor"]') || null,
                    hue: refs.colorPicker?.querySelector('[data-picker="hue"]') || null,
                    hueCursor: refs.colorPicker?.querySelector('[data-picker="hue-cursor"]') || null,
                    current: refs.colorPicker?.querySelector('[data-picker="current"]') || null,
                    rgbInputs: refs.colorPicker ? Array.from(refs.colorPicker.querySelectorAll('[data-picker-rgb]')) : [],
                };

                const tabMeta = [
                    { key: 'general-branding', label: 'General Branding', saveable: true },
                    { key: 'pricing-page', label: 'Pricing Page', saveable: false },
                    { key: 'sign-up', label: 'Sign Up', saveable: true },
                    { key: 'checkout', label: 'Checkout', saveable: true },
                    { key: 'user-account', label: 'User Account', saveable: true },
                    { key: 'customer-care', label: 'Customer Care', saveable: true },
                ];

                const TOOLTIP_COPY = {
                    'general-branding': {
                        '__section': 'Add your primary colors to fit your brand style.',
                        'background_color': 'Choose a background color for your widgets. For optimal readability and WCAG compliance, font color will automatically adjust (white or black).',
                        'accent_color': 'Select a secondary color for your widgets. This will be applied to smaller elements like buttons or external links.',
                        'panel_color': 'Choose a panel color for your widgets. This applies to the right side of the checkout, the signup form, and the Customer Care question panel.',
                        'payment_panel_color': 'Choose a color for the payment panel in your widgets. This applies to the payment section of the checkout.',
                        'border_radius': 'Set the border radius for widget panels. Choose a preset or enter a custom value in pixels.',
                        'custom_border_radius': 'Enter a custom border radius value in pixels (0-30).',
                        'font_family': 'Select the font family used across your hosted customer widgets.',
                        'font_custom_url': 'Provide a custom font stylesheet URL for your widgets.',
                        'logo_url': 'Upload your logo to display it in the set new password widget.',
                    },
                    'sign-up': {
                        '__section': 'Configure the look and post-registration behavior for your sign up widget.',
                        'panel_color': 'Choose the panel color used for the sign in and registration widget.',
                        'accent_color': 'Select the accent color applied to the primary sign in and sign up actions.',
                        'redirect_url_after_registration': 'Enter the URL customers should land on after registration completes.',
                        'identity_provider': 'Choose whether sign up uses SMS authentication or your external identity provider.',
                    },
                    'checkout': {
                        '__section': 'Set how the checkout widget looks and behaves for hosted purchases.',
                        'background_color': 'Choose the primary color used for the subscription summary panel.',
                        'panel_color': 'Choose the base color used for the checkout content panel.',
                        'accent_color': 'Select the accent color for payment actions and highlighted controls.',
                        'payment_panel_color': 'Choose the background color used inside the card payment panel.',
                        'terms_conditions_url': 'Enter the URL for your terms and conditions page.',
                        'redirect_url_after_payment': 'Enter the URL customers should land on after a successful payment.',
                        'show_coupon_input_field': 'Choose whether the promo code input should be displayed in checkout.',
                        'checkout_layout': 'Choose whether the checkout summary is shown before or after the payment panel.',
                    },
                    'user-account': {
                        '__section': 'Customize the customer account area and the sections available inside it.',
                        'background_color': 'Choose the overall account page background color.',
                        'panel_color': 'Choose the panel color used for the account layout.',
                        'card_color': 'Choose the inner content card color used inside the account widget.',
                        'accent_color': 'Select the accent color applied to active navigation and actions.',
                        'payment_panel_color': 'Choose the color used for payment-related cards inside the account widget.',
                        'show_payment_history': 'Choose whether the payment history section is visible.',
                        'show_cancellation_survey': 'Choose whether the cancellation survey option is visible.',
                        'show_coupon_input_field': 'Choose whether coupon input controls are available in the account widget.',
                    },
                    'customer-care': {
                        '__section': 'Customize the styling for the hosted customer care and FAQ widget.',
                        'background_color': 'Choose the background color used for the customer care shell.',
                        'panel_color': 'Choose the panel color used for the FAQ content area.',
                        'accent_color': 'Select the accent color used for actions and FAQ indicators.',
                    },
                };

                const BORDER_RADIUS_OPTIONS = [
                    { value: '0', label: 'Sharp (0px)' },
                    { value: '12', label: 'Default (12px)' },
                    { value: '30', label: 'Rounded (30px)' },
                    { value: 'custom', label: 'Custom' },
                ];

                const FONT_FAMILY_OPTIONS = [
                    { value: 'inter', label: 'Default (Plus Jakarta Sans)' },
                    { value: 'lato', label: 'Lato' },
                    { value: 'lora', label: 'Lora' },
                    { value: 'roboto', label: 'Roboto' },
                    { value: 'roboto-slab', label: 'Roboto Slab' },
                    { value: 'custom', label: 'Custom (provide font URL)' },
                ];

                const CUSTOMER_CARE_FAQ_GROUPS = [
                    {
                        heading: 'Account',
                        items: [
                            ['How do I cancel my subscription?', 'Open your account, choose the active subscription, and use the cancel option before the next renewal date to stop future charges.'],
                            ['How do I use my promo code/coupon?', 'Apply your promo code during checkout in the coupon field, then confirm the updated price before completing payment.'],
                            ['Where can I view my plan details?', 'Plan information, billing cycle, and renewal timing are available in the Purchase details section of your customer account.'],
                            ['Why hasn\'t my subscription renewed?', 'Renewal can fail when a card expires, a bank declines the charge, or the subscription was canceled before the billing date.'],
                            ['How do I update account details?', 'Use the Update profile section in the account area to change customer information such as name, email, or profile-related details.'],
                            ['How do I update my plan?', 'Choose a different offer from your account or the pricing page, then confirm the change to move to a new plan or billing period.'],
                        ],
                    },
                    {
                        heading: 'Access',
                        items: [
                            ['What browser should I use?', 'Use a current version of Chrome, Safari, Firefox, or Edge for the most reliable signup, checkout, and account experience.'],
                            ['What if I can\'t log in?', 'Double-check your email and password first, then try the reset flow or sign in again after clearing stale browser session data.'],
                            ['What can I do if the video or stream quality is bad?', 'Check your connection speed, refresh the player, and confirm the device or browser supports the selected playback quality.'],
                        ],
                    },
                    {
                        heading: 'Payments',
                        items: [
                            ['My payment was rejected. What do I do?', 'Verify the card details, billing address, and available funds, then retry or use another payment method if the bank keeps declining it.'],
                            ['How can I request a refund?', 'Submit a support request with your order details so the team can review eligibility according to the merchant refund policy.'],
                        ],
                    },
                ];

                const LEGACY_THEME_COLOR_UPGRADES = {
                    'general-branding': {
                        background_color: { '#a51d2d': '#1d4ed8' },
                        accent_color: { '#0d9488': '#2563eb' },
                    },
                    'sign-up': {
                        accent_color: { '#0d9488': '#2563eb' },
                    },
                    'checkout': {
                        background_color: { '#a51d2d': '#1d4ed8' },
                        accent_color: { '#0d9488': '#2563eb' },
                    },
                    'user-account': {
                        accent_color: { '#4eb7a1': '#2563eb', '#0d9488': '#2563eb' },
                    },
                    'customer-care': {
                        background_color: { '#a51d2d': '#1d4ed8' },
                        accent_color: { '#0d9488': '#2563eb' },
                    },
                };

                const state = {
                    loaded: false,
                    loading: false,
                    saving: false,
                    tabs: {},
                    activeTab: readInitialTab(),
                    dirtyTabs: {},
                    colorPicker: {
                        input: null,
                        anchor: null,
                        h: 0,
                        s: 0,
                        v: 100,
                    },
                    tooltipTrigger: null,
                };

                const customFontLinks = new Set();
                let hideTooltipTimer = null;
                let colorDragMode = null;
                let loaderShownAt = 0;

                function readInitialTab() {
                    const query = new URLSearchParams(window.location.search);
                    const tab = query.get('tab') || 'general-branding';
                    return tabMeta.some(function (item) { return item.key === tab; }) ? tab : 'general-branding';
                }

                function notify(message, type = 'success') {
                    if (typeof window.showAppAlert === 'function') {
                        window.showAppAlert(message, type);
                        return;
                    }

                    window.alert(message);
                }

                function escapeHtml(value) {
                    return String(value ?? '')
                        .replaceAll('&', '&amp;')
                        .replaceAll('<', '&lt;')
                        .replaceAll('>', '&gt;')
                        .replaceAll('"', '&quot;')
                        .replaceAll("'", '&#039;');
                }

                function firstError(errors) {
                    if (!errors || typeof errors !== 'object') {
                        return null;
                    }

                    const key = Object.keys(errors)[0];
                    if (!key || !Array.isArray(errors[key]) || !errors[key].length) {
                        return null;
                    }

                    return errors[key][0];
                }

                function showLoader(message) {
                    if (refs.loaderText && message) {
                        refs.loaderText.textContent = message;
                    }

                    if (refs.loader) {
                        refs.loader.style.display = 'flex';
                        refs.loader.classList.add('show-loader');
                        loaderShownAt = Date.now();
                    }
                }

                function hideLoader() {
                    if (!refs.loader) {
                        return;
                    }

                    const minVisibleMs = 300;
                    const elapsed = Date.now() - loaderShownAt;
                    const remaining = Math.max(0, minVisibleMs - elapsed);

                    window.setTimeout(function () {
                        refs.loader.style.display = 'none';
                        refs.loader.classList.remove('show-loader');
                    }, remaining);
                }

                function request(url, method = 'GET', payload = null) {
                    const headers = {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                    };

                    const options = {
                        method,
                        cache: 'no-store',
                        credentials: 'same-origin',
                        headers,
                    };

                    if (payload !== null) {
                        headers['Content-Type'] = 'application/json';
                        headers['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
                        options.body = JSON.stringify(payload);
                    }

                    const requester = (window.SMSApi && typeof window.SMSApi.fetchJson === 'function')
                        ? window.SMSApi.fetchJson(url, options, {
                            auth: 'if-available',
                            retryOn401: false,
                        })
                        : fetch(url, options).then(async function (response) {
                            const data = await response.json().catch(function () { return {}; });

                            if (!response.ok || data.success === false) {
                                const error = new Error(data.message || 'Request failed.');
                                error.payload = data;
                                throw error;
                            }

                            return data;
                        });

                    return Promise.resolve(requester).then(function (data) {
                        if (!data || data.success === false) {
                            const error = new Error(data?.message || 'Request failed.');
                            error.payload = data;
                            throw error;
                        }

                        return data;
                    });
                }

                function iconDesktop() {
                    return '<svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><rect x="2.75" y="4.25" width="14.5" height="8.75" rx="1.5" stroke="currentColor" stroke-width="1.5"></rect><path d="M7 15.75h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg>';
                }

                function iconMobile() {
                    return '<svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><rect x="6" y="2.75" width="8" height="14.5" rx="1.5" stroke="currentColor" stroke-width="1.5"></rect><path d="M9.25 14.75h1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg>';
                }

                function iconInfo() {
                    return '<svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="6.25" fill="currentColor"></circle><path d="M8 11.2V7.4" stroke="#fff" stroke-width="1.4" stroke-linecap="round"></path><circle cx="8" cy="4.9" r="0.8" fill="#fff"></circle></svg>';
                }

                function iconChevron() {
                    return '<svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M4 6.25 8 10l4-3.75" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
                }

                function iconCheck() {
                    return '<svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="m3.5 8.25 2.75 2.75 6.25-6.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
                }

                function iconProductGuide() {
                    return '<svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5 3.75h8.25A1.75 1.75 0 0 1 15 5.5v10.75H6.75A1.75 1.75 0 0 0 5 18V3.75Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"></path><path d="M5 18V5.5A1.75 1.75 0 0 1 6.75 3.75H15" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"></path></svg>';
                }

                function iconDeveloperGuide() {
                    return '<svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="m7.5 6-3.5 4 3.5 4M12.5 6l3.5 4-3.5 4M11 4l-2 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
                }

                function iconProductDemo() {
                    return '<svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><rect x="2.5" y="4" width="15" height="9.5" rx="1.5" stroke="currentColor" stroke-width="1.5"></rect><path d="M7 16h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg>';
                }

                function iconCard() {
                    return '<svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><rect x="2.5" y="4.5" width="15" height="11" rx="2" fill="#ffffff"></rect><rect x="2.5" y="6" width="15" height="2.5" fill="#0b1d4d"></rect><rect x="5" y="11.25" width="4.5" height="1.25" rx=".625" fill="#0b1d4d"></rect></svg>';
                }

                function iconLock() {
                    return '<svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M6.75 8.5V6.75a3.25 3.25 0 0 1 6.5 0V8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path><rect x="4.5" y="8.5" width="11" height="8" rx="2" fill="currentColor"></rect></svg>';
                }

                function iconBrandingTab() {
                    return '<svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="m4.5 13.5 7.75-7.75a1.5 1.5 0 0 1 2.12 0l.88.88a1.5 1.5 0 0 1 0 2.12L7.5 16.5H4.5v-3Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"></path><path d="M11.75 6.25 13.75 8.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg>';
                }

                function iconPricingTab() {
                    return '<svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><rect x="3.25" y="4.25" width="13.5" height="11.5" rx="2" stroke="currentColor" stroke-width="1.5"></rect><path d="M6.5 8.25h7M6.5 11.5h4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg>';
                }

                function iconSignupTab() {
                    return '<svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M10 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" stroke="currentColor" stroke-width="1.5"></path><path d="M4.75 16c1.25-2.15 3.03-3.25 5.25-3.25S14 13.85 15.25 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path><path d="M15.5 5.25v4.5M13.25 7.5h4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg>';
                }

                function iconCheckoutTab() {
                    return '<svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><rect x="2.75" y="4.75" width="14.5" height="10.5" rx="2" stroke="currentColor" stroke-width="1.5"></rect><path d="M2.75 8.5h14.5" stroke="currentColor" stroke-width="1.5"></path><path d="M6 12h2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg>';
                }

                function iconAccountTab() {
                    return '<svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="6.25" cy="7" r="2.25" stroke="currentColor" stroke-width="1.5"></circle><path d="M3.75 14.75c.55-1.62 1.78-2.5 3.67-2.5 1.88 0 3.11.88 3.66 2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path><rect x="11.75" y="5.25" width="4.5" height="1.5" rx=".75" fill="currentColor"></rect><rect x="11.75" y="9.25" width="4.5" height="1.5" rx=".75" fill="currentColor"></rect><rect x="11.75" y="13.25" width="3.25" height="1.5" rx=".75" fill="currentColor"></rect></svg>';
                }

                function iconSupportTab() {
                    return '<svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M5.25 8a4.75 4.75 0 1 1 9.5 0v4.25a1.5 1.5 0 0 1-1.5 1.5h-1.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path><rect x="3.25" y="8.75" width="2.75" height="4.5" rx="1.25" stroke="currentColor" stroke-width="1.5"></rect><rect x="14" y="8.75" width="2.75" height="4.5" rx="1.25" stroke="currentColor" stroke-width="1.5"></rect><path d="M10 15.75h2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg>';
                }

                function tabIcon(tab) {
                    return ({
                        'general-branding': iconBrandingTab(),
                        'pricing-page': iconPricingTab(),
                        'sign-up': iconSignupTab(),
                        'checkout': iconCheckoutTab(),
                        'user-account': iconAccountTab(),
                        'customer-care': iconSupportTab(),
                    })[tab] || iconInfo();
                }

                function getActiveTabMeta() {
                    return tabMeta.find(function (item) {
                        return item.key === state.activeTab;
                    }) || tabMeta[0];
                }

                function tabLabel(tab) {
                    return tabMeta.find(function (item) { return item.key === tab; })?.label || tab;
                }

                function upgradeLegacyThemeDefaults(tab, tabState) {
                    if (!tabState || !tabState.settings) {
                        return;
                    }

                    const upgrades = LEGACY_THEME_COLOR_UPGRADES[tab];
                    if (!upgrades) {
                        return;
                    }

                    Object.keys(upgrades).forEach(function (field) {
                        const currentValue = String(tabState.settings[field] || '').trim().toLowerCase();
                        const nextValue = upgrades[field][currentValue];

                        if (nextValue) {
                            tabState.settings[field] = nextValue;
                        }
                    });
                }

                function getTabState(tab = state.activeTab) {
                    if (!state.tabs[tab]) {
                        state.tabs[tab] = { settings: {}, embed_codes: {} };
                    }

                    if (!state.tabs[tab].settings) {
                        state.tabs[tab].settings = {};
                    }

                    if (!state.tabs[tab].embed_codes) {
                        state.tabs[tab].embed_codes = {};
                    }

                    return state.tabs[tab];
                }

                function updateQueryString(tab) {
                    const url = new URL(window.location.href);
                    url.searchParams.set('tab', tab);
                    window.history.replaceState({}, '', url.toString());
                }

                function markTabDirty(tab, dirty = true) {
                    state.dirtyTabs[tab] = dirty;
                    updateSaveButtonState();
                }

                function updateSaveButtonState() {
                    const saveButton = refs.leftColumn.querySelector('[data-action="save-tab"]');
                    if (!saveButton) {
                        return;
                    }

                    const activeMeta = getActiveTabMeta();
                    if (!activeMeta.saveable) {
                        saveButton.disabled = true;
                        return;
                    }

                    saveButton.disabled = !state.dirtyTabs[state.activeTab] || state.saving;
                }

                function isHexColor(value) {
                    return /^#([A-Fa-f0-9]{6})$/.test(String(value || '').trim());
                }

                function normalizeColorInput(value) {
                    const raw = String(value || '').trim().replace(/^#/, '');

                    if (!raw) {
                        return '';
                    }

                    if (/^[A-Fa-f0-9]{3}$/.test(raw)) {
                        return '#' + raw.split('').map(function (char) {
                            return char + char;
                        }).join('').toLowerCase();
                    }

                    if (/^[A-Fa-f0-9]{6}$/.test(raw)) {
                        return '#' + raw.toLowerCase();
                    }

                    return value;
                }

                function safeColor(value, fallback) {
                    return isHexColor(value) ? value : fallback;
                }

                function clampNumber(value, min, max, fallback) {
                    const parsed = Number(value);
                    if (!Number.isFinite(parsed)) {
                        return fallback;
                    }

                    return Math.min(max, Math.max(min, parsed));
                }

                function resolveBorderRadius(settings) {
                    if (String(settings.border_radius || '') === 'custom') {
                        return clampNumber(settings.custom_border_radius, 0, 30, 12);
                    }

                    return clampNumber(settings.border_radius, 0, 40, 12);
                }

                function guessFontFamilyFromUrl(url) {
                    const value = String(url || '').trim();
                    if (!value) {
                        return null;
                    }

                    try {
                        const parsed = new URL(value, window.location.origin);
                        const family = parsed.searchParams.get('family');
                        if (family) {
                            return "'" + decodeURIComponent(family.split(':')[0].replaceAll('+', ' ')) + "', sans-serif";
                        }
                    } catch (error) {
                        // Ignore parse failures and fall through to regex parsing.
                    }

                    const match = value.match(/family=([^:&"'&]+)/i);
                    if (!match) {
                        return null;
                    }

                    return "'" + decodeURIComponent(match[1].split(':')[0].replaceAll('+', ' ')) + "', sans-serif";
                }

                function ensureCustomFontStylesheet(url) {
                    const value = String(url || '').trim();
                    if (!value || customFontLinks.has(value)) {
                        return;
                    }

                    if (!/^https?:\/\//i.test(value)) {
                        return;
                    }

                    const link = document.createElement('link');
                    link.rel = 'stylesheet';
                    link.href = value;
                    link.crossOrigin = 'anonymous';
                    document.head.appendChild(link);
                    customFontLinks.add(value);
                }

                function fontFamilyValue(settings) {
                    const value = String(settings.font_family || 'inter');

                    if (value === 'lato') {
                        return "'Lato', sans-serif";
                    }

                    if (value === 'lora') {
                        return "'Lora', serif";
                    }

                    if (value === 'roboto') {
                        return "'Roboto', sans-serif";
                    }

                    if (value === 'roboto-slab') {
                        return "'Roboto Slab', serif";
                    }

                    if (value === 'manrope') {
                        return "'Manrope', sans-serif";
                    }

                    if (value === 'nunito') {
                        return "'Nunito', sans-serif";
                    }

                    if (value === 'custom') {
                        ensureCustomFontStylesheet(settings.font_custom_url || '');
                        return guessFontFamilyFromUrl(settings.font_custom_url || '') || "'Plus Jakarta Sans', sans-serif";
                    }

                    return "'Plus Jakarta Sans', sans-serif";
                }

                function resolvePreviewSettings(settings) {
                    const branding = Object.assign({}, getTabState('general-branding').settings || {});
                    return Object.assign({}, branding, settings || {});
                }

                function deviceClass(tab) {
                    return getTabState(tab).settings.preview_device === 'mobile' ? 'is-mobile' : 'is-desktop';
                }

                function getTooltipCopy(field, tab) {
                    return TOOLTIP_COPY[tab]?.[field] || TOOLTIP_COPY[state.activeTab]?.[field] || '';
                }

                function renderHelpTrigger(field, tab) {
                    const copy = getTooltipCopy(field, tab);
                    if (!copy) {
                        return '';
                    }

                    return `
                        <button
                            type="button"
                            class="hcf-help-trigger"
                            data-tooltip-key="${escapeHtml(field)}"
                            data-tooltip-tab="${escapeHtml(tab || state.activeTab)}"
                            aria-label="Show help"
                        >
                            ${iconInfo()}
                        </button>
                    `;
                }

                function renderFieldLabel(label, field, tab) {
                    return `
                        <div class="hcf-field-label-row">
                            <span class="hcf-field-label">${escapeHtml(label)}</span>
                            ${renderHelpTrigger(field, tab)}
                        </div>
                    `;
                }

                function renderSectionHeading(title, tooltipKey, tab) {
                    return `
                        <div class="hcf-panel-heading">
                            <h2>${escapeHtml(title)}</h2>
                            ${renderHelpTrigger(tooltipKey || '__section', tab)}
                        </div>
                    `;
                }

                function renderColorField(label, field, value, tab) {
                    const resolvedValue = safeColor(value, '#ffffff');

                    return `
                        <label class="hcf-field">
                            ${renderFieldLabel(label, field, tab)}
                            <span class="hcf-input-shell hcf-color-shell" style="--hcf-swatch:${escapeHtml(resolvedValue)}">
                                <input
                                    class="hcf-input"
                                    data-field="${escapeHtml(field)}"
                                    data-field-type="color"
                                    value="${escapeHtml(value || '')}"
                                    placeholder="#ffffff"
                                    autocomplete="off"
                                >
                                <button type="button" class="hcf-color-chip" data-action="open-color-picker" aria-label="Open color picker"></button>
                            </span>
                        </label>
                    `;
                }

                function renderTextField(label, field, value, placeholder, options) {
                    const config = options || {};
                    const suffix = config.suffix ? `<span class="hcf-input-suffix">${escapeHtml(config.suffix)}</span>` : '';

                    return `
                        <label class="hcf-field">
                            ${renderFieldLabel(label, config.tooltipKey || field, config.tab || state.activeTab)}
                            <span class="hcf-input-shell${suffix ? ' has-suffix' : ''}">
                                <input
                                    class="hcf-input"
                                    data-field="${escapeHtml(field)}"
                                    ${config.type ? `type="${escapeHtml(config.type)}"` : 'type="text"'}
                                    ${config.inputmode ? `inputmode="${escapeHtml(config.inputmode)}"` : ''}
                                    value="${escapeHtml(value || '')}"
                                    placeholder="${escapeHtml(placeholder || '')}"
                                    autocomplete="off"
                                >
                                ${suffix}
                            </span>
                        </label>
                    `;
                }

                function renderSelectField(label, field, value, options, config) {
                    const settings = config || {};
                    const normalizedOptions = Array.isArray(options) ? options.slice() : [];

                    if (value && !normalizedOptions.some(function (option) { return String(option.value) === String(value); })) {
                        normalizedOptions.push({
                            value: value,
                            label: settings.fallbackLabel ? settings.fallbackLabel(value) : String(value),
                        });
                    }

                    const selected = normalizedOptions.find(function (option) {
                        return String(option.value) === String(value);
                    }) || normalizedOptions[0] || { value: '', label: '' };

                    return `
                        <div class="hcf-field">
                            ${renderFieldLabel(label, settings.tooltipKey || field, settings.tab || state.activeTab)}
                            <div class="hcf-select-wrap" data-select-field="${escapeHtml(field)}">
                                <button
                                    type="button"
                                    class="hcf-select-button"
                                    data-action="toggle-select"
                                    data-field="${escapeHtml(field)}"
                                    aria-haspopup="listbox"
                                    aria-expanded="false"
                                >
                                    <span>${escapeHtml(selected.label)}</span>
                                    <span class="hcf-select-chevron">${iconChevron()}</span>
                                </button>
                                <div class="hcf-select-menu" hidden>
                                    ${normalizedOptions.map(function (option) {
                                        const selectedClass = String(option.value) === String(value) ? ' is-selected' : '';

                                        return `
                                            <button
                                                type="button"
                                                class="hcf-select-option${selectedClass}"
                                                data-select-option="${escapeHtml(option.value)}"
                                                data-field="${escapeHtml(field)}"
                                            >
                                                <span>${escapeHtml(option.label)}</span>
                                                <span class="hcf-select-check">${iconCheck()}</span>
                                            </button>
                                        `;
                                    }).join('')}
                                </div>
                            </div>
                        </div>
                    `;
                }

                function renderToggleField(label, field, value, darkMode, labels, tab) {
                    const toggleLabels = Array.isArray(labels) && labels.length === 2 ? labels : ['Yes', 'No'];
                    return `
                        <div class="hcf-field">
                            ${renderFieldLabel(label, field, tab)}
                            <div class="hcf-inline-toggle" data-boolean-field="${escapeHtml(field)}" data-mode="${darkMode ? 'dark' : 'green'}">
                                <button type="button" class="hcf-toggle-button ${value ? (darkMode ? 'is-active is-dark-active' : 'is-active') : ''}" data-value="true">${escapeHtml(toggleLabels[0])}</button>
                                <button type="button" class="hcf-toggle-button ${!value ? (darkMode ? 'is-active is-dark-active' : 'is-active') : ''}" data-value="false">${escapeHtml(toggleLabels[1])}</button>
                            </div>
                        </div>
                    `;
                }

                function renderCodeBlock(title, copy, code, action) {
                    return `
                        <div class="hcf-embed-block">
                            <div class="hcf-embed-label">${escapeHtml(title)}</div>
                            <p class="hcf-embed-copy">${escapeHtml(copy)}</p>
                            <div class="hcf-code-block"><pre>${escapeHtml(code)}</pre></div>
                            <button type="button" class="hcf-primary-button hcf-code-copy" data-action="${escapeHtml(action)}">${escapeHtml('Copy ' + title.toLowerCase())}</button>
                        </div>
                    `;
                }

                function renderConfigCard(title, tooltipTab, content, showSave, extraContent) {
                    return `
                        <div class="hcf-stack">
                            ${renderSectionHeading(title, '__section', tooltipTab)}
                            <div class="hcf-card hcf-settings-card">
                                <div class="hcf-card-body">
                                    <div class="hcf-form">
                                        ${content}
                                    </div>
                                    ${showSave ? `
                                        <div class="hcf-card-footer">
                                            <button type="button" class="hcf-primary-button" data-action="save-tab">Save</button>
                                        </div>
                                    ` : ''}
                                </div>
                            </div>
                            ${extraContent || ''}
                        </div>
                    `;
                }

                function renderEmbedCodesCard(codes, includeScript) {
                    const blocks = [];

                    if (includeScript !== false) {
                        blocks.push(renderCodeBlock('Script code', 'Paste this code inside your <head> tag.', codes.script_code || '', 'copy-script'));
                    }

                    blocks.push(renderCodeBlock('Container code', 'Place this code inside your <body> tag where you want the widget to be shown.', codes.container_code || '', 'copy-container'));

                    return `
                        <div class="hcf-card">
                            <div class="hcf-card-body">
                                <h2 class="hcf-embed-section-title">Embed codes</h2>
                                ${blocks.join('')}
                            </div>
                        </div>
                    `;
                }

                function renderLeftColumn() {
                    const tab = state.activeTab;
                    const settings = getTabState(tab).settings;
                    const codes = getTabState(tab).embed_codes || {};

                    if (tab === 'pricing-page') {
                        return `
                            <div class="hcf-stack">
                                ${renderSectionHeading('Pricing Page', '__section', 'pricing-page')}
                                <div class="hcf-card">
                                    <div class="hcf-card-body">
                                        <h2 class="hcf-card-title">Pricing Page</h2>
                                        <p class="hcf-card-description">
                                            You can use the Offer Selection page as the starting point of the purchase flow.
                                            This page is not hosted by SMS. We provide documentation and ready-to-use HTML templates that you can customize to fit your brand.
                                        </p>
                                    </div>
                                </div>
                                <div class="hcf-info-grid">
                                    <div class="hcf-info-card">
                                        <div class="hcf-info-step">1.</div>
                                        <h3 class="hcf-info-title">Review the docs</h3>
                                        <p class="hcf-info-copy">Learn how to build the page and connect it to checkout.</p>
                                        <button type="button" class="hcf-primary-button" data-action="doc-link" data-label="Developer Guide">Developer Guide</button>
                                    </div>
                                    <div class="hcf-info-card">
                                        <div class="hcf-info-step">2.</div>
                                        <h3 class="hcf-info-title">Build your page</h3>
                                        <p class="hcf-info-copy">Use our ready-to-customize HTML template as a starting point.</p>
                                        <button type="button" class="hcf-primary-button" data-action="doc-link" data-label="View Code">View Code</button>
                                    </div>
                                </div>
                            </div>
                        `;
                    }

                    if (tab === 'general-branding') {
                        const borderValue = String(settings.border_radius || '12');
                        const fontValue = String(settings.font_family || 'inter');

                        return renderConfigCard('General Branding', 'general-branding', `
                            ${renderColorField('Background color', 'background_color', settings.background_color, 'general-branding')}
                            ${renderColorField('Accent color', 'accent_color', settings.accent_color, 'general-branding')}
                            ${renderColorField('Panel color', 'panel_color', settings.panel_color, 'general-branding')}
                            ${renderColorField('Payment panel color', 'payment_panel_color', settings.payment_panel_color, 'general-branding')}
                            ${renderSelectField('Border radius', 'border_radius', borderValue, BORDER_RADIUS_OPTIONS, {
                                tab: 'general-branding',
                                tooltipKey: 'border_radius',
                                fallbackLabel: function (currentValue) {
                                    if (String(currentValue) === '20') {
                                        return 'Rounded (20px)';
                                    }

                                    return String(currentValue);
                                },
                            })}
                            ${borderValue === 'custom'
                                ? renderTextField('Custom border radius', 'custom_border_radius', settings.custom_border_radius || '12', '12', {
                                    suffix: 'px',
                                    inputmode: 'numeric',
                                    tooltipKey: 'custom_border_radius',
                                    tab: 'general-branding',
                                })
                                : ''}
                            ${renderSelectField('Font family', 'font_family', fontValue, FONT_FAMILY_OPTIONS, {
                                tab: 'general-branding',
                                tooltipKey: 'font_family',
                                fallbackLabel: function (currentValue) {
                                    if (String(currentValue) === 'manrope') {
                                        return 'Modern (Manrope)';
                                    }

                                    if (String(currentValue) === 'nunito') {
                                        return 'Soft (Nunito)';
                                    }

                                    return String(currentValue);
                                },
                            })}
                            ${fontValue === 'custom'
                                ? renderTextField('Custom font URL', 'font_custom_url', settings.font_custom_url || '', 'https://fonts.googleapis.com/css2?family=Your+Font:wght@400;700&display=swap', {
                                    tooltipKey: 'font_custom_url',
                                    tab: 'general-branding',
                                })
                                : ''}
                            ${renderTextField('Logo URL', 'logo_url', settings.logo_url, 'https://example.com/logo.png', {
                                tooltipKey: 'logo_url',
                                tab: 'general-branding',
                            })}
                        `, true);
                    }

                    if (tab === 'sign-up') {
                        return renderConfigCard('Sign Up', 'sign-up', `
                            ${renderColorField('Panel color', 'panel_color', settings.panel_color, 'sign-up')}
                            ${renderColorField('Accent color', 'accent_color', settings.accent_color, 'sign-up')}
                            ${renderTextField('Redirect URL after registration', 'redirect_url_after_registration', settings.redirect_url_after_registration, 'https://', { tab: 'sign-up' })}
                            ${renderToggleField('Identity Provider', 'identity_provider', settings.identity_provider === 'sms', false, ['SMS', 'External'], 'sign-up')}
                            <div class="hcf-identity-note">
                                Using an external identity provider will turn off the "Sign Up" widget and the "Update Profile" section in the "User Account" widget.
                                <button type="button" data-action="doc-link" data-label="Learn more">Learn more</button>
                            </div>
                        `, true, renderEmbedCodesCard(codes, true));
                    }

                    if (tab === 'checkout') {
                        return renderConfigCard('Checkout', 'checkout', `
                            ${renderColorField('Background color', 'background_color', settings.background_color, 'checkout')}
                            ${renderColorField('Panel color', 'panel_color', settings.panel_color, 'checkout')}
                            ${renderColorField('Accent color', 'accent_color', settings.accent_color, 'checkout')}
                            ${renderColorField('Payment panel color', 'payment_panel_color', settings.payment_panel_color, 'checkout')}
                            ${renderTextField('Terms & conditions URL', 'terms_conditions_url', settings.terms_conditions_url, 'https://', { tab: 'checkout' })}
                            ${renderTextField('Redirect URL after successful payment', 'redirect_url_after_payment', settings.redirect_url_after_payment, 'https://', { tab: 'checkout' })}
                            ${renderToggleField('Show coupon input field', 'show_coupon_input_field', Boolean(settings.show_coupon_input_field), false, ['Yes', 'No'], 'checkout')}
                            ${renderToggleField('Checkout layout', 'checkout_layout', settings.checkout_layout !== 'reversed', false, ['Standard', 'Reversed'], 'checkout')}
                        `, true, renderEmbedCodesCard(codes, true));
                    }

                    if (tab === 'user-account') {
                        return renderConfigCard('User Account', 'user-account', `
                            ${renderColorField('Background color', 'background_color', settings.background_color, 'user-account')}
                            ${renderColorField('Panel color', 'panel_color', settings.panel_color, 'user-account')}
                            ${renderColorField('Card color', 'card_color', settings.card_color, 'user-account')}
                            ${renderColorField('Accent color', 'accent_color', settings.accent_color, 'user-account')}
                            ${renderColorField('Payment panel color', 'payment_panel_color', settings.payment_panel_color, 'user-account')}
                            ${renderToggleField('Show payment history', 'show_payment_history', Boolean(settings.show_payment_history), false, ['Yes', 'No'], 'user-account')}
                            ${renderToggleField('Show cancellation survey', 'show_cancellation_survey', Boolean(settings.show_cancellation_survey), false, ['Yes', 'No'], 'user-account')}
                            ${renderToggleField('Show coupon input field', 'show_coupon_input_field', Boolean(settings.show_coupon_input_field), false, ['Yes', 'No'], 'user-account')}
                        `, true, renderEmbedCodesCard(codes, true));
                    }

                    return renderConfigCard('Customer Care', 'customer-care', `
                        ${renderColorField('Background color', 'background_color', settings.background_color, 'customer-care')}
                        ${renderColorField('Panel color', 'panel_color', settings.panel_color, 'customer-care')}
                        ${renderColorField('Accent color', 'accent_color', settings.accent_color, 'customer-care')}
                    `, true, renderEmbedCodesCard(codes, false));
                }

                function renderBottomRow() {
                    return '';
                }

                function renderTabs() {
                    refs.tabs.innerHTML = '';

                    tabMeta.forEach(function (tab) {
                        const button = document.createElement('button');
                        button.type = 'button';
                        button.className = 'hcf-tab-button' + (tab.key === state.activeTab ? ' is-active' : '');
                        button.setAttribute('aria-pressed', tab.key === state.activeTab ? 'true' : 'false');
                        button.innerHTML = '<span class="hcf-tab-button-icon">' + tabIcon(tab.key) + '</span><span>' + escapeHtml(tab.label) + '</span>';
                        button.addEventListener('click', function () {
                            closeTooltip(true);
                            closeColorPicker();
                            closeSelectMenus();
                            state.activeTab = tab.key;
                            updateQueryString(tab.key);
                            renderTabs();
                            renderActiveTab();
                        });
                        refs.tabs.appendChild(button);
                    });
                }

                function renderPreviewTopbar(showLinks, tabKey) {
                    const settings = getTabState(tabKey || state.activeTab).settings;

                    return `
                        <div class="hcf-preview-topbar">
                            <div class="hcf-device-switch">
                                <button type="button" class="hcf-device-button ${settings.preview_device !== 'mobile' ? 'is-active' : ''}" data-action="preview-device" data-device="desktop">${iconDesktop()}</button>
                                <button type="button" class="hcf-device-button ${settings.preview_device === 'mobile' ? 'is-active' : ''}" data-action="preview-device" data-device="mobile">${iconMobile()}</button>
                            </div>
                            ${showLinks ? `
                                <div class="hcf-top-links">
                                    <button type="button" class="hcf-top-link" data-action="doc-link" data-label="Product Guide">${iconProductGuide()} Product Guide</button>
                                    <button type="button" class="hcf-top-link" data-action="doc-link" data-label="Developer Guide">${iconDeveloperGuide()} Developer Guide</button>
                                    <button type="button" class="hcf-top-link" data-action="doc-link" data-label="Product Demo">${iconProductDemo()} Product Demo</button>
                                </div>
                            ` : ''}
                        </div>
                    `;
                }

                function renderCheckoutPreview(rawSettings, tabKey) {
                    const settings = resolvePreviewSettings(rawSettings);
                    const radius = resolveBorderRadius(settings);
                    const fontFamily = fontFamilyValue(settings);
                    const backgroundColor = safeColor(settings.background_color, '#1d4ed8');
                    const panelColor = safeColor(settings.panel_color, '#ffffff');
                    const paymentPanelColor = safeColor(settings.payment_panel_color, '#ffffff');
                    const accentColor = safeColor(settings.accent_color, '#2563eb');
                    const showCoupon = settings.show_coupon_input_field !== false;
                    const leftPanel = `
                        <section class="hcf-checkout-primary" style="background:${escapeHtml(backgroundColor)};font-family:${escapeHtml(fontFamily)};">
                            <div class="hcf-checkout-primary-inner">
                                <div class="hcf-checkout-primary-label">Selected subscription plan</div>
                                <div class="hcf-plan-summary">
                                    <div class="hcf-plan-summary-top">
                                        <div class="hcf-plan-summary-title">Monthly Premium</div>
                                        <div class="hcf-plan-summary-price">
                                            <strong>₹1071.45</strong>
                                            <span>per month</span>
                                        </div>
                                    </div>
                                    <div class="hcf-plan-summary-note">You will be charged ₹1071.45 (incl. tax) every month.</div>
                                </div>
                                ${showCoupon ? '<div class="hcf-coupon">Promo code <span style="font-size:10px;">▼</span></div>' : ''}
                                <div class="hcf-price-rows">
                                    <div class="hcf-price-row"><span>Price</span><strong>₹1071.45</strong></div>
                                    <div class="hcf-price-row"><span>Applicable tax</span><strong>₹0.00</strong></div>
                                    <div class="hcf-price-row is-total"><span>Due now</span><strong>₹1071.45</strong></div>
                                </div>
                            </div>
                        </section>
                    `;

                    const rightPanel = `
                        <section class="hcf-checkout-secondary" style="background:${escapeHtml(panelColor)};font-family:${escapeHtml(fontFamily)};">
                            <div class="hcf-payment-card" style="--hcf-payment-panel:${escapeHtml(paymentPanelColor)};">
                                <div class="hcf-payment-title"><span class="hcf-payment-icon">${iconCard()}</span> Credit/Debit Card</div>
                                <div class="hcf-payment-required">All fields are required</div>
                                <div class="hcf-form-mini">
                                    <label class="hcf-mini-label">
                                        Card number
                                        <input class="hcf-mini-input" value="1234 5678 9012 3456" readonly>
                                    </label>
                                    <div class="hcf-card-brands">
                                        <span class="hcf-card-brand is-master">MC</span>
                                        <span class="hcf-card-brand">AMEX</span>
                                        <span class="hcf-card-brand">DISC</span>
                                        <span class="hcf-card-brand">JCB</span>
                                        <span class="hcf-card-brand is-visa">VISA</span>
                                    </div>
                                    <div class="hcf-mini-grid">
                                        <label class="hcf-mini-label hcf-mini-addon">
                                            Expiration date
                                            <input class="hcf-mini-input" value="MM/YY" readonly>
                                        </label>
                                        <label class="hcf-mini-label hcf-mini-addon">
                                            Security code
                                            <input class="hcf-mini-input" value="3 digits" readonly>
                                        </label>
                                    </div>
                                    <label class="hcf-mini-label">
                                        Name on card
                                        <input class="hcf-mini-input" value="J. Smith" readonly>
                                    </label>
                                    <label class="hcf-mini-label">
                                        ZIP code
                                        <input class="hcf-mini-input" value="" readonly>
                                    </label>
                                    <button type="button" class="hcf-pay-button" style="background:${escapeHtml(accentColor)};">Pay ₹1,071.45</button>
                                </div>
                            </div>
                            <div class="hcf-payment-option"><span class="hcf-payment-badge">Pay</span> Apple Pay</div>
                            <div class="hcf-payment-option"><span class="hcf-payment-badge">GPay</span> Google Pay</div>
                            <div class="hcf-payment-option"><span class="hcf-payment-badge">P</span> PayPal</div>
                            <div class="hcf-preview-footer-copy">
                                You will be charged ₹1071.45 / month (or the then-current price), plus applicable taxes, on a recurring basis.
                                Your subscription will automatically renew unless canceled. To cancel, log in to your account, then select "Cancel subscription." By proceeding with the payment, you agree to the full Terms of Service.
                            </div>
                            <div class="hcf-brand-footer">${iconLock()} Checkout secured and provided by <strong style="font-weight:800;letter-spacing:0.08em;">SMS</strong></div>
                        </section>
                    `;

                    const arrangedContent = rawSettings.checkout_layout === 'reversed'
                        ? rightPanel + leftPanel
                        : leftPanel + rightPanel;

                    return `
                        <div class="hcf-preview-shell">
                            ${renderPreviewTopbar(true, tabKey)}
                            <div class="hcf-preview-frame ${deviceClass(tabKey)}">
                                <div
                                    class="hcf-checkout-preview ${rawSettings.checkout_layout === 'reversed' ? 'is-reversed' : ''}"
                                    style="--hcf-radius:${radius}px;--hcf-background:${escapeHtml(backgroundColor)};--hcf-panel-shell:${escapeHtml(panelColor)};"
                                >
                                    ${arrangedContent}
                                </div>
                            </div>
                        </div>
                    `;
                }

                function renderGeneralBrandingPreview(settings) {
                    return renderCheckoutPreview(Object.assign({}, settings, {
                        show_coupon_input_field: true,
                        checkout_layout: 'standard',
                    }), 'general-branding');
                }

                function renderPricingPreview() {
                    return `
                        <div class="hcf-preview-shell">
                            <div class="hcf-pricing-preview">
                                <h2 class="hcf-pricing-title">Choose Your Perfect Plan</h2>
                                <p class="hcf-pricing-subtitle">Get access to premium content. Cancel anytime.</p>
                                <div class="hcf-plan-grid">
                                    <div class="hcf-plan-card">
                                        <div class="hcf-plan-name">Basic Plan</div>
                                        <div class="hcf-plan-price">$9.99<span style="font-size:16px;font-weight:600;">/month</span></div>
                                        <p class="hcf-plan-copy">Perfect for individual users who want essential features and flexibility.</p>
                                        <div class="hcf-plan-list">
                                            <span>Access to basic content library</span>
                                            <span>Standard video quality</span>
                                            <span>2 device streaming</span>
                                            <span>Email support</span>
                                            <span>Monthly plan flexibility</span>
                                        </div>
                                        <button type="button" class="hcf-plan-button">Select Plan</button>
                                    </div>
                                    <div class="hcf-plan-card is-highlighted">
                                        <span class="hcf-plan-badge">Best Value</span>
                                        <div class="hcf-plan-name">Annual Plan</div>
                                        <div class="hcf-plan-price">$99.99<span style="font-size:16px;font-weight:600;">/year</span></div>
                                        <p class="hcf-plan-copy">Best value for committed users with premium features and significant savings.</p>
                                        <div class="hcf-plan-list">
                                            <span>Access to premium content library</span>
                                            <span>HD &amp; 4K video quality</span>
                                            <span>Unlimited device streaming</span>
                                            <span>Priority customer support</span>
                                            <span>Save 2 months compared to monthly</span>
                                        </div>
                                        <button type="button" class="hcf-plan-button">Select Plan</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                }

                function renderSignUpPreview(rawSettings) {
                    const settings = resolvePreviewSettings(rawSettings);
                    const radius = resolveBorderRadius(settings);
                    const fontFamily = fontFamilyValue(settings);

                    return `
                        <div class="hcf-preview-shell">
                            ${renderPreviewTopbar(true, 'sign-up')}
                            <div class="hcf-preview-frame ${deviceClass('sign-up')}">
                                <div class="hcf-signup-preview" style="--hcf-panel:${escapeHtml(safeColor(settings.panel_color, '#ffffff'))};--hcf-radius:${radius}px;font-family:${escapeHtml(fontFamily)};">
                                    <div class="hcf-signup-card">
                                        <h2 class="hcf-signup-title">Sign in to your account</h2>
                                        <p class="hcf-signup-subtitle">Or register if you don't have one yet.</p>
                                        <div class="hcf-form-mini">
                                            <label class="hcf-mini-label">Email *<input class="hcf-mini-input" value="john.doe@example.com" readonly></label>
                                            <label class="hcf-mini-label">Password *<input class="hcf-mini-input" value="••••••••" readonly></label>
                                            <div style="text-align:right;font-size:12px;font-weight:700;">Forgot password</div>
                                            <button type="button" class="hcf-pay-button" style="background:${escapeHtml(safeColor(settings.accent_color, '#2563eb'))};">Sign in</button>
                                        </div>
                                        <div class="hcf-signup-footer">Don't have an account? <u>Register</u></div>
                                        <div class="hcf-brand-footer" style="justify-content:center;margin-top:24px;">${iconLock()} Checkout secured and provided by <strong style="font-weight:800;letter-spacing:0.08em;">SMS</strong></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                }

                function renderUserAccountPreview(rawSettings) {
                    const settings = resolvePreviewSettings(rawSettings);
                    const radius = resolveBorderRadius(settings);
                    const fontFamily = fontFamilyValue(settings);

                    return `
                        <div class="hcf-preview-shell">
                            ${renderPreviewTopbar(true, 'user-account')}
                            <div class="hcf-preview-frame ${deviceClass('user-account')}">
                                <div class="hcf-account-preview" style="font-family:${escapeHtml(fontFamily)};">
                                    <div
                                        class="hcf-account-shell"
                                        style="--hcf-radius:${radius}px;--hcf-background:${escapeHtml(safeColor(settings.background_color, '#f8fafd'))};background:${escapeHtml(safeColor(settings.background_color, '#f8fafd'))};"
                                    >
                                        <div
                                            class="hcf-account-card"
                                            style="--hcf-card:${escapeHtml(safeColor(settings.card_color, '#ffffff'))};--hcf-panel:${escapeHtml(safeColor(settings.panel_color, '#ffffff'))};--hcf-accent:${escapeHtml(safeColor(settings.accent_color, '#2563eb'))};"
                                        >
                                            <div class="hcf-account-sidebar">
                                                <div class="hcf-avatar">◌</div>
                                                <div class="hcf-account-email">preview-customer-1001315568181@sms.app</div>
                                                <div class="hcf-account-nav">
                                                    <span class="is-active">Purchase details</span>
                                                    ${settings.show_payment_history ? '<span>Your payments</span>' : ''}
                                                    <span>Update profile</span>
                                                    ${settings.show_cancellation_survey ? '<span>Cancellation survey</span>' : ''}
                                                </div>
                                            </div>
                                            <div class="hcf-account-main">
                                                <div style="font-size:16px;font-weight:800;color:#111111;">Current plan</div>
                                                <div class="hcf-empty-panel">
                                                    <div>
                                                        <strong style="display:block;color:#111111;">No purchases yet!</strong>
                                                        Once you select a plan, you&apos;ll be able to manage it here.
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                }

                function renderCustomerCareFaqItem(question, answer, index) {
                    return `
                        <div class="hcf-faq-item" data-faq-item>
                            <button
                                type="button"
                                class="hcf-faq-trigger"
                                data-faq-trigger
                                aria-expanded="false"
                                aria-controls="hcf-faq-answer-${index}"
                            >
                                <span>${escapeHtml(question)}</span>
                                <span class="hcf-faq-chevron">›</span>
                            </button>
                            <div class="hcf-faq-answer" id="hcf-faq-answer-${index}" hidden>${escapeHtml(answer)}</div>
                        </div>
                    `;
                }

                function renderCustomerCarePreview(rawSettings) {
                    const settings = resolvePreviewSettings(rawSettings);
                    const radius = resolveBorderRadius(settings);
                    const fontFamily = fontFamilyValue(settings);

                    return `
                        <div class="hcf-preview-shell">
                            ${renderPreviewTopbar(true, 'customer-care')}
                            <div class="hcf-preview-frame ${deviceClass('customer-care')}">
                                <div class="hcf-care-preview" style="font-family:${escapeHtml(fontFamily)};">
                                    <div
                                        class="hcf-care-shell"
                                        style="--hcf-radius:${radius}px;--hcf-background:${escapeHtml(safeColor(settings.background_color, '#1d4ed8'))};--hcf-panel:${escapeHtml(safeColor(settings.panel_color, '#ffffff'))};--hcf-accent:${escapeHtml(safeColor(settings.accent_color, '#2563eb'))};background:${escapeHtml(safeColor(settings.background_color, '#1d4ed8'))};"
                                    >
                                        <h2 class="hcf-care-title">How can we help you?</h2>
                                        <div class="hcf-faq-group">
                                            ${CUSTOMER_CARE_FAQ_GROUPS.map(function (group, groupIndex) {
                                                return `
                                                    <div class="hcf-faq-heading">${escapeHtml(group.heading)}</div>
                                                    ${group.items.map(function (item, itemIndex) {
                                                        return renderCustomerCareFaqItem(item[0], item[1], (groupIndex * 10) + itemIndex);
                                                    }).join('')}
                                                `;
                                            }).join('')}
                                        </div>
                                        <div class="hcf-care-footer">
                                            <strong>Didn&apos;t find the answer?</strong>
                                            <button type="button" class="hcf-pay-button" style="background:${escapeHtml(safeColor(settings.accent_color, '#2563eb'))};min-width:192px;">Submit a request</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                }

                function renderRightColumn() {
                    const tab = state.activeTab;
                    const settings = getTabState(tab).settings;

                    if (tab === 'general-branding') {
                        return renderGeneralBrandingPreview(settings);
                    }

                    if (tab === 'pricing-page') {
                        return renderPricingPreview();
                    }

                    if (tab === 'sign-up') {
                        return renderSignUpPreview(settings);
                    }

                    if (tab === 'checkout') {
                        return renderCheckoutPreview(settings, 'checkout');
                    }

                    if (tab === 'user-account') {
                        return renderUserAccountPreview(settings);
                    }

                    return renderCustomerCarePreview(settings);
                }

                function updateInputShellFocus(input, focused) {
                    const shell = input.closest('.hcf-input-shell');
                    if (!shell) {
                        return;
                    }

                    shell.classList.toggle('is-focused', focused);
                }

                function applyFieldValue(field, value, tab) {
                    const tabKey = tab || state.activeTab;
                    const tabState = getTabState(tabKey);
                    tabState.settings[field] = value;
                    markTabDirty(tabKey, true);
                }

                function updateColorFieldVisuals(input) {
                    const shell = input.closest('.hcf-color-shell');
                    if (!shell) {
                        return;
                    }

                    shell.style.setProperty('--hcf-swatch', safeColor(input.value, '#ffffff'));
                }

                function closeSelectMenus(exceptWrap) {
                    refs.leftColumn.querySelectorAll('[data-select-field]').forEach(function (wrap) {
                        if (exceptWrap && wrap === exceptWrap) {
                            return;
                        }

                        wrap.classList.remove('is-open');

                        const button = wrap.querySelector('[data-action="toggle-select"]');
                        if (button) {
                            button.setAttribute('aria-expanded', 'false');
                        }

                        const menu = wrap.querySelector('.hcf-select-menu');
                        if (menu) {
                            menu.hidden = true;
                        }
                    });
                }

                function closeTooltip(force) {
                    if (!refs.tooltip) {
                        return;
                    }

                    if (hideTooltipTimer) {
                        window.clearTimeout(hideTooltipTimer);
                        hideTooltipTimer = null;
                    }

                    const hide = function () {
                        if (state.tooltipTrigger) {
                            state.tooltipTrigger.classList.remove('is-active');
                        }

                        state.tooltipTrigger = null;
                        refs.tooltip.hidden = true;
                    };

                    if (force) {
                        hide();
                        return;
                    }

                    hideTooltipTimer = window.setTimeout(hide, 70);
                }

                function positionTooltip(trigger) {
                    if (!refs.tooltip || refs.tooltip.hidden) {
                        return;
                    }

                    const triggerRect = trigger.getBoundingClientRect();
                    const bubbleRect = refs.tooltip.getBoundingClientRect();
                    const top = Math.max(10, triggerRect.top - 18);
                    const left = Math.min(
                        window.innerWidth - bubbleRect.width - 12,
                        Math.max(10, triggerRect.left - bubbleRect.width + 100)
                    );

                    refs.tooltip.style.top = top + 'px';
                    refs.tooltip.style.left = left + 'px';
                }

                function openTooltip(trigger) {
                    if (!refs.tooltip) {
                        return;
                    }

                    if (hideTooltipTimer) {
                        window.clearTimeout(hideTooltipTimer);
                        hideTooltipTimer = null;
                    }

                    const text = getTooltipCopy(trigger.dataset.tooltipKey || '', trigger.dataset.tooltipTab || state.activeTab);
                    if (!text) {
                        return;
                    }

                    if (state.tooltipTrigger && state.tooltipTrigger !== trigger) {
                        state.tooltipTrigger.classList.remove('is-active');
                    }

                    state.tooltipTrigger = trigger;
                    state.tooltipTrigger.classList.add('is-active');
                    refs.tooltip.textContent = text;
                    refs.tooltip.hidden = false;
                    positionTooltip(trigger);
                }

                function bindTooltipEvents(scope) {
                    scope.querySelectorAll('.hcf-help-trigger').forEach(function (trigger) {
                        trigger.addEventListener('mouseenter', function () {
                            openTooltip(trigger);
                        });

                        trigger.addEventListener('mouseleave', function () {
                            closeTooltip();
                        });

                        trigger.addEventListener('focus', function () {
                            openTooltip(trigger);
                        });

                        trigger.addEventListener('blur', function () {
                            closeTooltip();
                        });

                        trigger.addEventListener('click', function (event) {
                            event.preventDefault();

                            if (state.tooltipTrigger === trigger && !refs.tooltip.hidden) {
                                closeTooltip(true);
                                return;
                            }

                            openTooltip(trigger);
                        });
                    });
                }

                function hexToRgb(hex) {
                    const normalized = normalizeColorInput(hex);
                    const value = normalized.replace('#', '');
                    return {
                        r: parseInt(value.slice(0, 2), 16),
                        g: parseInt(value.slice(2, 4), 16),
                        b: parseInt(value.slice(4, 6), 16),
                    };
                }

                function rgbToHex(rgb) {
                    const channels = ['r', 'g', 'b'].map(function (key) {
                        return clampNumber(rgb[key], 0, 255, 0).toString(16).padStart(2, '0');
                    });

                    return '#' + channels.join('');
                }

                function rgbToHsv(rgb) {
                    const r = rgb.r / 255;
                    const g = rgb.g / 255;
                    const b = rgb.b / 255;
                    const max = Math.max(r, g, b);
                    const min = Math.min(r, g, b);
                    const delta = max - min;
                    let h = 0;

                    if (delta !== 0) {
                        if (max === r) {
                            h = 60 * (((g - b) / delta) % 6);
                        } else if (max === g) {
                            h = 60 * (((b - r) / delta) + 2);
                        } else {
                            h = 60 * (((r - g) / delta) + 4);
                        }
                    }

                    if (h < 0) {
                        h += 360;
                    }

                    return {
                        h: h,
                        s: max === 0 ? 0 : (delta / max) * 100,
                        v: max * 100,
                    };
                }

                function hsvToRgb(hsv) {
                    const h = ((hsv.h % 360) + 360) % 360;
                    const s = clampNumber(hsv.s, 0, 100, 100) / 100;
                    const v = clampNumber(hsv.v, 0, 100, 100) / 100;
                    const c = v * s;
                    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
                    const m = v - c;
                    let r = 0;
                    let g = 0;
                    let b = 0;

                    if (h < 60) {
                        r = c; g = x; b = 0;
                    } else if (h < 120) {
                        r = x; g = c; b = 0;
                    } else if (h < 180) {
                        r = 0; g = c; b = x;
                    } else if (h < 240) {
                        r = 0; g = x; b = c;
                    } else if (h < 300) {
                        r = x; g = 0; b = c;
                    } else {
                        r = c; g = 0; b = x;
                    }

                    return {
                        r: Math.round((r + m) * 255),
                        g: Math.round((g + m) * 255),
                        b: Math.round((b + m) * 255),
                    };
                }

                function updateColorPickerUI() {
                    if (!refs.colorPicker || refs.colorPicker.hidden) {
                        return;
                    }

                    const rgb = hsvToRgb(state.colorPicker);
                    const hex = rgbToHex(rgb);

                    if (colorPickerRefs.spectrum) {
                        colorPickerRefs.spectrum.style.background =
                            'linear-gradient(to top, #000000, transparent), linear-gradient(to right, #ffffff, hsl(' + state.colorPicker.h + ', 100%, 50%))';
                    }

                    if (colorPickerRefs.spectrumCursor && colorPickerRefs.spectrum) {
                        const width = colorPickerRefs.spectrum.clientWidth;
                        const height = colorPickerRefs.spectrum.clientHeight;
                        colorPickerRefs.spectrumCursor.style.left = ((state.colorPicker.s / 100) * width) + 'px';
                        colorPickerRefs.spectrumCursor.style.top = ((1 - (state.colorPicker.v / 100)) * height) + 'px';
                    }

                    if (colorPickerRefs.hueCursor && colorPickerRefs.hue) {
                        const width = colorPickerRefs.hue.clientWidth;
                        colorPickerRefs.hueCursor.style.left = ((state.colorPicker.h / 360) * width) + 'px';
                    }

                    if (colorPickerRefs.current) {
                        colorPickerRefs.current.style.background = hex;
                    }

                    colorPickerRefs.rgbInputs.forEach(function (input) {
                        const channel = input.dataset.pickerRgb;
                        input.value = String(rgb[channel] ?? 0);
                    });
                }

                function positionColorPicker() {
                    if (!refs.colorPicker || refs.colorPicker.hidden || !state.colorPicker.anchor) {
                        return;
                    }

                    const anchorRect = state.colorPicker.anchor.getBoundingClientRect();
                    const pickerRect = refs.colorPicker.getBoundingClientRect();
                    const top = Math.min(window.innerHeight - pickerRect.height - 12, anchorRect.bottom - 1);
                    const left = Math.min(window.innerWidth - pickerRect.width - 12, anchorRect.left + 191);

                    refs.colorPicker.style.top = Math.max(10, top) + 'px';
                    refs.colorPicker.style.left = Math.max(10, left) + 'px';
                }

                function syncColorPickerToField(hex) {
                    if (!state.colorPicker.input) {
                        return;
                    }

                    state.colorPicker.input.value = hex;
                    updateColorFieldVisuals(state.colorPicker.input);
                    applyFieldValue(state.colorPicker.input.dataset.field, hex);
                    renderRightColumnLive();
                }

                function openColorPicker(input) {
                    if (!refs.colorPicker || !input) {
                        return;
                    }

                    const initialHex = safeColor(normalizeColorInput(input.value), '#ffffff');
                    const hsv = rgbToHsv(hexToRgb(initialHex));
                    state.colorPicker.input = input;
                    state.colorPicker.anchor = input.closest('.hcf-input-shell') || input;
                    state.colorPicker.h = hsv.h;
                    state.colorPicker.s = hsv.s;
                    state.colorPicker.v = hsv.v;
                    refs.colorPicker.hidden = false;
                    updateColorPickerUI();
                    positionColorPicker();
                }

                function closeColorPicker() {
                    if (!refs.colorPicker) {
                        return;
                    }

                    refs.colorPicker.hidden = true;
                    state.colorPicker.input = null;
                    state.colorPicker.anchor = null;
                    colorDragMode = null;
                }

                function updateSpectrumFromPointer(event) {
                    if (!colorPickerRefs.spectrum) {
                        return;
                    }

                    const rect = colorPickerRefs.spectrum.getBoundingClientRect();
                    const x = clampNumber(event.clientX - rect.left, 0, rect.width, 0);
                    const y = clampNumber(event.clientY - rect.top, 0, rect.height, 0);

                    state.colorPicker.s = rect.width === 0 ? 0 : (x / rect.width) * 100;
                    state.colorPicker.v = rect.height === 0 ? 100 : (1 - (y / rect.height)) * 100;
                    updateColorPickerUI();
                    syncColorPickerToField(rgbToHex(hsvToRgb(state.colorPicker)));
                }

                function updateHueFromPointer(event) {
                    if (!colorPickerRefs.hue) {
                        return;
                    }

                    const rect = colorPickerRefs.hue.getBoundingClientRect();
                    const x = clampNumber(event.clientX - rect.left, 0, rect.width, 0);
                    state.colorPicker.h = rect.width === 0 ? 0 : (x / rect.width) * 360;
                    updateColorPickerUI();
                    syncColorPickerToField(rgbToHex(hsvToRgb(state.colorPicker)));
                }

                function bindColorPickerEvents() {
                    if (!refs.colorPicker || !colorPickerRefs.spectrum || !colorPickerRefs.hue) {
                        return;
                    }

                    colorPickerRefs.spectrum.addEventListener('mousedown', function (event) {
                        event.preventDefault();
                        colorDragMode = 'spectrum';
                        updateSpectrumFromPointer(event);
                    });

                    colorPickerRefs.hue.addEventListener('mousedown', function (event) {
                        event.preventDefault();
                        colorDragMode = 'hue';
                        updateHueFromPointer(event);
                    });

                    colorPickerRefs.rgbInputs.forEach(function (input) {
                        input.addEventListener('input', function () {
                            const rgb = {
                                r: colorPickerRefs.rgbInputs.find(function (item) { return item.dataset.pickerRgb === 'r'; })?.value || 0,
                                g: colorPickerRefs.rgbInputs.find(function (item) { return item.dataset.pickerRgb === 'g'; })?.value || 0,
                                b: colorPickerRefs.rgbInputs.find(function (item) { return item.dataset.pickerRgb === 'b'; })?.value || 0,
                            };

                            const hsv = rgbToHsv({
                                r: clampNumber(rgb.r, 0, 255, 0),
                                g: clampNumber(rgb.g, 0, 255, 0),
                                b: clampNumber(rgb.b, 0, 255, 0),
                            });

                            state.colorPicker.h = hsv.h;
                            state.colorPicker.s = hsv.s;
                            state.colorPicker.v = hsv.v;
                            updateColorPickerUI();
                            syncColorPickerToField(rgbToHex(hsvToRgb(state.colorPicker)));
                        });
                    });

                    document.addEventListener('mousemove', function (event) {
                        if (colorDragMode === 'spectrum') {
                            updateSpectrumFromPointer(event);
                        } else if (colorDragMode === 'hue') {
                            updateHueFromPointer(event);
                        }
                    });

                    document.addEventListener('mouseup', function () {
                        colorDragMode = null;
                    });
                }

                function bindCommonActions(scope) {
                    scope.querySelectorAll('[data-action="doc-link"]').forEach(function (button) {
                        button.addEventListener('click', function () {
                            const label = button.dataset.label || 'Guide';
                            notify(label + ' can be connected to your tenant documentation or demo URL.', 'success');
                        });
                    });

                    scope.querySelectorAll('[data-action="copy-script"], [data-action="copy-container"]').forEach(function (button) {
                        button.addEventListener('click', async function () {
                            const codes = getTabState().embed_codes || {};
                            const text = button.dataset.action === 'copy-script' ? (codes.script_code || '') : (codes.container_code || '');

                            try {
                                await navigator.clipboard.writeText(text);
                                notify('Code copied to clipboard.', 'success');
                            } catch (error) {
                                notify('Failed to copy code.', 'danger');
                            }
                        });
                    });

                    scope.querySelectorAll('[data-action="preview-device"]').forEach(function (button) {
                        button.addEventListener('click', function () {
                            applyFieldValue('preview_device', button.dataset.device || 'desktop');
                            renderActiveTab();
                        });
                    });
                }

                function bindCustomerCareAccordion(scope) {
                    scope.querySelectorAll('[data-faq-trigger]').forEach(function (button) {
                        button.addEventListener('click', function () {
                            const item = button.closest('[data-faq-item]');
                            if (!item) {
                                return;
                            }

                            const isOpen = item.classList.contains('is-open');

                            scope.querySelectorAll('[data-faq-item]').forEach(function (entry) {
                                entry.classList.remove('is-open');
                                const trigger = entry.querySelector('[data-faq-trigger]');
                                const answer = entry.querySelector('.hcf-faq-answer');

                                if (trigger) {
                                    trigger.setAttribute('aria-expanded', 'false');
                                }

                                if (answer) {
                                    answer.hidden = true;
                                }
                            });

                            if (isOpen) {
                                return;
                            }

                            item.classList.add('is-open');
                            button.setAttribute('aria-expanded', 'true');
                            const answer = item.querySelector('.hcf-faq-answer');
                            if (answer) {
                                answer.hidden = false;
                            }
                        });
                    });
                }

                function bindRightColumnEvents() {
                    bindCommonActions(refs.rightColumn);
                    bindCustomerCareAccordion(refs.rightColumn);
                }

                function bindInputEvents() {
                    refs.leftColumn.querySelectorAll('[data-field]').forEach(function (input) {
                        input.addEventListener('focus', function () {
                            updateInputShellFocus(input, true);

                            if (input.dataset.fieldType === 'color') {
                                openColorPicker(input);
                            }
                        });

                        input.addEventListener('blur', function () {
                            updateInputShellFocus(input, false);

                            if (input.dataset.fieldType === 'color') {
                                const normalized = normalizeColorInput(input.value);
                                if (normalized !== input.value) {
                                    input.value = normalized;
                                    applyFieldValue(input.dataset.field, input.value);
                                    updateColorFieldVisuals(input);
                                    renderRightColumnLive();
                                }
                            }
                        });

                        input.addEventListener('input', function () {
                            let value = input.value;

                            if (input.dataset.field === 'custom_border_radius') {
                                value = value.replace(/[^\d]/g, '').slice(0, 2);
                                input.value = value;
                            }

                            applyFieldValue(input.dataset.field, value);

                            if (input.dataset.fieldType === 'color') {
                                updateColorFieldVisuals(input);
                            }

                            renderRightColumnLive();
                        });
                    });

                    refs.leftColumn.querySelectorAll('[data-action="open-color-picker"]').forEach(function (button) {
                        button.addEventListener('click', function (event) {
                            event.preventDefault();
                            const input = button.closest('.hcf-color-shell')?.querySelector('[data-field]');
                            if (input) {
                                openColorPicker(input);
                                input.focus();
                            }
                        });
                    });
                }

                function bindSelectEvents() {
                    refs.leftColumn.querySelectorAll('[data-action="toggle-select"]').forEach(function (button) {
                        button.addEventListener('click', function () {
                            const wrap = button.closest('[data-select-field]');
                            if (!wrap) {
                                return;
                            }

                            const isOpen = wrap.classList.contains('is-open');
                            closeSelectMenus(isOpen ? null : wrap);
                            wrap.classList.toggle('is-open', !isOpen);
                            button.setAttribute('aria-expanded', String(!isOpen));
                            const menu = wrap.querySelector('.hcf-select-menu');
                            if (menu) {
                                menu.hidden = isOpen;
                            }
                        });
                    });

                    refs.leftColumn.querySelectorAll('[data-select-option]').forEach(function (option) {
                        option.addEventListener('click', function () {
                            const field = option.dataset.field;
                            const value = option.dataset.selectOption;
                            applyFieldValue(field, value);
                            closeSelectMenus();
                            closeColorPicker();
                            renderActiveTab();
                        });
                    });
                }

                function bindToggleEvents() {
                    refs.leftColumn.querySelectorAll('[data-boolean-field]').forEach(function (toggle) {
                        toggle.querySelectorAll('.hcf-toggle-button').forEach(function (button) {
                            button.addEventListener('click', function () {
                                const field = toggle.dataset.booleanField;
                                const value = button.dataset.value === 'true';

                                if (field === 'identity_provider') {
                                    applyFieldValue(field, value ? 'sms' : 'external');
                                } else if (field === 'checkout_layout') {
                                    applyFieldValue(field, value ? 'standard' : 'reversed');
                                } else {
                                    applyFieldValue(field, value);
                                }

                                renderActiveTab();
                            });
                        });
                    });
                }

                function bindLeftColumnEvents() {
                    bindTooltipEvents(refs.leftColumn);
                    bindInputEvents();
                    bindSelectEvents();
                    bindToggleEvents();

                    const saveButton = refs.leftColumn.querySelector('[data-action="save-tab"]');
                    if (saveButton) {
                        saveButton.addEventListener('click', saveActiveTab);
                    }

                    bindCommonActions(refs.leftColumn);
                    updateSaveButtonState();
                }

                function renderRightColumnLive() {
                    refs.rightColumn.innerHTML = renderRightColumn();
                    bindRightColumnEvents();
                }

                function renderActiveTab() {
                    closeTooltip(true);
                    closeColorPicker();
                    refs.leftColumn.innerHTML = renderLeftColumn();
                    refs.rightColumn.innerHTML = renderRightColumn();
                    refs.bottomRow.innerHTML = '';
                    refs.bottomRow.hidden = true;
                    bindLeftColumnEvents();
                    bindRightColumnEvents();
                }

                function serializeSettingsForSave(tab) {
                    const settings = Object.assign({}, getTabState(tab).settings);

                    if (tab === 'sign-up' && settings.identity_provider !== 'external') {
                        settings.identity_provider = 'sms';
                    }

                    if (tab === 'checkout' && settings.checkout_layout !== 'reversed') {
                        settings.checkout_layout = 'standard';
                    }

                    if (tab === 'general-branding') {
                        if (settings.border_radius !== 'custom') {
                            settings.custom_border_radius = String(resolveBorderRadius(settings));
                        }

                        if (settings.font_family !== 'custom') {
                            settings.font_custom_url = String(settings.font_custom_url || '');
                        }
                    }

                    return settings;
                }

                function setSaveButtonLoading(isLoading) {
                    const button = refs.leftColumn.querySelector('[data-action="save-tab"]');
                    if (!button) {
                        return;
                    }

                    if (!button.dataset.defaultLabel) {
                        button.dataset.defaultLabel = button.textContent.trim();
                    }

                    state.saving = isLoading;
                    if (isLoading) {
                        button.disabled = true;
                        button.innerHTML = '<span class="hcf-spinner-inline" aria-hidden="true"></span> Saving...';
                        return;
                    }

                    button.textContent = button.dataset.defaultLabel;
                    updateSaveButtonState();
                }

                function saveActiveTab() {
                    const tab = state.activeTab;
                    if (!getActiveTabMeta().saveable) {
                        return;
                    }

                    setSaveButtonLoading(true);

                    request(endpoints.save, 'POST', {
                        tab,
                        settings: serializeSettingsForSave(tab),
                    })
                        .then(function (response) {
                            if (response?.data?.settings) {
                                state.tabs[tab] = response.data.settings;
                            }

                            markTabDirty(tab, false);
                            renderActiveTab();
                            notify(response.message || (tabLabel(tab) + ' settings saved successfully.'), 'success');
                        })
                        .catch(function (error) {
                            const message = error.payload?.message || firstError(error.payload?.errors) || error.message || 'Failed to save settings.';
                            notify(message, 'danger');
                        })
                        .finally(function () {
                            setSaveButtonLoading(false);
                        });
                }

                function hydrateTabs(payload) {
                    state.tabs = payload || {};
                    tabMeta.forEach(function (tab) {
                        if (!state.tabs[tab.key]) {
                            state.tabs[tab.key] = { settings: {}, embed_codes: {} };
                        }

                        upgradeLegacyThemeDefaults(tab.key, state.tabs[tab.key]);
                    });
                }

                function loadData() {
                    state.loading = true;
                    showLoader('Loading hosted customer flows...');
                    refs.content.hidden = true;

                    request(endpoints.data)
                        .then(function (response) {
                            hydrateTabs(response.data?.tabs || {});
                            state.loaded = true;
                            refs.content.hidden = false;
                            renderTabs();
                            renderActiveTab();
                        })
                        .catch(function (error) {
                            const message = error.payload?.message || error.message || 'Failed to load hosted customer flows.';
                            notify(message, 'danger');
                        })
                        .finally(function () {
                            state.loading = false;
                            hideLoader();
                        });
                }

                bindColorPickerEvents();

                document.addEventListener('mousedown', function (event) {
                    const target = event.target;

                    if (!refs.leftColumn.contains(target)) {
                        closeSelectMenus();
                    }

                    if (
                        refs.colorPicker &&
                        !refs.colorPicker.hidden &&
                        !refs.colorPicker.contains(target) &&
                        !target.closest('.hcf-color-shell')
                    ) {
                        closeColorPicker();
                    }

                    if (!target.closest('.hcf-help-trigger') && !target.closest('.hcf-tooltip-bubble')) {
                        closeTooltip(true);
                    }
                });

                window.addEventListener('resize', function () {
                    if (state.tooltipTrigger) {
                        positionTooltip(state.tooltipTrigger);
                    }

                    positionColorPicker();
                });

                window.addEventListener('scroll', function () {
                    if (state.tooltipTrigger) {
                        positionTooltip(state.tooltipTrigger);
                    }

                    positionColorPicker();
                }, true);

                loadData();
            }

            document.addEventListener('DOMContentLoaded', initHostedCustomerFlowsPage);
            document.addEventListener('livewire:navigated', initHostedCustomerFlowsPage);
        })();
    </script>
@endpush