<?php
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- Template file uses local $args variable for field configuration

use Quicker\Utils\Helper;

defined( 'ABSPATH' ) || exit;
?>
<div class="quicker-sidecart-settings-layout">
	<div class="quicker-tabs-wrapper">
		<div class="quicker-vertical-tab-pane">
			<?php
				$tabs = array(
					array(
						'id'     => 'general-tab',
						'label'  => esc_html__( 'General', 'quicker' ),
						'active' => true,
					),
					array(
						'id'     => 'order-bump-tab',
						'label'  => esc_html__( 'Order Bump', 'quicker' ),
						'active' => false,
					),
					array(
						'id'     => 'style-tab',
						'label'  => esc_html__( 'Style', 'quicker' ),
						'active' => false,
					),
				);
				?>
			<ul class="quicker-tabs vertical">
				<?php foreach ( $tabs as $tab ) : ?>
					<li class="<?php echo esc_attr( $tab['active'] ? 'active' : '' ); ?>" data-tab="<?php echo esc_attr( $tab['id'] ); ?>"><?php echo esc_html( $tab['label'] ); ?></li>
				<?php endforeach; ?>
			</ul>
		</div>
		<div class="quicker-vertical-tab">
			<div class="quicker-tab-content active" id="general-tab">
				<?php
				$args = array(
					'label'   => esc_html__( 'Enable Side Cart/Mini-Cart', 'quicker' ),
					'id'      => 'enable_mini_cart',
					'checked' => $enable_mini_cart,
				);
				quicker_checkbox_field( $args );

				$args = array(
					'label'           => esc_html__( 'Side Cart Template', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'side_cart_style',
					'selected'        => $side_cart_style,
					'options'         => Helper::get_templates(),
				);
				quicker_select_field( $args );

				$args = array(
					'label'           => esc_html__( 'Display Coupon Form in Mini-Cart', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'show_coupon_form',
					'checked'         => $show_coupon_form,
					'disable'         => $disable,
				);
				quicker_checkbox_field( $args );

				?>
				<div class="quicker-section-divider <?php echo esc_attr( Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart' ); ?>">
					<h4 class="quicker-section-title"><?php esc_html_e( 'SideCart Icon', 'quicker' ); ?></h4>
				</div>
				<?php
				$args = array(
					'label'           => esc_html__( 'Icon Position', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_icon_position',
					'selected'        => $sc_icon_position,
					'options'         => array(
						'bottom' => __( 'Bottom', 'quicker' ),
						'middle' => __( 'Middle', 'quicker' ),
					),
				);
				quicker_select_field( $args );

				$icon_condition_class = Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart';
				$icon_options = array(
					'cart-1' => __( 'Cart Outline', 'quicker' ),
					'cart-2' => __( 'Cart Filled', 'quicker' ),
					'cart-3' => __( 'Shopping Bag Outline', 'quicker' ),
					'cart-4' => __( 'Shopping Bag', 'quicker' ),
					'cart-5' => __( 'Basket', 'quicker' ),
					'cart-6' => __( 'Delivery', 'quicker' ),
				);
				?>
				<div class="single-block <?php echo esc_attr( $icon_condition_class ); ?>">
					<div>
						<div class="form-label"><?php esc_html_e( 'Icon Type', 'quicker' ); ?></div>
					</div>
					<div class="input-section">
						<div class="quicker-icon-picker">
							<?php foreach ( $icon_options as $key => $label ) : ?>
								<div class="quicker-icon-option<?php echo $sc_icon_type === $key ? ' active' : ''; ?>" data-value="<?php echo esc_attr( $key ); ?>" title="<?php echo esc_attr( $label ); ?>">
									<div class="quicker-icon-svg"><?php echo Helper::get_cart_icon_svg( $key ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></div>
									<span class="quicker-icon-label"><?php echo esc_html( $label ); ?></span>
								</div>
							<?php endforeach; ?>
						</div>
						<input type="hidden" name="sc_icon_type" id="sc_icon_type" value="<?php echo esc_attr( $sc_icon_type ); ?>" />
					</div>
				</div>
				<?php

				$args = array(
					'label'           => esc_html__( 'Icon Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_icon_color',
					'field_type'      => 'text',
					'value'           => $sc_icon_color,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Bottom Offset (px)', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_icon_bottom',
					'field_type'      => 'number',
					'value'           => $sc_icon_bottom,
					'placeholder'     => '20',
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Background Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_icon_bg_color',
					'field_type'      => 'text',
					'value'           => $sc_icon_bg_color,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Border Radius (%)', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_icon_border_radius',
					'field_type'      => 'number',
					'value'           => $sc_icon_border_radius,
					'placeholder'     => '50',
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Count Badge Background', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_count_bg_color',
					'field_type'      => 'text',
					'value'           => $sc_count_bg_color,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Count Badge Text Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_count_text_color',
					'field_type'      => 'text',
					'value'           => $sc_count_text_color,
				);
				quicker_number_input_field( $args );
				?>
			</div>
			<div class="quicker-tab-content" id="order-bump-tab">
				<?php
				$args = array(
					'label'           => esc_html__( 'Enable Cart Upsells', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( array( $enable_mini_cart ) ) . ' enable_mini_cart',
					'id'              => 'enable_cart_upsell',
					'checked'         => $enable_cart_upsell,
				);
				quicker_checkbox_field( $args );

				$args = array(
					'label'           => esc_html__( 'Heading', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( array( $enable_mini_cart, $enable_cart_upsell ) ) . ' enable_mini_cart enable_cart_upsell',
					'id'              => 'upsell_heading',
					'value'           => $upsell_heading,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Suggested Products Type', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( array( $enable_mini_cart, $enable_cart_upsell ) ) . ' enable_mini_cart enable_cart_upsell',
					'id'              => 'bump_product_type',
					'selected'        => $bump_product_type,
					'options'         => array(
						'both'       => __( 'Both', 'quicker' ),
						'upsell'     => __( 'Up Sell', 'quicker' ),
						'cross_sell' => __( 'Cross Sell', 'quicker' ),
					),
					'disable'         => $disable,
				);
				quicker_select_field( $args );

				$args = array(
					'label'           => esc_html__( 'Mini-Cart Order Bump Template', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( array( $enable_mini_cart, $enable_cart_upsell ) ) . ' enable_mini_cart enable_cart_upsell',
					'id'              => 'cart_order_bump_style',
					'selected'        => $cart_order_bump_style,
					'options'         => Helper::get_templates( 5 ),
					'disable'         => $disable,
				);
				quicker_select_field( $args );

				$args = array(
					'label'           => esc_html__( 'Default Up-Sells Products', 'quicker' ),
					'id'              => 'up_sell_products',
					'condition_class' => Helper::instance()->d_none_class( array( $enable_mini_cart, $enable_cart_upsell ) ) . ' enable_mini_cart select2-multiple enable_cart_upsell',
					'selected'        => $up_sell_products,
					'doc'             => sprintf(
						/* translators: %s: link to WooCommerce documentation */
						esc_html__( 'Learn how to add Up-Sells and Cross-Sells: %s', 'quicker' ),
						'<a href="https://woocommerce.com/document/related-products-up-sells-and-cross-sells/" target="_blank" rel="noopener">' . esc_html__( 'here', 'quicker' ) . '</a>'
					),
					'options'         => Helper::get_products(),
					'select_type'     => 'multiple',
					'disable'         => $disable,
				);
				quicker_select_field( $args );
				?>
			</div>
			<div class="quicker-tab-content" id="style-tab">
				<div class="quicker-style-accordion">
					<div class="quicker-style-accordion-header" data-accordion="sc-general">
						<span><?php esc_html_e( 'General', 'quicker' ); ?></span>
						<svg class="quicker-accordion-arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
					</div>
					<div class="quicker-style-accordion-body" id="sc-general" style="display:none;">
				<?php
				$args = array(
					'label'           => esc_html__( 'Background Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_bg_color',
					'field_type'      => 'text',
					'value'           => $sc_bg_color,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Title Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_title_color',
					'field_type'      => 'text',
					'value'           => $sc_title_color,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Product Name Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_product_name_color',
					'field_type'      => 'text',
					'value'           => $sc_product_name_color,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );



				$args = array(
					'label'           => esc_html__( 'Cart Item Padding', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'disable'         => $disable,
					'fields'          => array(
						array(
							'id'    => 'sc_padding_top',
							'label' => esc_html__( 'Top', 'quicker' ),
							'value' => $sc_padding_top,
						),
						array(
							'id'    => 'sc_padding_bottom',
							'label' => esc_html__( 'Bottom', 'quicker' ),
							'value' => $sc_padding_bottom,
						),
						array(
							'id'    => 'sc_padding_left',
							'label' => esc_html__( 'Left', 'quicker' ),
							'value' => $sc_padding_left,
						),
						array(
							'id'    => 'sc_padding_right',
							'label' => esc_html__( 'Right', 'quicker' ),
							'value' => $sc_padding_right,
						),
					),
				);
				quicker_spacing_field( $args );


				$args = array(
					'label'           => esc_html__( 'Cart Item Border (px)', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'disable'         => $disable,
					'fields'          => array(
						array(
							'id'    => 'sc_item_border_top',
							'label' => esc_html__( 'Top', 'quicker' ),
							'value' => $sc_item_border_top,
						),
						array(
							'id'    => 'sc_item_border_bottom',
							'label' => esc_html__( 'Bottom', 'quicker' ),
							'value' => $sc_item_border_bottom,
						),
						array(
							'id'    => 'sc_item_border_left',
							'label' => esc_html__( 'Left', 'quicker' ),
							'value' => $sc_item_border_left,
						),
						array(
							'id'    => 'sc_item_border_right',
							'label' => esc_html__( 'Right', 'quicker' ),
							'value' => $sc_item_border_right,
						),
					),
				);
				quicker_spacing_field( $args );

				$args = array(
					'label'           => esc_html__( 'Cart Item Border Type', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_item_border_type',
					'selected'        => $sc_item_border_type,
					'options'         => array(
						'solid'  => __( 'Solid', 'quicker' ),
						'dashed' => __( 'Dashed', 'quicker' ),
						'dotted' => __( 'Dotted', 'quicker' ),
						'double' => __( 'Double', 'quicker' ),
						'none'   => __( 'None', 'quicker' ),
					),
					'disable'         => $disable,
				);
				quicker_select_field( $args );

				$args = array(
					'label'           => esc_html__( 'Cart Item Border Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_item_border_color',
					'field_type'      => 'text',
					'value'           => $sc_item_border_color,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Quantity Text Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_qty_color',
					'field_type'      => 'text',
					'value'           => $sc_qty_color,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Quantity Border (px)', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'disable'         => $disable,
					'fields'          => array(
						array(
							'id'    => 'sc_qty_border_top',
							'label' => esc_html__( 'Top', 'quicker' ),
							'value' => $sc_qty_border_top,
						),
						array(
							'id'    => 'sc_qty_border_bottom',
							'label' => esc_html__( 'Bottom', 'quicker' ),
							'value' => $sc_qty_border_bottom,
						),
						array(
							'id'    => 'sc_qty_border_left',
							'label' => esc_html__( 'Left', 'quicker' ),
							'value' => $sc_qty_border_left,
						),
						array(
							'id'    => 'sc_qty_border_right',
							'label' => esc_html__( 'Right', 'quicker' ),
							'value' => $sc_qty_border_right,
						),
					),
				);
				quicker_spacing_field( $args );

				$args = array(
					'label'           => esc_html__( 'Quantity Border Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_qty_border_color',
					'field_type'      => 'text',
					'value'           => $sc_qty_border_color,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Quantity +/- Button Background', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_qty_btn_bg',
					'field_type'      => 'text',
					'value'           => $sc_qty_btn_bg,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );
				?>
					</div>
				</div>
				<div class="quicker-style-accordion">
					<div class="quicker-style-accordion-header" data-accordion="sc-remove-icon">
						<span><?php esc_html_e( 'Remove Icon', 'quicker' ); ?></span>
						<svg class="quicker-accordion-arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
					</div>
					<div class="quicker-style-accordion-body" id="sc-remove-icon" style="display:none;">
				<?php
				$args = array(
					'label'           => esc_html__( 'Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_remove_icon_color',
					'field_type'      => 'text',
					'value'           => $sc_remove_icon_color,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Size (px)', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_remove_icon_size',
					'field_type'      => 'number',
					'value'           => $sc_remove_icon_size,
					'placeholder'     => '15',
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );
				?>
					</div>
				</div>
				<div class="quicker-style-accordion">
					<div class="quicker-style-accordion-header" data-accordion="sc-price-calc">
						<span><?php esc_html_e( 'Price Calculation', 'quicker' ); ?></span>
						<svg class="quicker-accordion-arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
					</div>
					<div class="quicker-style-accordion-body" id="sc-price-calc" style="display:none;">
				<?php
				$args = array(
					'label'           => esc_html__( 'Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_price_calc_color',
					'field_type'      => 'text',
					'value'           => $sc_price_calc_color,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Font Size (px)', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_price_calc_font_size',
					'field_type'      => 'number',
					'value'           => $sc_price_calc_font_size,
					'placeholder'     => '12',
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );
				?>
					</div>
				</div>
				<div class="quicker-style-accordion">
					<div class="quicker-style-accordion-header" data-accordion="sc-coupon-form">
						<span><?php esc_html_e( 'Coupon Form', 'quicker' ); ?></span>
						<svg class="quicker-accordion-arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
					</div>
					<div class="quicker-style-accordion-body" id="sc-coupon-form" style="display:none;">
				<?php
				$args = array(
					'label'           => esc_html__( 'Button Background Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_coupon_bg_color',
					'field_type'      => 'text',
					'value'           => $sc_coupon_bg_color,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Button Text Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_coupon_text_color',
					'field_type'      => 'text',
					'value'           => $sc_coupon_text_color,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Field Background Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_coupon_field_bg_color',
					'field_type'      => 'text',
					'value'           => $sc_coupon_field_bg_color,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Coupon Title Font Size (px)', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_coupon_title_font_size',
					'field_type'      => 'number',
					'value'           => $sc_coupon_title_font_size,
					'placeholder'     => '14',
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Coupon Title Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_coupon_title_color',
					'field_type'      => 'text',
					'value'           => $sc_coupon_title_color,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Coupon Border (px)', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'disable'         => $disable,
					'fields'          => array(
						array(
							'id'    => 'sc_coupon_border_top',
							'label' => esc_html__( 'Top', 'quicker' ),
							'value' => $sc_coupon_border_top,
						),
						array(
							'id'    => 'sc_coupon_border_bottom',
							'label' => esc_html__( 'Bottom', 'quicker' ),
							'value' => $sc_coupon_border_bottom,
						),
						array(
							'id'    => 'sc_coupon_border_left',
							'label' => esc_html__( 'Left', 'quicker' ),
							'value' => $sc_coupon_border_left,
						),
						array(
							'id'    => 'sc_coupon_border_right',
							'label' => esc_html__( 'Right', 'quicker' ),
							'value' => $sc_coupon_border_right,
						),
					),
				);
				quicker_spacing_field( $args );

				$args = array(
					'label'           => esc_html__( 'Coupon Border Type', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_coupon_border_type',
					'selected'        => $sc_coupon_border_type,
					'options'         => array(
						'solid'  => __( 'Solid', 'quicker' ),
						'dashed' => __( 'Dashed', 'quicker' ),
						'dotted' => __( 'Dotted', 'quicker' ),
						'double' => __( 'Double', 'quicker' ),
						'none'   => __( 'None', 'quicker' ),
					),
					'disable'         => $disable,
				);
				quicker_select_field( $args );

				$args = array(
					'label'           => esc_html__( 'Coupon Border Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_coupon_border_color',
					'field_type'      => 'text',
					'value'           => $sc_coupon_border_color,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );
				?>
					</div>
				</div>
				<div class="quicker-style-accordion">
					<div class="quicker-style-accordion-header" data-accordion="sc-subtotal">
						<span><?php esc_html_e( 'Subtotal', 'quicker' ); ?></span>
						<svg class="quicker-accordion-arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
					</div>
					<div class="quicker-style-accordion-body" id="sc-subtotal" style="display:none;">
				<?php
				$args = array(
					'label'           => esc_html__( 'Label Font Size (px)', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_subtotal_label_font_size',
					'field_type'      => 'number',
					'value'           => $sc_subtotal_label_font_size,
					'placeholder'     => '14',
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Label Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_subtotal_label_color',
					'field_type'      => 'text',
					'value'           => $sc_subtotal_label_color,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Price Font Size (px)', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_subtotal_price_font_size',
					'field_type'      => 'number',
					'value'           => $sc_subtotal_price_font_size,
					'placeholder'     => '14',
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Price Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_subtotal_price_color',
					'field_type'      => 'text',
					'value'           => $sc_subtotal_price_color,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );
				?>
					</div>
				</div>
				<div class="quicker-style-accordion">
					<div class="quicker-style-accordion-header" data-accordion="sc-cart-fees">
						<span><?php esc_html_e( 'Cart Fees', 'quicker' ); ?></span>
						<svg class="quicker-accordion-arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
					</div>
					<div class="quicker-style-accordion-body" id="sc-cart-fees" style="display:none;">
				<?php
				$args = array(
					'label'           => esc_html__( 'Label Font Size (px)', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_fees_label_font_size',
					'field_type'      => 'number',
					'value'           => $sc_fees_label_font_size,
					'placeholder'     => '14',
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Label Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_fees_label_color',
					'field_type'      => 'text',
					'value'           => $sc_fees_label_color,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Price Font Size (px)', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_fees_price_font_size',
					'field_type'      => 'number',
					'value'           => $sc_fees_price_font_size,
					'placeholder'     => '14',
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Price Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_fees_price_color',
					'field_type'      => 'text',
					'value'           => $sc_fees_price_color,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );
				?>
					</div>
				</div>
				<div class="quicker-style-accordion">
					<div class="quicker-style-accordion-header" data-accordion="sc-total">
						<span><?php esc_html_e( 'Total', 'quicker' ); ?></span>
						<svg class="quicker-accordion-arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
					</div>
					<div class="quicker-style-accordion-body" id="sc-total" style="display:none;">
				<?php
				$args = array(
					'label'           => esc_html__( 'Label Font Size (px)', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_total_label_font_size',
					'field_type'      => 'number',
					'value'           => $sc_total_label_font_size,
					'placeholder'     => '14',
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Label Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_total_label_color',
					'field_type'      => 'text',
					'value'           => $sc_total_label_color,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Price Font Size (px)', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_total_price_font_size',
					'field_type'      => 'number',
					'value'           => $sc_total_price_font_size,
					'placeholder'     => '14',
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Price Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_total_price_color',
					'field_type'      => 'text',
					'value'           => $sc_total_price_color,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Extra Text Font Size (px)', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_total_extra_text_font_size',
					'field_type'      => 'number',
					'value'           => $sc_total_extra_text_font_size,
					'placeholder'     => '13',
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Extra Text Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_total_extra_text_color',
					'field_type'      => 'text',
					'value'           => $sc_total_extra_text_color,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );
				?>
					</div>
				</div>
				<div class="quicker-style-accordion">
					<div class="quicker-style-accordion-header" data-accordion="sc-checkout-btn">
						<span><?php esc_html_e( 'Checkout Button', 'quicker' ); ?></span>
						<svg class="quicker-accordion-arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
					</div>
					<div class="quicker-style-accordion-body" id="sc-checkout-btn" style="display:none;">
				<?php
				$args = array(
					'label'           => esc_html__( 'Background Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_checkout_bg_color',
					'field_type'      => 'text',
					'value'           => $sc_checkout_bg_color,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Text Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_checkout_text_color',
					'field_type'      => 'text',
					'value'           => $sc_checkout_text_color,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Hover Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'sc_checkout_hover_color',
					'field_type'      => 'text',
					'value'           => $sc_checkout_hover_color,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );
				?>
					</div>
				</div>
				<div class="quicker-style-accordion">
					<div class="quicker-style-accordion-header" data-accordion="sc-order-bump">
						<span><?php esc_html_e( 'Order Bump', 'quicker' ); ?></span>
						<svg class="quicker-accordion-arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
					</div>
					<div class="quicker-style-accordion-body" id="sc-order-bump" style="display:none;">
				<?php
				$args = array(
					'label'           => esc_html__( 'Background Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'ob_bg_color',
					'field_type'      => 'text',
					'value'           => $ob_bg_color,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Header Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'ob_header_color',
					'field_type'      => 'text',
					'value'           => $ob_header_color,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Header Font Size (px)', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'ob_font_size',
					'field_type'      => 'number',
					'value'           => $ob_font_size,
					'placeholder'     => '14',
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Padding', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'disable'         => $disable,
					'fields'          => array(
						array(
							'id'    => 'ob_padding_top',
							'label' => esc_html__( 'Top', 'quicker' ),
							'value' => $ob_padding_top,
						),
						array(
							'id'    => 'ob_padding_bottom',
							'label' => esc_html__( 'Bottom', 'quicker' ),
							'value' => $ob_padding_bottom,
						),
						array(
							'id'    => 'ob_padding_left',
							'label' => esc_html__( 'Left', 'quicker' ),
							'value' => $ob_padding_left,
						),
						array(
							'id'    => 'ob_padding_right',
							'label' => esc_html__( 'Right', 'quicker' ),
							'value' => $ob_padding_right,
						),
					),
				);
				quicker_spacing_field( $args );

				$args = array(
					'label'           => esc_html__( 'Arrow Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'ob_arrow_color',
					'field_type'      => 'text',
					'value'           => $ob_arrow_color,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Arrow Size (px)', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'ob_arrow_size',
					'field_type'      => 'number',
					'value'           => $ob_arrow_size,
					'placeholder'     => '20',
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );
				?>
					</div>
				</div>
				<div class="quicker-style-accordion">
					<div class="quicker-style-accordion-header" data-accordion="sc-order-bump-item">
						<span><?php esc_html_e( 'Order Bump Item', 'quicker' ); ?></span>
						<svg class="quicker-accordion-arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
					</div>
					<div class="quicker-style-accordion-body" id="sc-order-bump-item" style="display:none;">
					<?php
					?>
					<div class="quicker-section-divider <?php echo esc_attr( Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart' ); ?>" style="margin-top:0;border-top:none;padding-top:0;">
						<h4 class="quicker-section-title"><?php esc_html_e( 'Product Name', 'quicker' ); ?></h4>
					</div>
				<?php
				$args = array(
					'label'           => esc_html__( 'Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'ob_name_color',
					'field_type'      => 'text',
					'value'           => $ob_name_color,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Font Size (px)', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'ob_name_font_size',
					'field_type'      => 'number',
					'value'           => $ob_name_font_size,
					'placeholder'     => '12',
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Margin (px)', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'disable'         => $disable,
					'fields'          => array(
						array(
							'id'    => 'ob_name_margin_top',
							'label' => esc_html__( 'Top', 'quicker' ),
							'value' => $ob_name_margin_top,
						),
						array(
							'id'    => 'ob_name_margin_bottom',
							'label' => esc_html__( 'Bottom', 'quicker' ),
							'value' => $ob_name_margin_bottom,
						),
					),
				);
				quicker_spacing_field( $args );
				?>
					<div class="quicker-section-divider <?php echo esc_attr( Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart' ); ?>">
						<h4 class="quicker-section-title"><?php esc_html_e( 'Product Price', 'quicker' ); ?></h4>
					</div>
				<?php
				$args = array(
					'label'           => esc_html__( 'Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'ob_price_color',
					'field_type'      => 'text',
					'value'           => $ob_price_color,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Font Size (px)', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'ob_price_font_size',
					'field_type'      => 'number',
					'value'           => $ob_price_font_size,
					'placeholder'     => '12',
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Margin (px)', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'disable'         => $disable,
					'fields'          => array(
						array(
							'id'    => 'ob_price_margin_top',
							'label' => esc_html__( 'Top', 'quicker' ),
							'value' => $ob_price_margin_top,
						),
						array(
							'id'    => 'ob_price_margin_bottom',
							'label' => esc_html__( 'Bottom', 'quicker' ),
							'value' => $ob_price_margin_bottom,
						),
					),
				);
				quicker_spacing_field( $args );
				?>
					<div class="quicker-section-divider <?php echo esc_attr( Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart' ); ?>">
						<h4 class="quicker-section-title"><?php esc_html_e( 'Cart Icon', 'quicker' ); ?></h4>
					</div>
				<?php
				$args = array(
					'label'           => esc_html__( 'Size (px)', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'ob_icon_size',
					'field_type'      => 'number',
					'value'           => $ob_icon_size,
					'placeholder'     => '18',
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );

				$args = array(
					'label'           => esc_html__( 'Color', 'quicker' ),
					'condition_class' => Helper::instance()->d_none_class( $enable_mini_cart ) . ' enable_mini_cart',
					'id'              => 'ob_icon_color',
					'field_type'      => 'text',
					'value'           => $ob_icon_color,
					'disable'         => $disable,
				);
				quicker_number_input_field( $args );
				?>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Mini-Cart Preview -->
	<div class="quicker-minicart-preview<?php echo ( 'yes' === $enable_cart_upsell && 1 == $cart_order_bump_style ) ? ' preview-sidebar-active' : ''; ?>" <?php echo $disable ? 'style="display:none;"' : ''; ?>>
		<div class="quicker-minicart-preview-header">
			<span><?php esc_html_e( 'Mini-Cart Preview', 'quicker' ); ?></span>
			<button type="button" class="quicker-reset-styles-btn" id="quicker-reset-styles"><?php esc_html_e( 'Reset', 'quicker' ); ?></button>
		</div>
		<div class="quicker-minicart-preview-body<?php echo ( 'yes' === $enable_cart_upsell && 1 == $cart_order_bump_style ) ? ' preview-layout-sidebar' : ''; ?>">
			<?php
			$bump_heading = ! empty( $upsell_heading ) ? $upsell_heading : __( 'You may choose', 'quicker' );
			$bump_active  = ( 'yes' === $enable_cart_upsell ) ? intval( $cart_order_bump_style ) : 0;
			?>
			<!-- Style 1: Sidebar -->
			<div class="preview-bump-style preview-bump-style-1" style="<?php echo 1 === $bump_active ? '' : 'display:none;'; ?>">
				<h4 class="preview-bump-title"><?php echo esc_html( $bump_heading ); ?></h4>
				<div class="preview-bump-items">
					<div class="preview-bump-item">
						<div class="preview-bump-thumb">
							<svg viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="65" height="65" rx="6" fill="#E3F2FD"/><path d="M20 42V24a2 2 0 012-2h21a2 2 0 012 2v18a2 2 0 01-2 2H22a2 2 0 01-2-2z" stroke="#64B5F6" stroke-width="1.5"/><circle cx="28" cy="30" r="3" fill="#64B5F6"/><path d="M20 38l7-6 5 4 6-5 7 7" stroke="#64B5F6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
						</div>
						<div class="preview-bump-name"><?php esc_html_e( 'T-Shirt with Logo', 'quicker' ); ?></div>
						<div class="preview-bump-price">$18.00</div>
						<span class="preview-bump-cart-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#046bd2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6"/></svg></span>
					</div>
					<div class="preview-bump-item">
						<div class="preview-bump-thumb">
							<svg viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="65" height="65" rx="6" fill="#FFF3E0"/><path d="M20 42V24a2 2 0 012-2h21a2 2 0 012 2v18a2 2 0 01-2 2H22a2 2 0 01-2-2z" stroke="#FFAB91" stroke-width="1.5"/><circle cx="28" cy="30" r="3" fill="#FFAB91"/><path d="M20 38l7-6 5 4 6-5 7 7" stroke="#FFAB91" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
						</div>
						<div class="preview-bump-name"><?php esc_html_e( 'Beanie with Logo', 'quicker' ); ?></div>
						<div class="preview-bump-price"><del>$20.00</del> $18.00</div>
						<span class="preview-bump-cart-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#046bd2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6"/></svg></span>
					</div>
					<div class="preview-bump-item">
						<div class="preview-bump-thumb">
							<svg viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="65" height="65" rx="6" fill="#E8F5E9"/><path d="M20 42V24a2 2 0 012-2h21a2 2 0 012 2v18a2 2 0 01-2 2H22a2 2 0 01-2-2z" stroke="#81C784" stroke-width="1.5"/><circle cx="28" cy="30" r="3" fill="#81C784"/><path d="M20 38l7-6 5 4 6-5 7 7" stroke="#81C784" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
						</div>
						<div class="preview-bump-name"><?php esc_html_e( 'Logo Collection', 'quicker' ); ?></div>
						<div class="preview-bump-price">$18.00 - $45.00</div>
						<span class="preview-bump-cart-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#046bd2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6"/></svg></span>
					</div>
				</div>
			</div>

			<div class="preview-cart-details">
				<h3 class="preview-cart-title"><?php esc_html_e( 'Review Your Cart', 'quicker' ); ?></h3>

				<!-- Dummy Product 1 -->
				<div class="preview-cart-row">
					<div class="preview-cart-item-img">
						<span class="preview-remove-icon">
							<svg width="15px" height="15px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.5" cx="12" cy="12" r="10" stroke="#1C274C" stroke-width="1.5"/><path d="M15 12H9" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/></svg>
						</span>
						<div class="preview-product-thumb">
							<svg viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="65" height="65" rx="6" fill="#F0F4FF"/><path d="M20 42V24a2 2 0 012-2h21a2 2 0 012 2v18a2 2 0 01-2 2H22a2 2 0 01-2-2z" stroke="#B0BEC5" stroke-width="1.5"/><circle cx="28" cy="30" r="3" fill="#90CAF9"/><path d="M20 38l7-6 5 4 6-5 7 7" stroke="#90CAF9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
						</div>
					</div>
					<div class="preview-cart-item-details">
						<div class="preview-product-name"><?php esc_html_e( 'Classic T-Shirt', 'quicker' ); ?></div>
						<div class="preview-mini-qty">
							<span class="preview-qty-handle">-</span>
							<input type="text" class="preview-qty" value="2" readonly />
							<span class="preview-qty-handle">+</span>
						</div>
					</div>
					<div class="preview-cart-item-subtotal">
						<div class="preview-price-calc">$25.00 * 2</div>
						<div class="preview-price-total">$50.00</div>
					</div>
				</div>

				<!-- Dummy Product 2 -->
				<div class="preview-cart-row">
					<div class="preview-cart-item-img">
						<span class="preview-remove-icon">
							<svg width="15px" height="15px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.5" cx="12" cy="12" r="10" stroke="#1C274C" stroke-width="1.5"/><path d="M15 12H9" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/></svg>
						</span>
						<div class="preview-product-thumb">
							<svg viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="65" height="65" rx="6" fill="#FFF3E0"/><path d="M20 42V24a2 2 0 012-2h21a2 2 0 012 2v18a2 2 0 01-2 2H22a2 2 0 01-2-2z" stroke="#FFAB91" stroke-width="1.5"/><circle cx="28" cy="30" r="3" fill="#FFAB91"/><path d="M20 38l7-6 5 4 6-5 7 7" stroke="#FFAB91" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
						</div>
					</div>
					<div class="preview-cart-item-details">
						<div class="preview-product-name"><?php esc_html_e( 'Running Shoes', 'quicker' ); ?></div>
						<div class="preview-mini-qty">
							<span class="preview-qty-handle">-</span>
							<input type="text" class="preview-qty" value="1" readonly />
							<span class="preview-qty-handle">+</span>
						</div>
					</div>
					<div class="preview-cart-item-subtotal">
						<div class="preview-price-calc">$89.99 * 1</div>
						<div class="preview-price-total">$89.99</div>
					</div>
				</div>

				<!-- Dummy Product 3 -->
				<div class="preview-cart-row">
					<div class="preview-cart-item-img">
						<span class="preview-remove-icon">
							<svg width="15px" height="15px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.5" cx="12" cy="12" r="10" stroke="#1C274C" stroke-width="1.5"/><path d="M15 12H9" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/></svg>
						</span>
						<div class="preview-product-thumb">
							<svg viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="65" height="65" rx="6" fill="#E8F5E9"/><path d="M20 42V24a2 2 0 012-2h21a2 2 0 012 2v18a2 2 0 01-2 2H22a2 2 0 01-2-2z" stroke="#81C784" stroke-width="1.5"/><circle cx="28" cy="30" r="3" fill="#81C784"/><path d="M20 38l7-6 5 4 6-5 7 7" stroke="#81C784" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
						</div>
					</div>
					<div class="preview-cart-item-details">
						<div class="preview-product-name"><?php esc_html_e( 'Wireless Headphones', 'quicker' ); ?></div>
						<div class="preview-mini-qty">
							<span class="preview-qty-handle">-</span>
							<input type="text" class="preview-qty" value="1" readonly />
							<span class="preview-qty-handle">+</span>
						</div>
					</div>
					<div class="preview-cart-item-subtotal">
						<div class="preview-price-calc">$45.00 * 1</div>
						<div class="preview-price-total">$45.00</div>
					</div>
				</div>

				<!-- Coupon Form -->
				<div class="preview-coupon-wrapper" style="<?php echo esc_attr( $show_coupon_form === 'yes' ? '' : 'display:none' ); ?>">
					<p class="preview-coupon-title"><?php esc_html_e( 'Have a coupon?', 'quicker' ); ?></p>
					<div class="preview-coupon-form">
						<input type="text" class="preview-coupon-field" placeholder="<?php esc_attr_e( 'Coupon code', 'quicker' ); ?>" readonly />
						<button type="button" class="preview-coupon-btn"><?php esc_html_e( 'Apply', 'quicker' ); ?></button>
					</div>
				</div>

				<!-- Style 2: Vertical carousel (above footer) -->
				<div class="preview-bump-style preview-bump-style-2" style="<?php echo 2 === $bump_active ? '' : 'display:none;'; ?>">
					<h4 class="preview-bump-title"><?php echo esc_html( $bump_heading ); ?></h4>
					<div class="preview-bump-carousel-wrapper">
						<span class="preview-bump-arrow preview-bump-arrow-left"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#046bd2" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg></span>
						<div class="preview-bump-carousel">
							<div class="preview-bump-slide"><div class="preview-bump-slide-img"><svg viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="65" height="65" rx="6" fill="#E3F2FD"/><path d="M20 42V24a2 2 0 012-2h21a2 2 0 012 2v18a2 2 0 01-2 2H22a2 2 0 01-2-2z" stroke="#64B5F6" stroke-width="1.5"/><circle cx="28" cy="30" r="3" fill="#64B5F6"/><path d="M20 38l7-6 5 4 6-5 7 7" stroke="#64B5F6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div><div class="preview-bump-slide-title"><?php esc_html_e( 'T-Shirt', 'quicker' ); ?></div><div class="preview-bump-slide-price">$18.00</div><span class="preview-bump-cart-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#046bd2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6"/></svg></span></div>
							<div class="preview-bump-slide"><div class="preview-bump-slide-img"><svg viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="65" height="65" rx="6" fill="#FFF3E0"/><path d="M20 42V24a2 2 0 012-2h21a2 2 0 012 2v18a2 2 0 01-2 2H22a2 2 0 01-2-2z" stroke="#FFAB91" stroke-width="1.5"/><circle cx="28" cy="30" r="3" fill="#FFAB91"/><path d="M20 38l7-6 5 4 6-5 7 7" stroke="#FFAB91" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div><div class="preview-bump-slide-title"><?php esc_html_e( 'Beanie', 'quicker' ); ?></div><div class="preview-bump-slide-price">$18.00</div><span class="preview-bump-cart-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#046bd2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6"/></svg></span></div>
						</div>
						<span class="preview-bump-arrow preview-bump-arrow-right"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#046bd2" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></span>
					</div>
				</div>

				<!-- Style 3: Horizontal card carousel (above footer) -->
				<div class="preview-bump-style preview-bump-style-3" style="<?php echo 3 === $bump_active ? '' : 'display:none;'; ?>">
					<h4 class="preview-bump-title"><?php echo esc_html( $bump_heading ); ?></h4>
					<div class="preview-bump-hslider">
						<span class="preview-bump-arrow preview-bump-arrow-left"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#046bd2" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg></span>
						<div class="preview-bump-hcard"><div class="preview-bump-hcard-img"><svg viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="50" height="50" rx="6" fill="#FFF3E0"/><circle cx="22" cy="24" r="3" fill="#FFAB91"/><path d="M15 34l5-5 4 3 5-4 6 6" stroke="#FFAB91" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div><div class="preview-bump-hcard-content"><div class="preview-bump-hcard-title"><?php esc_html_e( 'Beanie with Logo', 'quicker' ); ?></div><div class="preview-bump-hcard-price"><del>$20.00</del> $18.00</div><span class="preview-bump-cart-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#046bd2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6"/></svg></span></div></div>
						<span class="preview-bump-arrow preview-bump-arrow-right"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#046bd2" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></span>
					</div>
				</div>

				<!-- Footer Section -->
				<div class="preview-subtotal-content">
					<div class="preview-cart-block">
						<div class="preview-sub-total">
							<strong><?php esc_html_e( 'Subtotal', 'quicker' ); ?></strong>
							<span>$184.99</span>
						</div>
						<div class="preview-fees-item">
							<p class="preview-fee-row">
								<span class="preview-fee-label"><?php esc_html_e( 'Shipping', 'quicker' ); ?></span>
								<span class="preview-fee-amount">$5.00</span>
							</p>
						</div>
						<div class="preview-side-cart-extra">
							<div class="preview-extra-total">
								<div>
									<strong><?php esc_html_e( 'Total', 'quicker' ); ?></strong>
									<span class="preview-extra-text"><?php esc_html_e( '(including all charges)', 'quicker' ); ?></span>
								</div>
								<b>$189.99</b>
							</div>
						</div>
					</div>
					<div class="preview-shopping-button">
						<button class="preview-continue-shopping" type="button"><?php esc_html_e( 'Continue Shopping', 'quicker' ); ?></button>
						<button class="preview-checkout" type="button"><?php esc_html_e( 'Checkout', 'quicker' ); ?></button>
					</div>

					<!-- Style 4: Vertical carousel (below buttons) -->
					<div class="preview-bump-style preview-bump-style-4" style="<?php echo 4 === $bump_active ? '' : 'display:none;'; ?>">
						<h4 class="preview-bump-title"><?php echo esc_html( $bump_heading ); ?></h4>
						<div class="preview-bump-carousel-wrapper">
							<span class="preview-bump-arrow preview-bump-arrow-left"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#046bd2" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg></span>
							<div class="preview-bump-carousel">
								<div class="preview-bump-slide"><div class="preview-bump-slide-img"><svg viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="65" height="65" rx="6" fill="#E3F2FD"/><path d="M20 42V24a2 2 0 012-2h21a2 2 0 012 2v18a2 2 0 01-2 2H22a2 2 0 01-2-2z" stroke="#64B5F6" stroke-width="1.5"/><circle cx="28" cy="30" r="3" fill="#64B5F6"/><path d="M20 38l7-6 5 4 6-5 7 7" stroke="#64B5F6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div><div class="preview-bump-slide-title"><?php esc_html_e( 'T-Shirt', 'quicker' ); ?></div><div class="preview-bump-slide-price">$18.00</div><span class="preview-bump-cart-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#046bd2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6"/></svg></span></div>
								<div class="preview-bump-slide"><div class="preview-bump-slide-img"><svg viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="65" height="65" rx="6" fill="#FFF3E0"/><path d="M20 42V24a2 2 0 012-2h21a2 2 0 012 2v18a2 2 0 01-2 2H22a2 2 0 01-2-2z" stroke="#FFAB91" stroke-width="1.5"/><circle cx="28" cy="30" r="3" fill="#FFAB91"/><path d="M20 38l7-6 5 4 6-5 7 7" stroke="#FFAB91" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div><div class="preview-bump-slide-title"><?php esc_html_e( 'Beanie', 'quicker' ); ?></div><div class="preview-bump-slide-price">$18.00</div><span class="preview-bump-cart-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#046bd2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6"/></svg></span></div>
								<div class="preview-bump-slide"><div class="preview-bump-slide-img"><svg viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="65" height="65" rx="6" fill="#E8F5E9"/><path d="M20 42V24a2 2 0 012-2h21a2 2 0 012 2v18a2 2 0 01-2 2H22a2 2 0 01-2-2z" stroke="#81C784" stroke-width="1.5"/><circle cx="28" cy="30" r="3" fill="#81C784"/><path d="M20 38l7-6 5 4 6-5 7 7" stroke="#81C784" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div><div class="preview-bump-slide-title"><?php esc_html_e( 'Collection', 'quicker' ); ?></div><div class="preview-bump-slide-price">$18.00</div><span class="preview-bump-cart-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#046bd2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6"/></svg></span></div>
							</div>
							<span class="preview-bump-arrow preview-bump-arrow-right"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#046bd2" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></span>
						</div>
					</div>

					<!-- Style 5: Horizontal card carousel (below buttons) -->
					<div class="preview-bump-style preview-bump-style-5" style="<?php echo 5 === $bump_active ? '' : 'display:none;'; ?>">
						<h4 class="preview-bump-title"><?php echo esc_html( $bump_heading ); ?></h4>
						<div class="preview-bump-hslider">
							<span class="preview-bump-arrow preview-bump-arrow-left"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#046bd2" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg></span>
							<div class="preview-bump-hcard"><div class="preview-bump-hcard-img"><svg viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="50" height="50" rx="6" fill="#FFF3E0"/><circle cx="22" cy="24" r="3" fill="#FFAB91"/><path d="M15 34l5-5 4 3 5-4 6 6" stroke="#FFAB91" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div><div class="preview-bump-hcard-content"><div class="preview-bump-hcard-title"><?php esc_html_e( 'Beanie with Logo', 'quicker' ); ?></div><div class="preview-bump-hcard-price"><del>$20.00</del> $18.00</div><span class="preview-bump-cart-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#046bd2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6"/></svg></span></div></div>
							<span class="preview-bump-arrow preview-bump-arrow-right"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#046bd2" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>