
<div class="offcanvas offcanvas-end border-0 data-theme-colors layout-customizer" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
    <div class="flex-wrap align-items-center bg-primary bg-gradient p-3 offcanvas-header">
        <h5 class="m-0 me-2 text-white" id="offcanvasRightLabel">Theme Customization</h5>
        <button type="button" class="btn-close btn-close-white ms-auto" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        <p class="mb-0 text-white-50">it's time to style according to your choice ..!</p>
    </div>
    <div class="offcanvas-body p-0">
        <div data-simplebar class="h-100">
            <div class="p-4">
                <h6 class="mb-0 fw-semibold text-uppercase">Layout</h6>
                <p class="text-muted">Choose your layout</p>

                <div class="row gy-3">
                    <div class="col-6">
                        <div class="border">
                            <input id="customizer-layout01" name="data-layout" type="radio" value="vertical" class="form-check-input" checked>
                            <label class="form-check-label p-0 avatar-3xl w-100" for="customizer-layout01">
                                <span class="d-flex h-100 ">
                                    <span class="flex-shrink-0">
                                        <span class="bg-light-subtle d-flex h-100 flex-column gap-1 p-1">
                                            <span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
                                        </span>
                                    </span>
                                    <span class="flex-grow-1">
                                        <span class="d-flex h-100 flex-column">
                                            <span class="bg-light-subtle d-block p-1"></span>
                                            <span class="d-block h-100 bg-primary-subtle m-2"></span>
                                            <span class="bg-light-subtle d-block p-1 mt-auto"></span>
                                        </span>
                                    </span>
                                </span>
                            </label>
                        </div>
                        <h5 class="fs-13 text-center mt-2">Vertical</h5>
                    </div>
                    <div class="col-6">
                       <div class="border">
                            <input id="customizer-layout02" name="data-layout" type="radio" value="horizontal" class="form-check-input">
                            <label class="form-check-label p-0 avatar-3xl w-100" for="customizer-layout02">
                                <span class="d-flex h-100 flex-column ">
                                    <span class="bg-light-subtle d-flex p-1 gap-1 align-items-center">
                                        <span class="d-block p-1 bg-primary-subtle rounded me-1"></span>
                                        <span class="d-block p-1 pb-0 px-2 bg-primary-subtle ms-auto"></span>
                                        <span class="d-block p-1 pb-0 px-2 bg-primary-subtle"></span>
                                    </span>
                                    <span class="bg-light-subtle d-block p-1 border-primary-subtle border-top"></span>
                                    <span class="d-block h-100 bg-primary-subtle my-2"> </span>
                                    <span class="bg-light-subtle d-block p-1 mt-auto"></span>
                                </span>
                            </label>
                        </div>
                        <h5 class="fs-13 text-center mt-2">Horizontal</h5>
                    </div>
                    <div class="col-6">
                       <div class="border">
                            <input id="customizer-layout03" name="data-layout" type="radio" value="semibox" class="form-check-input">
                            <label class="form-check-label p-0 avatar-3xl w-100" for="customizer-layout03">
                                <span class="d-flex gap-1 h-100 p-1">
                                    <span class="flex-shrink-0">
                                        <span class="bg-light-subtle d-flex h-100 flex-column gap-1 p-1">
                                            <span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
                                        </span>
                                    </span>
                                    <span class="flex-grow-1">
                                        <span class="d-flex h-100 flex-column">
                                            <span class="bg-light-subtle d-block p-1"></span>
                                            <span class="d-block h-100 bg-primary-subtle my-1"> </span>
                                            <span class="bg-light-subtle d-block p-1 mt-auto"></span>
                                        </span>
                                    </span>
                                </span>
                            </label>
                        </div>
                        <h5 class="fs-13 text-center mt-2">Semi Box</h5>
                    </div>
                    <!-- end col -->
                </div>

                <h6 class="my-4 fw-semibold text-uppercase">Content Width:</h6>

                <div class="row gy-3">
                    <div class="col-6">
                       <div class="border">
                            <input id="defaultContent" name="data-content-width" type="radio" value="default" class="form-check-input" checked>
                            <label class="form-check-label p-0 avatar-3xl w-100" for="defaultContent">
                                <span class="d-flex h-100 ">
                                    <span class="flex-shrink-0">
                                        <span class="bg-light-subtle d-flex h-100 flex-column gap-1 p-1">
                                            <span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
                                        </span>
                                    </span>
                                    <span class="flex-grow-1">
                                        <span class="d-flex h-100 flex-column">
                                            <span class="bg-light-subtle d-block p-1"></span>
                                            <span class="d-block h-100 bg-primary-subtle m-2"> </span>
                                            <span class="bg-light-subtle d-block p-1 mt-auto"></span>
                                        </span>
                                    </span>
                                </span>
                            </label>
                        </div>
                        <h5 class="fs-13 text-center mt-2">Default</h5>
                    </div>
                    <div class="col-6">
                       <div class="border">
                            <input id="boxLayout" name="data-content-width" type="radio" value="box" class="form-check-input">
                            <label class="form-check-label p-0 avatar-3xl w-100" for="boxLayout">
                                <span class="d-flex h-100 px-3">
                                    <span class="flex-shrink-0">
                                        <span class="bg-light-subtle d-flex h-100 flex-column gap-1 p-1">
                                            <span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
                                        </span>
                                    </span>
                                    <span class="flex-grow-1">
                                        <span class="d-flex h-100 flex-column">
                                            <span class="bg-light-subtle d-block p-1"></span>
                                            <span class="d-block h-100 bg-primary-subtle m-1"> </span>
                                            <span class="bg-light-subtle d-block p-1 mt-auto"></span>
                                        </span>
                                    </span>
                                </span>
                            </label>
                        </div>
                        <h5 class="fs-13 text-center mt-2">Box</h5>
                    </div>
                    <!-- end col -->
                </div>

                <h6 class="my-4 fw-semibold text-uppercase">Layout Direction:</h6>

                <div class="row gy-3">
                    <div class="col-6">
                       <div class="border">
                            <input id="rtlMode" name="dir" type="radio" value="rtl" class="form-check-input">
                            <label class="form-check-label p-0 avatar-3xl w-100" for="rtlMode">
                                <span class="d-flex h-100 ">
                                    <span class="flex-shrink-0">
                                        <span class="bg-light-subtle d-flex h-100 flex-column gap-1 p-1">
                                            <span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
                                        </span>
                                    </span>
                                    <span class="flex-grow-1">
                                        <span class="d-flex h-100 flex-column">
                                            <span class="bg-light-subtle d-block p-1"></span>
                                            <span class="d-block h-100 bg-primary-subtle m-2"> </span>
                                            <span class="bg-light-subtle d-block p-1 mt-auto"></span>
                                        </span>
                                    </span>
                                </span>
                            </label>
                        </div>
                        <h5 class="fs-13 text-center mt-2">RTL</h5>
                    </div>
                    <div class="col-6">
                       <div class="border">
                            <input id="ltrMode" name="dir" type="radio" value="ltr" class="form-check-input" checked>
                            <label class="form-check-label p-0 avatar-3xl w-100" for="ltrMode">
                                <span class="d-flex h-100 ">
                                    <span class="flex-shrink-0 order-1">
                                        <span class="bg-light-subtle d-flex h-100 flex-column gap-1 p-1">
                                            <span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
                                        </span>
                                    </span>
                                    <span class="flex-grow-1">
                                        <span class="d-flex h-100 flex-column">
                                            <span class="bg-light-subtle d-block p-1"></span>
                                            <span class="d-block h-100 bg-primary-subtle m-2"> </span>
                                            <span class="bg-light-subtle d-block p-1 mt-auto"></span>
                                        </span>
                                    </span>
                                </span>
                            </label>
                        </div>
                        <h5 class="fs-13 text-center mt-2">LTR</h5>
                    </div>
                    <!-- end col -->
                </div>

                <h6 class="my-4 fw-semibold text-uppercase">Layout Mode:</h6>

                <div class="row gy-3">
                    <div class="col-6">
                        <div> 
                            <input id="layout-light" name="data-bs-theme" type="radio" value="light" class="form-check-input" checked>
                            <label class="form-check-label p-0 avatar-3xl w-100" for="layout-light">
                                <span class="d-flex h-100 ">
                                    <span class="flex-shrink-0">
                                        <span class="bg-light-subtle d-flex h-100 flex-column gap-1 p-1">
                                            <span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
                                        </span>
                                    </span>
                                    <span class="flex-grow-1">
                                        <span class="d-flex h-100 flex-column">
                                            <span class="bg-light-subtle d-block p-1"></span>
                                            <span class="d-block h-100 bg-primary-subtle m-2"> </span>
                                            <span class="bg-light-subtle d-block p-1 mt-auto"></span>
                                        </span>
                                    </span>
                                </span>
                            </label>
                        </div>
                        <h5 class="fs-13 text-center mt-2">Light</h5>
                    </div>
                    <div class="col-6">
                       <div class="border">
                            <input id="layout-dark" name="data-bs-theme" type="radio" value="dark" class="form-check-input">
                            <label class="form-check-label p-0 avatar-3xl w-100 bg-dark" for="layout-dark">
                                <span class="d-flex h-100">
                                    <span class="flex-shrink-0">
                                        <span class="bg-white bg-opacity-10 d-flex h-100 flex-column gap-1 p-1">
                                            <span class="d-block p-1 px-2 bg-white bg-opacity-10 rounded mb-2"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-white bg-opacity-10"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-white bg-opacity-10"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-white bg-opacity-10"></span>
                                        </span>
                                    </span>
                                    <span class="flex-grow-1">
                                        <span class="d-flex h-100 flex-column">
                                            <span class="bg-white bg-opacity-10 d-block p-1"></span>
                                            <span class="bg-white bg-opacity-10 d-block p-1 mt-auto"></span>
                                        </span>
                                    </span>
                                </span>
                            </label>
                        </div>
                        <h5 class="fs-13 text-center mt-2">Dark</h5>
                    </div>
                    <div class="col-6">
                       <div class="border">
                            <input id="automode" name="data-bs-theme" type="radio" value="auto" class="form-check-input">
                            <label class="form-check-label p-0 avatar-3xl w-100" for="automode">
                                <span class="d-flex h-100 ">
                                    <span class="flex-shrink-0">
                                        <span class="bg-light-subtle d-flex h-100 flex-column gap-1 p-1">
                                            <span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
                                        </span>
                                    </span>
                                    <span class="flex-grow-1">
                                        <span class="d-flex h-100 flex-column">
                                            <span class="bg-light-subtle d-block p-1"></span>
                                            <span class="d-block h-100 bg-primary-subtle m-2"> </span>
                                            <span class="bg-light-subtle d-block p-1 mt-auto"></span>
                                        </span>
                                    </span>
                                </span>
                            </label>
                        </div>
                        <h5 class="fs-13 text-center mt-2">System</h5>
                    </div>
                    <!-- end col -->
                </div>

                <h6 class="my-4 fw-semibold text-uppercase">Sidebar Size:</h6>

                <div class="row gy-3">
                    <div class="col-6">
                       <div class="border">
                            <input id="sidebar-default" name="data-sidebar" type="radio" value="default" class="form-check-input" checked>
                            <label class="form-check-label p-0 avatar-3xl w-100" for="sidebar-default">
                                <span class="d-flex h-100 ">
                                    <span class="flex-shrink-0">
                                        <span class="bg-light-subtle d-flex h-100 flex-column gap-1 p-1">
                                            <span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
                                        </span>
                                    </span>
                                    <span class="flex-grow-1">
                                        <span class="d-flex h-100 flex-column">
                                            <span class="bg-light-subtle d-block p-1"></span>
                                            <span class="d-block h-100 bg-primary-subtle m-2"> </span>
                                            <span class="bg-light-subtle d-block p-1 mt-auto"></span>
                                        </span>
                                    </span>
                                </span>
                            </label>
                        </div>
                        <h5 class="fs-13 text-center mt-2">Default</h5>
                    </div>
                    <div class="col-6">
                       <div class="border">
                            <input id="sidebar-icon" name="data-sidebar" type="radio" value="icon" class="form-check-input">
                            <label class="form-check-label p-0 avatar-3xl w-100" for="sidebar-icon">
                                <span class="d-flex h-100 ">
                                    <span class="flex-shrink-0">
                                        <span class="bg-light-subtle d-flex h-100 flex-column gap-1 p-1">
                                            <span class="d-block p-1 px-1 bg-primary-subtle rounded mb-2"></span>
                                            <span class="d-block p-1 px-1 pb-0 bg-primary-subtle"></span>
                                            <span class="d-block p-1 px-1 pb-0 bg-primary-subtle"></span>
                                            <span class="d-block p-1 px-1 pb-0 bg-primary-subtle"></span>
                                        </span>
                                    </span>
                                    <span class="flex-grow-1">
                                        <span class="d-flex h-100 flex-column">
                                            <span class="bg-light-subtle d-block p-1"></span>
                                            <span class="d-block h-100 bg-primary-subtle m-2"> </span>
                                            <span class="bg-light-subtle d-block p-1 mt-auto"></span>
                                        </span>
                                    </span>
                                </span>
                            </label>
                        </div>
                        <h5 class="fs-13 text-center mt-2">Icon</h5>
                    </div>
                    <!-- end col -->
                </div>

                <h6 class="my-4 fw-semibold text-uppercase">Sidebar Color:</h6>

                <div class="row gy-3">
                    <div class="col-6">
                       <div class="border">
                            <input id="sidebar-light" name="data-sidebar-color" type="radio" value="default" class="form-check-input" checked>
                            <label class="form-check-label p-0 avatar-3xl w-100" for="sidebar-light">
                                <span class="d-flex h-100 ">
                                    <span class="flex-shrink-0">
                                        <span class="bg-light-subtle d-flex h-100 flex-column gap-1 p-1">
                                            <span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
                                        </span>
                                    </span>
                                    <span class="flex-grow-1">
                                        <span class="d-flex h-100 flex-column">
                                            <span class="bg-light-subtle d-block p-1"></span>
                                            <span class="d-block h-100 bg-primary-subtle m-2"> </span>
                                            <span class="bg-light-subtle d-block p-1 mt-auto"></span>
                                        </span>
                                    </span>
                                </span>
                            </label>
                        </div>
                        <h5 class="fs-13 text-center mt-2">Light</h5>
                    </div>
                    <div class="col-6">
                       <div class="border">
                            <input id="sidebar-dark" name="data-sidebar-color" type="radio" value="dark" class="form-check-input">
                            <label class="form-check-label p-0 avatar-3xl w-100" for="sidebar-dark">
                                <span class="d-flex h-100 ">
                                    <span class="flex-shrink-0">
                                        <span class="bg-primary d-flex h-100 flex-column gap-1 p-1">
                                            <span class="d-block p-1 px-2 bg-light-subtle opacity-25 rounded mb-2"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-light-subtle opacity-25"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-light-subtle opacity-25"></span>
                                            <span class="d-block p-1 px-2 pb-0 bg-light-subtle opacity-25"></span>
                                        </span>
                                    </span>
                                    <span class="flex-grow-1">
                                        <span class="d-flex h-100 flex-column">
                                            <span class="bg-light-subtle d-block p-1"></span>
                                            <span class="d-block h-100 bg-primary-subtle m-2"> </span>
                                            <span class="bg-light-subtle d-block p-1 mt-auto"></span>
                                        </span>
                                    </span>
                                </span>
                            </label>
                        </div>
                        <h5 class="fs-13 text-center mt-2">Dark</h5>
                    </div>
                    <!-- end col -->
                </div>

                <div id="sidebar-color" class="mb-4">
                    <h6 class="mt-4 mb-0 fw-semibold text-uppercase">Primary Color</h6>
                    <p class="text-muted">Choose a color of Primary.</p>
                    <div class="d-flex flex-wrap gap-3 mb-2">
                        <div class="form-check sidebar-setting card-radio">
                            <input class="form-check-input" type="radio" name="data-theme-colors" id="themeColor-01" value="default" checked>
                            <label class="form-check-label avatar-md" for="themeColor-01"></label>
                        </div>
                        <div class="form-check sidebar-setting card-radio">
                            <input class="form-check-input" type="radio" name="data-theme-colors" id="themeColor-02" value="cyan">
                            <label class="form-check-label avatar-md" for="themeColor-02"></label>
                        </div>
                        <div class="form-check sidebar-setting card-radio">
                            <input class="form-check-input" type="radio" name="data-theme-colors" id="themeColor-03" value="green">
                            <label class="form-check-label avatar-md" for="themeColor-03"></label>
                        </div>
                        <div class="form-check sidebar-setting card-radio">
                            <input class="form-check-input" type="radio" name="data-theme-colors" id="themeColor-04" value="blue">
                            <label class="form-check-label avatar-md" for="themeColor-04"></label>
                        </div>
                        <div class="form-check sidebar-setting card-radio">
                            <input class="form-check-input" type="radio" name="data-theme-colors" id="themeColor-05" value="red">
                            <label class="form-check-label avatar-md" for="themeColor-05"></label>
                        </div>
                    </div>
                </div>
                <div class="flex items-center justify-end gap-2 modal-footer pt-4 border-top">
                    <button type="button" class="btn btn-light" id="resetBtn">
                        <i class="ri-reset-right-line"></i> Reset Layouts
                    </button> 
                    <button type="button" class="btn btn-danger">
                        <i class="ri-shopping-bag-3-line"></i> Buy Now
                    </button>
                </div>

            </div>
        </div>
    </div>
</div>