{% extends "OfficeBrainCustomBundleThemeBundle:IdmeTheme:themeBase.html.twig" %}

{% block bread_crumb_after_home %}
	<li>{{ 'checkout.shopping_cart' |trans({},'goldstar') }}<i class="fa fa-angle-right fa-fw"></i></li>
    <li> <strong>{{ 'checkout.checkout' |trans }}</strong></li>
{% endblock bread_crumb_after_home %}

{% block main_content %}
<div class="innerpage ob-product-detail-page">
	<div class="container">
		<div class="content-info-page">
			<div class="checkout-page">
				{% use 'OfficeBrainCustomBundleThemeBundle:IdmeTheme:/BaseUIElements/breadCrumbCheckout.html.twig' %}
				{% block bread_crumb %} {{ parent() }} {% endblock bread_crumb %}
			    <div class="container">
			        <!-- AWESOME NEWS BANNER -->
		            <div class="awesome-banner">
		                <strong>Awesome News!</strong> You won't have to pay at checkout. To ensure accuracy, we'll send you a
		                proof to review before payment is due.
		            </div>

		            <div class="checkout-layout">
		            	{% block checkout_page_layout_block %}{% endblock checkout_page_layout_block %}
		            </div>
				</div>
			</div>
		</div>
	</div>
</div>

{% endblock main_content %}
{% block footer_css %}
	{{ parent() }}
	
<style>
/* Figma checkout design tokens */
.checkout-page {
    --co-blue: #3298e6;
    --co-blue-dark: #155f9a;
    --co-blue-light: #4a9fd4;
    --co-banner-bg: #e8f2fce9;
    --co-sidebar-bg: #f9fafb;
    --co-text: #000000;
    --co-text-body: #333333;
    --co-text-muted: #666666;
    --co-text-label: #555555;
    --co-border: #d1d1d1;
    --co-border-light: #e5e5e5;
    --co-white: #ffffff;
    --co-radius-sm: 4px;
    --co-radius-md: 8px;
    --co-radius-lg: 16px;
    --co-font: 'Montserrat', Arial, sans-serif;
    font-family: var(--co-font);
    color: var(--co-text-body);
    padding: 8px 0 48px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

.checkout-page *,
.checkout-page *::before,
.checkout-page *::after {
    box-sizing: border-box;
}

.checkout-page .container {
    width: 100%;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
}

.checkout-page img {
    max-width: 100%;
    height: auto;
}

.checkout-page .table-scroll-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.checkout-page .checkout-step-indent {
    margin-left: 38px;
    width: calc(100% - 38px);
    max-width: 100%;
}

/* Breadcrumb */
.checkout-page .bradcome {
    margin: 8px 0 20px;
    padding: 0;
}

.checkout-page .bradcome ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    line-height: 1.4;
}

.checkout-page .bradcome ul li {
    color: var(--co-text-muted);
}

.checkout-page .bradcome ul li a {
    color: var(--co-text-muted);
    text-decoration: none;
}

.checkout-page .bradcome ul li a:hover {
    color: var(--co-blue);
}

.checkout-page .bradcome ul li strong {
    color: var(--co-text);
    font-weight: 700;
}

/* Awesome News banner */
.checkout-page .awesome-banner {
    background: var(--co-banner-bg);
    border: none;
    border-radius: var(--co-radius-md);
    padding: 14px 20px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--co-text-body);
    margin-bottom: 32px;
}

.checkout-page .awesome-banner strong {
    color: var(--co-text);
    font-weight: 700;
}

/* Two-column layout */
.checkout-page .checkout-layout {
    display: flex;
    gap: 48px;
    align-items: flex-start;
}

/* Shopping cart sidebar */
.checkout-page .cart-col {
    flex: 0 0 38%;
    max-width: 420px;
    min-width: 0;
}

.checkout-page .cart-sidebar {
    background: var(--co-sidebar-bg);
    border-radius: var(--co-radius-lg);
    padding: 24px 22px 22px;
}

.checkout-page .cart-col h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--co-text);
    letter-spacing: 0;
}

.checkout-page .cart-items {
    --cart-item-height: 112px; /* 76px thumb + 18px padding top/bottom */
    display: flex;
    flex-direction: column;
    max-height: calc(var(--cart-item-height) * 4);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE / Edge */
}

.checkout-page .cart-items::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

.checkout-page .cart-item {
    display: grid;
    grid-template-columns: 76px 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 14px;
    align-items: start;
    padding: 18px 0;
    border-bottom: 1px solid var(--co-border-light);
}

.checkout-page .cart-item:last-child {
    border-bottom: none;
}

.checkout-page .cart-item img {
    grid-row: 1 / span 2;
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: var(--co-radius-sm);
    background: #e8e8e8;
}

.checkout-page .cart-item-info {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-width: 0;
}

.checkout-page .cart-item-info .item-name {
    font-size: 13px;
    font-weight: 400;
    color: var(--co-text);
    margin-bottom: 6px;
    line-height: 1.35;
}

.checkout-page .cart-item-info .item-meta {
    font-size: 13px;
    color: var(--co-text-body);
    line-height: 1.6;
}

.checkout-page .cart-item-info .item-total {
    font-size: 13px;
    font-weight: 600;
    color: var(--co-text);
    margin-top: 6px;
}

.checkout-page .view-detail-link {
    grid-column: 3;
    grid-row: 1;
    font-size: 13px;
    color: var(--co-blue);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    padding-top: 2px;
}

.checkout-page .view-detail-link:hover {
    text-decoration: underline;
}

.checkout-page .cart-notice-box {
    background: var(--co-banner-bg);
    border: none;
    border-radius: var(--co-radius-md);
    padding: 14px 16px;
    font-size: 13px;
    color: var(--co-text-body);
    margin-top: 16px;
    line-height: 1.5;
}

.checkout-page .cart-notice-box strong {
    color: var(--co-text);
    font-weight: 700;
}

.checkout-page .cart-artwork-box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--co-text-body);
    cursor: pointer;
    background: #f6f0e4;
    border: 1px solid #e8dfd0;
    border-radius: var(--co-radius-md);
    padding: 12px 14px;
}

.checkout-page .cart-artwork-box .info-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--co-blue);
    color: var(--co-white);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-style: italic;
}

.checkout-page .cart-artwork-box u {
    text-decoration: underline;
}

/* Order summary — below artwork question (Figma) */
.checkout-page .cart-totals {
    display: block;
    margin-top: 20px;
    background: #f8f9fa;
    border-radius: var(--co-radius-lg);
    padding: 24px 26px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: none;
}

.checkout-page .cart-totals .totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--co-text-muted);
    font-weight: 400;
    padding: 0;
    margin: 0 0 18px;
    border-bottom: none;
}

.checkout-page .cart-totals .totals-row:last-child {
    margin-bottom: 0;
}

.checkout-page .cart-totals .totals-row span:last-child {
    text-align: right;
}

.checkout-page .cart-totals .totals-row.grand-total {
    font-size: 15px;
    font-weight: 700;
    color: var(--co-text);
    padding-top: 0;
    margin-top: 2px;
}

.checkout-page .cart-totals .totals-row.grand-total span {
    font-weight: 700;
    color: var(--co-text);
}

/* Checkout column */
.checkout-page .checkout-col {
    flex: 1;
    min-width: 0;
}

.checkout-page .checkout-col > h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--co-text);
    margin: 0 0 24px;
    line-height: 1.2;
}

/* Email completed row */
.checkout-page .step-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0 0 24px;
    margin-bottom: 8px;
    border-bottom: none;
}

.checkout-page .step-check {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--co-blue);
    color: var(--co-white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    margin-top: 0;
}

.checkout-page .step-check.checked {
    background: var(--co-blue);
    color: var(--co-white);
}

.checkout-page .step-content {
    flex: 1;
    min-width: 0;
}

.checkout-page .step-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--co-blue);
    margin-bottom: 4px;
}

.checkout-page .step-title.dark {
    color: var(--co-text);
}

.checkout-page .step-detail {
    font-size: 14px;
    color: var(--co-text-body);
    line-height: 1.4;
}

.checkout-page .step-change {
    font-size: 13px;
    color: var(--co-blue);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    margin-top: 2px;
    text-decoration: none;
}

.checkout-page .step-change:hover {
    text-decoration: underline;
}

/* Form sections */
.checkout-page .form-section {
    margin-top: 0;
}

.checkout-page .form-section h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--co-text);
}

.checkout-page .form-section p.form-note {
    font-size: 13px;
    color: var(--co-text-muted);
    margin-bottom: 20px;
    line-height: 1.45;
}

.checkout-page .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
}

.checkout-page .form-grid .full {
    grid-column: 1 / -1;
}

.checkout-page .form-grid .form-group--city {
    grid-column: 1;
}

.checkout-page .form-grid .form-group--zip {
    grid-column: 2;
}

.checkout-page .form-group {
    margin: 0;
}

.checkout-page .form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--co-text-label);
    margin-bottom: 6px;
}

.checkout-page .form-group input,
.checkout-page .form-group select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--co-border);
    border-radius: var(--co-radius-sm);
    padding: 11px 12px;
    font-family: var(--co-font);
    font-size: 14px;
    color: var(--co-text-body);
    background: var(--co-white);
    outline: none;
    transition: border-color 0.2s;
    height: auto;
    line-height: 1.4;
}

.checkout-page .form-group input:focus,
.checkout-page .form-group select:focus {
    border-color: var(--co-blue);
    box-shadow: none;
}

.checkout-page .form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.checkout-page .form-group.full {
    margin-bottom: 0;
}

/* Email step */
.checkout-page .email-input-row {
    display: block;
}

.checkout-page .email-input-row input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--co-border);
    border-radius: var(--co-radius-sm);
    padding: 11px 12px;
    font-family: var(--co-font);
    font-size: 14px;
}

.checkout-page .email-continue-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
}

.checkout-page .email-continue-row .btn-continue {
    flex: 1;
    margin-top: 0;
}

.checkout-page .secure-note {
    font-size: 11px;
    color: var(--co-text-muted);
    line-height: 1.4;
    max-width: 220px;
}

.checkout-page .secure-note svg {
    display: none;
}

/* Continue button — Figma gradient */
.checkout-page .btn-continue {
    width: 100%;
    margin-top: 20px;
    padding: 14px 24px;
    border: none;
    border-radius: var(--co-radius-sm);
    background: linear-gradient(180deg, var(--co-blue-light) 0%, var(--co-blue) 55%, var(--co-blue-dark) 100%);
    color: var(--co-white);
    font-family: var(--co-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter 0.2s, transform 0.1s;
    box-shadow: none;
}

.checkout-page .btn-continue:hover {
    filter: brightness(1.05);
}

.checkout-page .btn-continue:active {
    transform: scale(0.995);
}

.checkout-page .btn-place-order {
    width: 100%;
    margin-top: 20px;
    padding: 16px 24px;
    border: none;
    border-radius: var(--co-radius-sm);
    background: linear-gradient(180deg, var(--co-blue-light) 0%, var(--co-blue) 55%, var(--co-blue-dark) 100%);
    color: var(--co-white);
    font-family: var(--co-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}

.checkout-page .btn-place-order:hover {
    filter: brightness(1.05);
}

/* Next steps */
.checkout-page .next-steps {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--co-border-light);
}

.checkout-page .next-steps h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--co-text);
    margin-bottom: 12px;
}

.checkout-page .next-step-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--co-border-light);
}

.checkout-page .next-step-item:last-child {
    border-bottom: none;
}

.checkout-page .next-step-item .ns-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--co-text);
}

.checkout-page .next-step-item .ns-desc {
    font-size: 12px;
    color: var(--co-text-muted);
    margin-top: 2px;
}

/* Step panels */
.checkout-page .step-panel {
    display: none;
}

.checkout-page .step-panel.active {
    display: block;
}

/* Delivery table & payment — keep functional styles */
.checkout-page .delivery-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 13px;
}

.checkout-page .delivery-table th {
    text-align: left;
    font-weight: 700;
    font-size: 11px;
    color: var(--co-text-muted);
    text-transform: uppercase;
    padding: 8px 10px;
    border-bottom: 2px solid var(--co-border-light);
}

.checkout-page .delivery-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #f0f0f0;
    color: var(--co-text-body);
}

.checkout-page .delivery-table .change-link {
    color: var(--co-blue);
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
}

.checkout-page .payment-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 22px;
}

.checkout-page .pay-tab {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px 18px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.checkout-page .pay-tab:hover:not(.active) {
    background: #e8f4fc;
    border-color: #b3d9f0;
}

.checkout-page .pay-tab.active {
    border-color: var(--co-blue);
    background: var(--co-blue);
    color: var(--co-white);
}

.checkout-page .pay-tab.active svg {
    stroke: #fff;
}

.checkout-page .pay-tab svg {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

.checkout-page .payment-form-note {
    font-size: 12.5px;
    color: #777;
    margin-bottom: 16px;
    line-height: 1.45;
}

.checkout-page .delivery-table--edit select {
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--co-border);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 12px;
    font-family: var(--co-font);
    background: #fff;
}

.checkout-page .delivery-edit-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    justify-content: flex-end;
}

.checkout-page .delivery-step4-tables.delivery-editing .dt-display-row {
    opacity: 0.5;
}

.checkout-page .terms-checkbox-row label a {
    color: var(--co-blue);
    text-decoration: underline;
}

.checkout-page .terms-checkbox-row label a:hover {
    text-decoration: none;
}

.checkout-page .checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin: 10px;
}

.checkout-page .checkbox-row label {
    font-size: 13px;
    color: var(--co-text-body);
    line-height: 1.5;
    margin: 0px ;
}

.checkout-page .checkbox-row input[type="checkbox"] {
    accent-color: var(--co-blue);
    width: 16px;
    height: 16px;
    margin: 2px 5px 0;
    flex-shrink: 0;
}

.checkout-page .info-block {
    margin: 0;
}

.checkout-page .info-block h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--co-text);
    margin: 0 0 10px;
    line-height: 1.3;
}

.checkout-page .info-block p {
    font-size: 13px;
    color: var(--co-text-body);
    margin: 0;
    line-height: 1.55;
}

/* Payment panels — always flex; never override with display:block in JS */
.checkout-page .pay-panel {
    display: block;
    flex-direction: column;
    gap: 28px;
}

.checkout-page .pay-panel .pro-info-msg {
    padding: 0px 0px 20px 0px;
}
.checkout-page .pay-panel .check-box-privacy{
    margin: 0px 0px 15px 0px;
}
.checkout-page .pay-panel.is-hidden {
    display: none !important;
}

.checkout-page .pay-panel .btn-place-order {
    margin-top: 4px;
}

.checkout-page #card-panel .payment-form-note,
.checkout-page #card-panel .partners-box,
.checkout-page #card-panel .payment-instruction,
.checkout-page #card-panel .billing-section--card {
    margin-bottom: 0;
}

.checkout-page #card-panel .card-check-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.checkout-page #card-panel .checkbox-section-title {
    margin: 0;
    line-height: 1.3;
}

.checkout-page .billing-same-check label {
    font-size: 14px;
    font-weight: 600;
}

.checkout-page .billing-same-check .change-addr {
    color: var(--co-blue);
}

.checkout-page #billingAddressPreview {
    margin-top: 4px;
    line-height: 1.55;
}

.checkout-page .partners-box {
    border: 2px solid var(--co-blue);
    border-radius: var(--co-radius-md);
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 0;
    background: #f0f8ff;
}

.checkout-page .partners-radio {
    width: 20px;
    height: 20px;
    accent-color: var(--co-blue);
    flex-shrink: 0;
}

.checkout-page .partners-info {
    flex: 1;
    min-width: 0;
}

.checkout-page .partners-info strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--co-text);
    margin-bottom: 4px;
}

.checkout-page .partners-info small {
    font-size: 12px;
    color: var(--co-text-muted);
}

.checkout-page .partners-logos {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.checkout-page .logo-text {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
}

.checkout-page .logo-paypal {
    color: #003087;
    font-size: 15px;
}

.checkout-page .logo-mc {
    color: #eb001b;
    font-size: 20px;
    letter-spacing: -2px;
}

.checkout-page .logo-visa {
    color: #1a1f71;
    font-style: italic;
    font-size: 16px;
}

.checkout-page .logo-amex {
    font-size: 12px;
    font-weight: 800;
    color: #006fcf;
    border: 1.5px solid #006fcf;
    padding: 3px 6px;
    border-radius: 3px;
}

.checkout-page .payment-instruction {
    margin-bottom: 0;
}

.checkout-page .payment-instruction h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--co-text);
    margin: 0 0 10px;
}

.checkout-page .payment-instruction p {
    font-size: 13px;
    color: var(--co-text-body);
    line-height: 1.5;
    margin: 0;
}

.checkout-page .billing-section h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--co-text);
    margin: 0 0 10px;
}

.checkout-page .billing-section p {
    font-size: 13px;
    color: var(--co-text-body);
    line-height: 1.55;
    margin: 0 0 8px;
}

.checkout-page .billing-section .use-other {
    font-size: 13px;
    font-weight: 600;
    color: var(--co-blue);
    cursor: pointer;
}

.checkout-page .billing-section--card {
    margin-bottom: 16px;
}

.checkout-page .checkbox-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--co-text);
    margin: 16px 0 8px;
}

.checkout-page .btn-card-secondary {
    background: #2a2a3e;
    border-radius: var(--co-radius-sm);
}

/* Modals (inside .checkout-page) */
.checkout-page .modal-overlay {
    display: none !important;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.checkout-page .modal-overlay.open {
    display: flex !important;
}

.checkout-page .modal-box {
    background: var(--co-white);
    border-radius: var(--co-radius-md);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px;
    position: relative;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
}

.checkout-page .modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #555;
    line-height: 1;
    padding: 4px;
    z-index: 2;
}

/* View Detail modal — Figma (compact) */
.checkout-page .view-detail-modal {
    max-width: 520px;
    width: calc(100% - 32px);
    border-radius: 16px;
    border: 1px solid #e8e8e8;
    padding: 20px 22px 18px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
    max-height: 88vh;
}

.checkout-page .view-detail-modal .modal-close {
    top: 14px;
    right: 16px;
    font-size: 22px;
    color: #1a1a1a;
    font-weight: 300;
}

.checkout-page .vd-product-header {
    display: grid;
    grid-template-columns: 1.4fr 0.85fr 0.85fr;
    gap: 12px 16px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #e8e8e8;
}

.checkout-page .vd-product-header .mph-label {
    font-size: 12px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 4px;
    text-transform: none;
    letter-spacing: 0;
}

.checkout-page .vd-product-header .mph-value {
    font-size: 12px;
    font-weight: 400;
    color: #333;
    line-height: 1.4;
}

.checkout-page .vd-product-header .color-dot {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.checkout-page .vd-product-header .color-dot .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #1a1a1a;
    flex-shrink: 0;
}

.checkout-page .vd-sizes {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e8e8e8;
}

.checkout-page .vd-size-labels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    margin-bottom: 6px;
    padding: 0 2px;
}

.checkout-page .vd-size-labels .vd-pipe {
    color: #ccc;
    font-weight: 300;
    user-select: none;
}

.checkout-page .vd-size-qty-track {
    position: relative;
    background: #f0f0f0;
    border-radius: 4px;
    min-height: 32px;
    display: flex;
    align-items: center;
}

.checkout-page .vd-size-qty-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: #333;
    padding: 6px 2px;
}

.checkout-page .vd-size-qty-grid .vd-qty-val {
    font-weight: 400;
    min-height: 1.2em;
}

.checkout-page .vd-pricing {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e8e8e8;
}

.checkout-page .vd-unit-price {
    font-size: 12px;
    color: #333;
    margin: 0 0 10px;
    line-height: 1.45;
}

.checkout-page .vd-unit-price strong {
    font-weight: 700;
    color: #1a1a1a;
}

.checkout-page .vd-shipping-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-bottom: 10px;
}

.checkout-page .vd-shipping-left {
    font-size: 12px;
    color: #333;
}

.checkout-page .vd-shipping-left strong {
    font-weight: 700;
    color: #1a1a1a;
}

.checkout-page .vd-shipping-right {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #333;
    flex: 1;
    justify-content: flex-end;
    min-width: 0;
}

.checkout-page .vd-shipping-right strong {
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
}

.checkout-page .vd-method-select {
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    padding: 6px 28px 6px 10px;
    font-family: var(--co-font);
    font-size: 11px;
    color: #333;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E") no-repeat right 8px center;
    appearance: none;
    cursor: pointer;
    min-width: 140px;
    max-width: 180px;
}

.checkout-page .vd-line-total {
    text-align: right;
    font-size: 12px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.checkout-page .vd-customization-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px;
}

.checkout-page .vd-custom-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    margin-bottom: 14px;
}

.checkout-page .vd-custom-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: #1a1a1a;
    padding: 6px 8px 6px 0;
    border-bottom: 1px solid #e8e8e8;
    vertical-align: bottom;
}

.checkout-page .vd-custom-table th:last-child,
.checkout-page .vd-custom-table td:last-child {
    text-align: right;
    padding-right: 0;
}

.checkout-page .vd-custom-table td {
    padding: 8px 8px 8px 0;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
    vertical-align: top;
    line-height: 1.4;
}

.checkout-page .vd-custom-table tr:last-child td {
    border-bottom: none;
}

.checkout-page .vd-custom-table .vd-charges {
    font-size: 11px;
    line-height: 1.4;
}

.checkout-page .vd-custom-table .vd-charges small {
    display: block;
    font-size: 11px;
    color: #333;
    font-weight: 400;
}

.checkout-page .vd-custom-table .vd-row-total {
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
}

.checkout-page .vd-item-total-bar {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.checkout-page .vd-item-total-bar span {
    background: #f0f0f0;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #1a1a1a;
}

.checkout-page .custom-table th {
    font-size: 11px;
    color: var(--co-text-muted);
}

.checkout-page .change-detail-title {
    font-size: 18px;
    font-weight: 700;
}

.checkout-page .btn-save {
    background: var(--co-blue);
    border-radius: var(--co-radius-sm);
}

.checkout-page .inline-edit-box {
    background: #f0f7ff;
    border-top: 2px solid var(--co-blue);
}

@keyframes checkout-slideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.checkout-page .inline-edit-box {
    animation: checkout-slideDown 0.18s ease;
}

.checkout-page .dt-display-row.editing td {
    background: #f8fcff;
}

.checkout-page .checkout-payment-block {
    margin-top: 24px;
}

.checkout-page .checkout-payment-block > h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--co-text);
    margin: 0 0 16px;
}

.checkout-page .billing-address-modal {
    max-width: 580px;
    padding: 36px 40px;
}

.checkout-page .billing-address-modal .billing-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.checkout-page .billing-address-modal .billing-form-grid .form-group {
    margin-bottom: 0;
}

.checkout-page .billing-address-modal .billing-modal-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--co-text);
    margin: 0 0 6px;
}

.checkout-page .billing-address-modal .billing-modal-note {
    font-size: 13px;
    color: var(--co-text-muted);
    margin-bottom: 28px;
}

.checkout-page .billing-address-modal .billing-country-field {
    margin-bottom: 22px;
}

.checkout-page .billing-address-modal .billing-select-wrap {
    position: relative;
}

.checkout-page .billing-address-modal .billing-select-wrap svg {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.checkout-page .billing-address-modal .form-group label {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    margin-bottom: 6px;
    display: block;
}

.checkout-page .billing-address-modal .form-group input,
.checkout-page .billing-address-modal .form-group select {
    width: 100%;
    border: 1.5px solid #d4d4d4;
    border-radius: 6px;
    padding: 13px 14px;
    font-size: 14px;
    color: #333;
    outline: none;
    box-sizing: border-box;
}

.checkout-page .billing-address-modal .form-group select {
    appearance: none;
    padding-right: 40px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;
}

.checkout-page .change-detail-modal {
    max-width: 460px;
}

/* ========== Responsive ========== */

/* Large tablet / small desktop */
@media (max-width: 1200px) {
    .checkout-page .checkout-layout {
        gap: 32px;
    }

    .checkout-page .cart-col {
        flex: 0 0 42%;
        max-width: 380px;
    }
}

/* Tablet — stack columns */
@media (max-width: 992px) {
    .checkout-page .checkout-layout {
        flex-direction: column;
        gap: 28px;
    }

    .checkout-page .cart-col {
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
    }

    .checkout-page .cart-sidebar {
        padding: 20px 18px;
    }

    .checkout-page .awesome-banner {
        margin-bottom: 24px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .checkout-page {
        padding: 4px 0 28px;
    }

    .checkout-page .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .checkout-page .bradcome {
        margin: 4px 0 14px;
    }

    .checkout-page .bradcome ul {
        font-size: 12px;
    }

    .checkout-page .awesome-banner {
        padding: 12px 14px;
        font-size: 13px;
        margin-bottom: 20px;
    }

    .checkout-page .checkout-col > h2 {
        font-size: 22px;
        margin-bottom: 18px;
    }

    .checkout-page .cart-sidebar {
        padding: 16px 14px;
        border-radius: 12px;
    }

    .checkout-page .cart-col h2 {
        font-size: 16px;
    }

    .checkout-page .cart-totals {
        padding: 18px 16px;
    }

    .checkout-page .cart-totals .totals-row {
        font-size: 13px;
        margin-bottom: 14px;
    }

    .checkout-page .form-grid,
    .checkout-page .form-grid .form-group--city,
    .checkout-page .form-grid .form-group--zip {
        grid-template-columns: 1fr;
        grid-column: 1 / -1;
        gap: 14px;
    }

    .checkout-page .form-section h3 {
        font-size: 16px;
    }

    .checkout-page .cart-item {
        grid-template-columns: 56px 1fr auto;
        gap: 4px 10px;
        padding: 14px 0;
    }

    .checkout-page .cart-item img {
        width: 56px;
        height: 56px;
    }

    .checkout-page .view-detail-link {
        grid-column: 3;
        grid-row: 1;
        font-size: 12px;
    }

    .checkout-page .cart-item-info {
        grid-column: 2 / 3;
        grid-row: 1 / span 2;
    }

    .checkout-page .step-row {
        flex-wrap: wrap;
        gap: 8px 10px;
        padding-bottom: 18px;
    }

    .checkout-page .step-change {
        width: 100%;
        margin-left: 40px;
        margin-top: 4px;
    }

    .checkout-page .checkout-step-indent {
        margin-left: 0;
        width: 100%;
    }

    .checkout-page .email-continue-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .checkout-page .secure-note {
        max-width: none;
    }

    .checkout-page .payment-tabs {
        grid-template-columns: 1fr;
    }

    .checkout-page .partners-box {
        flex-wrap: wrap;
    }

    .checkout-page .partners-logos {
        flex-wrap: wrap;
    }

    .checkout-page .delivery-table {
        font-size: 11px;
        min-width: 520px;
    }

    .checkout-page .delivery-table th,
    .checkout-page .delivery-table td {
        padding: 8px 6px;
    }

    .checkout-page .inline-edit-box {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .checkout-page .inline-edit-fields {
        flex-direction: column;
        width: 100%;
    }

    .checkout-page .inline-edit-group {
        min-width: 0;
        width: 100%;
    }

    .checkout-page .inline-edit-actions {
        width: 100%;
        justify-content: stretch;
    }

    .checkout-page .inline-save-btn,
    .checkout-page .inline-cancel-btn {
        flex: 1;
    }

    .checkout-page .modal-overlay {
        padding: 12px;
        align-items: flex-end;
    }

    .checkout-page .modal-box {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 12px 12px 0 0;
        padding: 20px 16px;
    }

    .checkout-page .view-detail-modal {
        width: 100%;
        max-width: 100%;
        padding: 16px 14px 14px;
        border-radius: 14px 14px 0 0;
        margin-bottom: 0;
    }

    .checkout-page .vd-product-header {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .checkout-page .vd-size-labels {
        font-size: 10px;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 6px;
    }

    .checkout-page .vd-size-labels .vd-pipe {
        display: none;
    }

    .checkout-page .vd-shipping-row {
        flex-direction: column;
        align-items: stretch;
    }

    .checkout-page .vd-shipping-right {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .checkout-page .vd-method-select {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .checkout-page .vd-custom-table {
        display: block;
        min-width: 480px;
    }

    .checkout-page .next-steps {
        margin-top: 24px;
        padding-top: 18px;
    }

    .checkout-page .billing-address-modal {
        padding: 22px 16px;
    }

    .checkout-page .billing-address-modal .billing-form-grid {
        grid-template-columns: 1fr;
    }

    .checkout-page .checkout-payment-block > h3 {
        font-size: 18px;
    }

    .checkout-page .delivery-table select {
        max-width: 120px;
        font-size: 11px;
    }
}

/* Small phones */
@media (max-width: 576px) {
    .checkout-page .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .checkout-page .checkout-col > h2 {
        font-size: 20px;
    }

    .checkout-page .cart-items {
        --cart-item-height: 100px;
    }

    .checkout-page .cart-item {
        grid-template-columns: 48px 1fr;
        grid-template-rows: auto auto auto;
    }

    .checkout-page .cart-item img {
        grid-row: 1 / span 2;
        width: 48px;
        height: 48px;
    }

    .checkout-page .cart-item-info {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .checkout-page .view-detail-link {
        grid-column: 2;
        grid-row: 3;
        justify-self: start;
        margin-top: 4px;
    }

    .checkout-page .cart-item-info .item-name {
        font-size: 13px;
    }

    .checkout-page .btn-continue,
    .checkout-page .btn-place-order {
        padding: 13px 16px;
        font-size: 13px;
    }

    .checkout-page .step-change {
        margin-left: 0;
    }

    .checkout-page .vd-item-total-bar span {
        width: 100%;
        text-align: center;
    }
}

/* Very narrow */
@media (max-width: 380px) {
    .checkout-page .bradcome ul li {
        font-size: 11px;
    }

    .checkout-page .pay-tab {
        padding: 12px 8px;
        font-size: 12px;
    }

    .checkout-page .change-detail-modal {
        width: 100%;
        max-width: 100%;
    }
}

</style>

{% endblock footer_css%}
{% block footer_js %}
 	{{ parent() }}
                
 	{# {% javascripts  
 			'@OfficeBrainOrderBundle/Resources/public/js/checkoutNew.js' %}
        <script src="{{ asset_url }}" type='text/javascript'></script>
    {% endjavascripts %}  

    #}

<script type="text/javascript">
$(document).ready(function () {
  $(window).trigger('resize');
  $(window).trigger('scroll');
  loadPayment();
  $("#js_find_email").click(function(){
  	var _step = ($(this).data('current-step')*1)+1;
    var email = $("#js_emailInput").val();
    $("#js_emailInput").parent().find('.error').remove();
    var ShipAddUrl = Routing.generate ('office_brain_requestquotebundle_requestquote_getShippingAddressByemail', {'_locale' : 'en_us','shipping_from' : 'shipping_book' });
    if(email!=""){
        $('.checkout-page').addClass('ui-load').append('<div class="ui-load-element">'+THEME_LOADER_HTML+'</div>');
	  	$.ajax({
			type : 'GET',
			url : ShipAddUrl,
			data : {'email':email},
			cache : false,
			success : function(response_data) {
                $('.checkout-page').removeClass('ui-load').find('.ui-load-element').remove();
				if(response_data.error_type=="loginError"){
					var link=response_data.page_url;
					goToPage(link.substring(1, link.length));
					return true;
				}
				if(response_data.error_type=="Notfound"){
					var error = "<ul class='error red'><li>Shipping Address Does't exit for this email, To create new address <a href="+response_data.page_url+" target='_blank'> click here </a></li></ul>";
					$("#js_emailInput").parent().append(error);
				}
				if(response_data.success=="success"){
					$(".js_emailDisplay").html(response_data.data.email);
					$('#js_shipping_form_section').html(response_data.data.shipping_html);
					goToStep(_step);
				}
				
			}
		});
	}else{
		var error = "<ul class='error red'><li>Please email address.</li></ul>";
		$("#js_emailInput").parent().append(error);
	}
  });

  $(document).on('click','.js-transaction-submit-btn-checkout', function (e) {
		e.stopImmediatePropagation();
        $('.checkout-page').addClass('ui-load').append('<div class="ui-load-element">'+THEME_LOADER_HTML+'</div>');
		$(this).addClass('disabled');
		$(this).attr('old-label', $(this).html());
		$(this).html('<i class="fa fa-cog fa-spin"></i> ' + Translator.trans('wait', {}, 'js'));
		postForm($(this).closest('form'), $(this));		
  });

   $(document).on('click','.js-transaction-submit-btn-checkout-billing', function (e) {
        e.stopImmediatePropagation();
        $(this).addClass('disabled');
        $(this).attr('old-label', $(this).html());
        $(this).html('<i class="fa fa-cog fa-spin"></i> ' + Translator.trans('wait', {}, 'js'));
        postFormBilling($(this).closest('form'), $(this));     
  });

  $(document).on('click', '#js-place-order-btn', function (e) {
  	$('.checkout-page').addClass('ui-load').append('<div class="ui-load-element">'+THEME_LOADER_HTML+'</div>');
    doPayment();
  });

  $(document).on('change','.js_carrier', function (e) {
		e.stopImmediatePropagation();
		var shippingMethod = $(this).val();
		var productId = $(this).data('product-id');
		var qty = $(this).data('total-qty');
		var shippingaddId = $('#js_shipping_id').val();
		var counter = 0;
		var index = $(this).data('index');
		var request_type = 'request_order';
		var parentSelector = $('#js_'+index);
		if(shippingMethod!=""){
		var data = {'shippingMethod': shippingMethod,'productId':productId,'shippingaddId':shippingaddId,'qty':qty,'counter':counter,'request_type':request_type};
				$('.checkout-page').addClass('ui-load').append('<div class="ui-load-element">'+THEME_LOADER_HTML+'</div>');
				$.ajax({
					type : 'POST',
					url : Routing.generate('officebrain_shippingestimatorbundle_getshippingratedata', {'_locale' : SITE_CULTURE}),
					data : data,
					dataType : 'json',
					cache : false,
					success : function(response_data) {
                        $('.checkout-page').removeClass('ui-load').find('.ui-load-element').remove();
						if(response_data.hasOwnProperty('error_msg')){
							showErrorMessage(response_data.error_msg);
						}
						parentSelector.find('.js_service').append(response_data.record_set);
					}
				});
		}
  });



});

function doPayment(){
    var form = '#'+$('#js-do-payment').closest("form").attr('id');
    var data = $(form).serialize();    
     $('.form-group ul li', $(form)).html('');
     var form_object = $(form);
        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: data,
            cache: false,
            dataType: 'json',
            success: function(responce_data){ 
                $('.checkout-page').removeClass('ui-load').find('.ui-load-element').remove();
                var form_name = responce_data.form_name;
                $('#'+form_name+' .form-group .error-message').html('');
                $('.js-reset-btn', form_object).removeClass('disabled').removeAttr('disabled');
                $('.js-submit-btn', form_object).removeClass('disabled').removeAttr('disabled');
                hidePageAjaxLoading();
                if($('.ui-load').length) {
                    $('.ui-load').find('.ui-load-element').remove();
                    $('.ui-load').removeClass('ui-load');
                }
                if($(form).find(".error-message").length > 0){
                    $(form).find(".error-message").remove();
                }
                if(responce_data.form_status=='error'){         
                    if(responce_data.hasOwnProperty('form_errors')){
                        $.each(responce_data.form_errors, function(field_name, error_message) {
                            field_name = field_name.replace('.', '_');
                            if(field_name == 'card_expireAt') {
                                field_name = 'card_expireAt_month';
                            }
                            if(field_name == 'card_term') {
                                field_name = 'card_term_checkbox';
                            }
                            if($('#'+form_name+ '_'+field_name).length){
                                $('#'+form_name+ '_'+field_name).after('<ul class="error-message"><li>'+error_message+'</li></ul>');
                            }
                        });
                    }
                    else if(responce_data.hasOwnProperty('login_error')) {
                        goToPage(responce_data.login_error);                    
                    }
                    else if(responce_data.hasOwnProperty('error_message')) {
                        showErrorMessage(responce_data.error_message);                  
                    }
                }
                else if(responce_data.status=='success'){
                    if(responce_data.hasOwnProperty('page_url')){
                        showSuccessMessage(responce_data.success_message);
                        goToPage(responce_data.page_url);
                    }
                    else if(responce_data.hasOwnProperty('goto_url')) {
                        showTopAjaxLoading(Translator.trans('wait_while_redirecting', {}, 'js'));
                        goToPage(responce_data.goto_url);
                    }
                    else if(responce_data.hasOwnProperty('call_ajax_url')) {
                        var counter = 0;
                        if(responce_data.hasOwnProperty('counter')){
                            counter = responce_data.counter;
                        }
                        var shippingFrom = $('input[type=radio][name=request_quote_shippingaddress_from_'+counter+']:checked').val();   
                        var data = { 'shipping_type' : shippingFrom, 'contact_id' : responce_data.contact_book_id ,'counter' : counter } ;
                        $.ajax({
                            type : 'GET',
                            url : Routing.generate (responce_data.call_ajax_url, {'_locale' : SITE_CULTURE}),
                            data : data,
                            cache : false,
                            success : function(response_data) {
                                $('#js_shipping_addresses_'+counter).html(response_data);
                                $('#modal-table').modal('hide');
                                
                                // Add Shipping Address To Summary
                                var addressToSet = $('#js_shipping_addresses_'+counter).find('p').html();
                                $('#js_product_summary .js_summary_shipping_type .js_shipp_address_'+counter).html('<span>'+addressToSet+'</span>');
                            }
                        });
                    }
                    else if(responce_data.hasOwnProperty('close_modal')) {
                        $('#modal-table').modal('hide');
                    }
                    else if(responce_data.hasOwnProperty('artwork')) {
                        $('#modal-table').modal('hide');
                        $('#uploadImgPopup').modal('hide');
                        $('#'+responce_data.logoId).html('<img src="'+responce_data.fileDetail+'" /> <a href="javascript:void(0)" class="js_remove_image_artwork" data-logoid="'+responce_data.logoId+'" data-file-path="'+responce_data.fileDetail+'">'+Translator.trans('transaction.request_quote.remove_artwork', {}, 'js')+'</a>  <input type="hidden" id="'+responce_data.logoId+'_input" value="'+responce_data.fileDetail+'" class="js_artwork_logo">');
                    }
                    if(responce_data.hasOwnProperty('popup_url')){
                        $('#modal-table').addClass('login-col');
                        getModelFromUrl(responce_data.popup_url);
                    }
                    else if(responce_data.hasOwnProperty('success_message')){
                        showSuccessMessage(responce_data.success_message);
                        if(responce_data.hasOwnProperty('feedback_page')){                                              
                            $(".js-feedback-block").animate({right:"-330px"}, 400);
                            $('#js-site-feed-btn').addClass("isdrag").removeClass("drag-toggle");
                        }
                    }
                    else if(responce_data.hasOwnProperty('email_success_message')){
                        $('#modal-table').modal('hide');
                        showSuccessMessage(responce_data.email_success_message);
                    }
                }
            }
        });
        return false;
}


function postFormBilling(form, selectorObj){
     var data = $(form).serialize();
     $('.checkout-page').addClass('ui-load').append('<div class="ui-load-element">'+THEME_LOADER_HTML+'</div>');
      $('#billingAddressModal').find('.form-group ul li', $(form)).html('');
        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: data,
            cache: false,
            dataType: 'json',
            success: function(responce_data){
                $('.checkout-page').removeClass('ui-load').find('.ui-load-element').remove();
                var form_name = responce_data.form_name;

                 $('#billingAddressModal').find('#'+form_name+' .form-group .error-message').html('');

                if(responce_data.form_status=='error'){
                    if(responce_data.hasOwnProperty('form_errors')){
                        $.each(responce_data.form_errors, function(field_name, error_message) {
                            field_name = field_name.replace('.', '_');
                            if( $('#billingAddressModal').find('#'+form_name+ '_'+field_name).length){
                                 $('#billingAddressModal').find('#'+form_name+ '_'+field_name).after('<ul class="error-message"><li>'+error_message+'</li></ul>');
                            }
                        });
                    }
                    else if(responce_data.hasOwnProperty('error_message')) {
                        showErrorMessage(responce_data.error_message);
                    }
                }
                else if(responce_data.status=='success'){
                    showSuccessMessage(responce_data.success_message);
                    
                    var address = '';
                    if($('#billingAddressModal').find('#ob_contactbook_name').val()!=""){
                        address += $('#billingAddressModal').find('#ob_contactbook_name').val() + '<br>';
                    }
                    if($('#billingAddressModal').find('#ob_contactbook_street1').val()!=""){
                        address += $('#billingAddressModal').find('#ob_contactbook_street1').val();  
                    }
                    if($('#billingAddressModal').find('#ob_contactbook_cityName').val()!=""){
                        address += ' ,'+$('#billingAddressModal').find('#ob_contactbook_cityName').val();    
                    }
                    if($('#billingAddressModal').find('#ob_contactbook_stateId').val()!=""){
                        address += ' ,'+$('#billingAddressModal').find('#ob_contactbook_stateId option:selected').text();    
                    }
                    if($('#billingAddressModal').find('#ob_contactbook_zipcode').val()!=""){
                        address += ' '+$('#billingAddressModal').find('#ob_contactbook_zipcode').val();  
                    }
                    if($('#billingAddressModal').find('#ob_contactbook_countryId').val()!=""){
                        address += ' ,'+$('#billingAddressModal').find('#ob_contactbook_countryId option:selected').text();
                    }
                    $('#js_billing_id').val($('#js_contact_id').val());
                    
                    $("#billingAddressPreview").html(address);
                    $("#billingAddressDisplay").html(address);
                    closeModal('billingAddressModal',false);
                    
                }
                selectorObj.removeClass('disabled');
                selectorObj.html('CONTINUE');
            }
        });
}

function  postForm(form, selectorObj){
	 var data = $(form).serialize();
	 $('.form-group ul li', $(form)).html('');
		$.ajax({
			type: 'POST',
			url: $(form).attr('action'),
			data: data,
			cache: false,
			dataType: 'json',
			success: function(responce_data){
				$('.checkout-page').removeClass('ui-load').find('.ui-load-element').remove();
				var form_name = responce_data.form_name;
				$('#'+form_name+' .form-group .error-message').html('');
				if(responce_data.form_status=='error'){
					if(responce_data.hasOwnProperty('form_errors')){
						$.each(responce_data.form_errors, function(field_name, error_message) {
							field_name = field_name.replace('.', '_');
							if($('#'+form_name+ '_'+field_name).length){
								$('#'+form_name+ '_'+field_name).after('<ul class="error-message"><li>'+error_message+'</li></ul>');
							}
						});
					}
					else if(responce_data.hasOwnProperty('error_message')) {
						showErrorMessage(responce_data.error_message);
					}
				}
				else if(responce_data.status=='success'){
					showSuccessMessage(responce_data.success_message);
					$(".js_emailDisplay").html($('#js_emailInput').val());
					var address = '';
					if($('#ob_contactbook_name').val()!=""){
						address += $('#ob_contactbook_name').val() + '<br>';
					}
					if($('#ob_contactbook_street1').val()!=""){
						address += $('#ob_contactbook_street1').val();	
					}
					if($('#ob_contactbook_cityName').val()!=""){
						address += ' ,'+$('#ob_contactbook_cityName').val();	
					}
					if($('#ob_contactbook_stateId').val()!=""){
						address += ' ,'+$('#ob_contactbook_stateId option:selected').text();	
					}
					if($('#ob_contactbook_zipcode').val()!=""){
						address += ' '+$('#ob_contactbook_zipcode').val();	
					}
					if($('#ob_contactbook_countryId').val()!=""){
						address += ' ,'+$('#ob_contactbook_countryId option:selected').text();
					}
                    $("#shippingAddressDisplayDelivery").html(address);
					$("#shippingAddressDisplay").html(address);
                    $("#shippingAddressDisplayPayment").html(address);
                     const same = document.getElementById('billingSame')?.checked;
                     if(same){
                        $("#billingAddressPreview").html(address);
                     }
					goToStep(3);
				}
				selectorObj.removeClass('disabled');
				selectorObj.html('CONTINUE');
			}
		});
}

function syncEmailDisplays() {
    const emailVal = document.getElementById('js_emailInput')?.value?.trim();
    const text = emailVal || '';
    ['emailDisplay', 'emailDisplayBilling', 'emailDisplayDelivery', 'emailDisplayPayment'].forEach(id => {
        const el = document.getElementById(id);
        if (el) el.textContent = text;
    });
}

function syncDeliveryFromStep3() {
    const panel = document.getElementById('step-delivery-panel');
    const rows = panel?.querySelectorAll('.delivery-table tbody tr') || [];
    const summaries = [];
    var str = `<table class="delivery-table">
		                    <thead>
		                        <tr>
		                            <th>SR NO.</th>
		                            <th>SKU</th>
		                            <th>QTY</th>
		                            <th>SHIPPING CARRIER</th>
		                            <th>METHOD</th>
		                            <th></th>
		                        </tr>
		                    </thead>
		                    <tbody>`;

    rows.forEach((row, i) => {
        const n = i + 1;
        var sku =  $('#js_'+n+' td:eq(1)').text();
        var qty =  $('#js_'+n+' td:eq(2)').text();
        const selects = row.querySelectorAll('select');
        if (selects.length < 2) return;
        const carrier = selects[0].value;
        const method = selects[1].options[selects[1].selectedIndex].text;
        const carrierEl = document.querySelector('.carrier-display-' + n);
        const methodEl = document.querySelector('.method-display-' + n);
        if (carrierEl) carrierEl.textContent = carrier;
        if (methodEl) methodEl.textContent = method;
        //summaries.push('Line ' + n + ': ' + carrier + ' — ' + method);
        str += `<tr class="dt-display-row" id="disp-row-${n}">
            <td>${n}</td>
            <td>${sku}</td>
            <td>${qty}</td>
            <td class="carrier-display-${n}">${carrier}</td>
            <td class="method-display-${n}">${method}</td>
            <td></td>
        </tr>`;
    });
    str += `</tbody></table>`;
    updateDeliverySummariesFromDisplay(str);
}

function updateDeliverySummariesFromDisplay(str) {
    /*let summaries = presetSummaries;
    if (!summaries) {
        summaries = [];
        [1, 2, 3, 4].forEach(n => {
            const c = document.querySelector('.carrier-display-' + n)?.textContent?.trim();
            const m = document.querySelector('.method-display-' + n)?.textContent?.trim();
            if (c && m) summaries.push('Line ' + n + ': ' + c + ' — ' + m);
        });
    }*/
    //const summaryText = summaries.length ? summaries.join('<br>') : '4 items — delivery configured';
    
    ['deliverySummaryLine', 'deliverySummaryPayment'].forEach(id => {
        const el = document.getElementById(id);
        if (el) el.innerHTML = str;
    });
}

function syncBillingAddressDisplay() {
    const same = document.getElementById('billingSame')?.checked;
    if(same){
        const shippingHtml = document.getElementById('shippingAddressDisplay')?.innerHTML || SHIPPING_ADDRESS_HTML;
        const custom = document.getElementById('billingAddressCustom')?.innerHTML;
        const html = same ? shippingHtml : (custom || shippingHtml);
        ['billingAddressPreview', 'billingAddressDisplay'].forEach(id => {
            const el = document.getElementById(id);
            if (el) el.innerHTML = html;
        });
        const cardBilling = document.querySelector('#card-panel .billing-section--card p');
        if (cardBilling) cardBilling.innerHTML = html.replace(/<br>/g, '<br>');
    }
}

function changeBillingAddressDisplay(){
    const same = document.getElementById('billingSame')?.checked;
    if(same){
        $("#js_billing_id").val($("#js_shipping_id").val());
        const shippingHtml = document.getElementById('shippingAddressDisplay')?.innerHTML || SHIPPING_ADDRESS_HTML;
        const custom = document.getElementById('billingAddressCustom')?.innerHTML;
        const html = same ? shippingHtml : (custom || shippingHtml);
        ['billingAddressPreview', 'billingAddressDisplay'].forEach(id => {
            const el = document.getElementById(id);
            if (el) el.innerHTML = html;
        });
        const cardBilling = document.querySelector('#card-panel .billing-section--card p');
        if (cardBilling) cardBilling.innerHTML = html.replace(/<br>/g, '<br>');
    }else{
        loadBillingModal();
    }
}

function openBillingModal(){
    document.getElementById('billingSame').checked = false;
    changeBillingAddressDisplay();
}

function confirmDeliveryAndContinue() {
    let isValid = true;
    $('.js_service').each(function () {
        if ($(this).val() === '' || $(this).val() === null) {
            isValid = false;
            var error = '<ul class="error red"><li>Please select method</li></ul>';
            $(this).parent().append(error);
            return false; // break loop
        }
    });

    if (isValid) {
        $('.js_service').parents('#js-delivery-table').find('.error').remove();
        const same = document.getElementById('billingSame')?.checked;
        if(same){
            $("#js_billing_id").val($("#js_shipping_id").val());
        }
        var total_shipping = 0;
        $('.js_service').each(function () {
            if ($(this).val()!="") {
                total_shipping = total_shipping+($(this).val()*1);
            }
        });
        $('#js_total_shipping').attr('data-amount',total_shipping);
        $('#js_total_shipping').html(parseFloat(total_shipping).toFixed(2));
        var sub_total = $('#js_sub_total').data('amount');
        var total_tax = $('#js_total_tax').data('amount');
        var order_grand_total = parseFloat(sub_total)+parseFloat(total_shipping)+parseFloat(total_tax);
        $('#js_grand_total').attr('data-amount',order_grand_total);
        $('#js_grand_total').html(parseFloat(order_grand_total).toFixed(2));
        setShippingToCart()
        syncDeliveryFromStep3();
        goToStep(4);
    }
    
}

function setShippingToCart(){
    var shippingDetail={};
    var addressId = $("#js_shipping_id").val();
    $('.js_service').each(function () {
        if ($(this).val()!="") {
            var selector = $(this).parent().parent();
            var cid = selector.find('.js_carrier').data('preadd-id');
            var carrier = selector.find('.js_carrier').val();
            var pid = selector.find('.js_carrier').data('product-id');
            var selectedOption = selector.find('.js_service option:selected');
            var service = selectedOption.data('service');
            var transitTime = selectedOption.data('transit-time');
            var shippingCharge = selectedOption.val();
            shippingDetail[cid] = {
                'shipping_carrier' : carrier,
                'shipping_charge' : shippingCharge ,
                'shipping_method' : service,
                'product_id' : pid ,
                'selected_address_id' : addressId,
                'ship_transittime':transitTime 
            };
            
        }
    });
    $('.checkout-page').addClass('ui-load').append('<div class="ui-load-element">'+THEME_LOADER_HTML+'</div>');
    $.ajax({
            type : 'POST',
            url : Routing.generate ('office_brain_orderbundle_order_setproducttoshipping', {'_locale' : SITE_CULTURE}),
            data : {'data':shippingDetail},
            cache : false,
            success : function(response_data) {
                $('.checkout-page').removeClass('ui-load').find('.ui-load-element').remove();
                if(response_data.city_tax_rate){
                    if(response_data.city_tax_rate>0){
                        var taxrate = (response_data.city_tax_rate)*1;
                        var sub_total = ($("#js_sub_total").data('amount'))*1;
                        var total_shipping = $('#js_total_shipping').data('amount');
                        var totaltax = taxrate*sub_total;
                        var total_tax = totaltax;
                        var order_grand_total = parseFloat(sub_total)+parseFloat(total_shipping)+parseFloat(total_tax);
                        $('#js_total_tax').attr('data-amount',total_tax);
                        $('#js_total_tax').html(parseFloat(total_tax).toFixed(2));
                        $('#payment_option_tax_amount').val(parseFloat(total_tax).toFixed(2));
                        $('#js_grand_total').attr('data-amount',order_grand_total);
                        $('#js_grand_total').html(parseFloat(order_grand_total).toFixed(2));


                    }
                }
            }
        });
}

function loadPayment(){
    var activeTab  = 'invoice';
    var data = { payment_type: activeTab};
    $.ajax({
        type : 'POST',
        url : Routing.generate ('office_brain_paymentbundle_payment_loadpaymentform', {'_locale' : SITE_CULTURE}),
        data : data,
        cache : false,
        success : function(response_data) {
            if(response_data=="logout"){
                goToPage(Routing.generate('office_brain_orderbundle_order_cartlist', {'_locale':SITE_CULTURE}));
            }else{
             $('#js-show-payment-option').html(response_data);
                /*$('#payment_option_number').val($('#js_payment_billing .js_payment_invoice_number').val());
                if($('#js-show-payment-option #payment').find('.js_payment_invoice_number').length>0){
                    $('#js-show-payment-option #payment .js_payment_invoice_number').val($('#js_payment_billing .js_payment_invoice_number').val())
                }*/
            }
        }
    });
}

function confirmBillingAndContinue() {
    //syncBillingAddressDisplay();
    $('#payment_option_billing_id').val($('#js_billing_id').val());
    goToStep(5);
}

function closeModal(id, isEnable=true) {
    document.getElementById(id).classList.remove('open');
    document.body.style.overflow = '';
    if(isEnable){
        if($('#js_billing_id').val()==$('#js_shipping_id').val()){
            document.getElementById('billingSame').checked = true;
        }else{
            document.getElementById('billingSame').checked = false;
        }
    }else{
        document.getElementById('billingSame').checked = false;
    }
}

function loadBillingModal() {
    $('.checkout-page').addClass('ui-load').append('<div class="ui-load-element">'+THEME_LOADER_HTML+'</div>');
    var ShipAddUrl = Routing.generate ('office_brain_requestquotebundle_requestquote_getBillingAddressByUserId', {'_locale' : 'en_us'});
    $.ajax({
        type : 'GET',
        url : ShipAddUrl,
        cache : false,
        success : function(response_data) {
            $('.checkout-page').removeClass('ui-load').find('.ui-load-element').remove();
            if(response_data.error_type=="loginError"){
                var link=response_data.page_url;
                goToPage(link.substring(1, link.length));
                return true;
            }
            if(response_data.error_type=="Notfound"){
                var error = "<ul class='error red'><li>Billing Address Does't exit for this email, To create new address <a href="+response_data.page_url+" target='_blank'> click here </a></li></ul>";
                $("#js_billing_id").parent().append(error);
            }
            if(response_data.success=="success"){
                
                $('#billingAddressModal').html(response_data.data.billing_html);
                document.getElementById('billingAddressModal').classList.add('open');
                document.body.style.overflow = 'hidden';
            }
            
        }
    });
}

function goToStep(step) {
    document.querySelectorAll('.step-panel').forEach(p => p.classList.remove('active'));
    const panels = {
        1: 'step-email-panel',
        2: 'step-shipping-panel',
        3: 'step-delivery-panel',
        4: 'step-billing-panel',
        5: 'step-payment-panel'
    };

    const target = document.getElementById(panels[step]);
    if (target) {
        target.classList.add('active');
        if (step <= 3) syncEmailDisplays();
        if (step >= 4) syncDeliveryFromStep3();
        if (step >= 4) syncBillingAddressDisplay();
    }
    document.querySelector('.checkout-col')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
</script>
{% endblock footer_js %}