* { padding: 0px; margin: 0px; } body { color: #000; background-color: #fff; font-size: 1em; font-weight: 400; line-height: 1.5; font-family: var(--font-family); } a { text-decoration: none; color: #000; } .container { width: 98%; max-width: 1500px; margin: auto; } .heading { padding: 0 0.5em; margin-bottom: 10px; } .box1 .heading, .box2 .heading { padding: 0 0.2em; margin-bottom: 0px; } .navbar { background-color: var(--primary-color); color: #fff; padding: 0 0.5em; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); margin-bottom: 1em; } .nav_flex { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; } .logo { display: flex; align-items: center; gap: 10px; } .site_logo { width: 75px; height: 75px; object-fit: cover; border-radius: 50%; } .site_name { font-size: 1.5em; font-weight: 600; color: #fff; } .site_tag_line { font-size: 15px; font-weight: 400; color: #fff; } .categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 5px; justify-content: center; place-items: center; align-content: center; } .categories a { text-decoration: none; } .categories a .card { background-color: #fff; transition: transform 0.3s ease-in-out; overflow: hidden; margin-bottom: 10px; text-align: center; max-width: 90px; } .categories a { max-width: 90px; } .categories a .card:hover img { transform: scale(1.05); } .categories a .card img { display: block; margin: auto; width: 80%; aspect-ratio: 1 / 1; transition: transform 0.3s ease-in-out; } .categories a .card .name { padding: 2px 5px; font-weight: 600; background-color: #fff; position: relative; } .products { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 300px)); gap: 15px; justify-content: space-between; } .products a .products_card { background-color: #fff; transition: transform 0.3s ease-in-out; overflow: hidden; margin-bottom: 10px; text-align: center; } .products a .products_card img { display: block; margin: auto; width: 100%; aspect-ratio: 1/1; object-fit: cover; transition: transform 0.3s ease-in-out; border-radius: 8px; } .products a { text-decoration: none; } .products a .products_card:hover img { transform: scale(1.05); } .products a .products_card .name { padding: 2px 5px; background-color: #fff; position: relative; min-height: 50px; } .products .btn { display: block; width: 100%; margin: auto; padding: 8px 10px; background-color: #fff; color: var(--primary-color); font-weight: bold; font-size: 16px; cursor: pointer; transition: background-color 0.3s ease-in-out; border-radius: 5px; border: 1px solid var(--primary-color); } .products .btn:hover { border: 1px solid #000; color: #000; } .products .mrp { font-weight: bold; } .cart_quantity { display: flex; justify-content: center; align-items: center; gap: 3px; border: 1px solid #000; border-radius: 5px; } .cart_quantity .decrease-btn { padding: 8px 10px; background-color: #fff; color: var(--primary-color); font-weight: bold; font-size: 16px; cursor: pointer; border: none; } .cart_quantity .quantity-input { padding: 8px 10px; background-color: #fff; color: #000; font-weight: bold; font-size: 16px; cursor: pointer; border: none; text-align: center; } .cart_quantity .quantity-input:focus { border: none; outline: none; } .cart_quantity .increase-btn { padding: 8px 10px; background-color: #fff; color: var(--primary-color); font-weight: bold; font-size: 16px; cursor: pointer; border: none; } .card_flex { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .adjusment_card_flex { display: flex; justify-content: space-between; align-items: center; gap: 3px; } .cart_box { max-height: 400px; overflow-y: auto; } .cart_box::-webkit-scrollbar { width: 7px; } .cart_box::-webkit-scrollbar-track { background: #fff; } .cart_box::-webkit-scrollbar-thumb { background: #b2b2b2; border-radius: 4px; } .cart_box::-webkit-scrollbar-thumb:hover { background: #555; } .cart_box::-webkit-scrollbar-button { display: none; } .cart-item { padding: 10px; margin-top: 1em; border-bottom: 1px solid #ddd; } .cart-item div { font-size: 16px; font-weight: 500; color: #333; min-width: 100px; } .cart-increase, .cart-decrease, .cart-quantity { background-color: none; padding: 5px 10px; border: none; cursor: pointer; outline: none; background: none; font-size: 16px; font-weight: bold; color: var(--primary-color); } .cart-quantity { width: 40px; text-align: center; padding: 0px !important; } .adjusment_cart_quantity { display: flex; justify-content: center; align-items: center; gap: 3px; border: 1px solid var(--primary-color); border-radius: 5px; } .adjusment_cart_quantity input[type="number"] { -moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield; } .adjusment_cart_quantity input[type="number"]::-webkit-outer-spin-button, .adjusment_cart_quantity input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .cart-remove { color: rgb(151, 151, 151); border: none; padding: 5px 10px; cursor: pointer; border-radius: 5px; font-size: 14px; display: flex; align-items: center; justify-content: center; background-color: #ebebeb; } .cart-remove:hover { background-color: #c82333; color: #fff; } .cart_img { border: 1px solid #222; border-radius: 5px; aspect-ratio: 1/1; width: 50px; height: 50px; } .cart_total { display: flex; justify-content: start; font-size: 1.2em; font-weight: 600; margin: 10px 5px; flex-direction: column; gap: 10px; background: #f6f6f5; padding: 10px; border: 1px solid #caccd1; border-radius: 8px; } .tax, #cart_total_amount { font-weight: normal; } .totalAmount { border-top: 1px solid #caccd1; display: inline-block; max-width: 300px; padding-top: 10px; } #cart_total { position: relative; display: flex; width: 50px; } #cart_total svg { fill: #f3f4f7; } #cart_count { position: absolute; top: -10px; right: 0px; display: flex; background-color: #9b9c9c; color: #fff; border-radius: 50%; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 12px; } #cart_count.cartActive { background-color: #2c9f45; color: #fff; } #empty_box { display: none; } .empty_cart_notification { min-height: 300px; font-size: 1.5em; font-weight: 600; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; } .empty_cart_notification a { text-align:center; background-color: var(--primary-color); font-weight: 600; color: #fff; padding: 10px 15px; border-radius: 5px; margin-top: 10px; font-size: 15px; } .thanku_box { display: none; min-height: 300px; font-size: 1.5em; font-weight: 600; text-align: center; } .thanku_notification { background-color: #edfff1; border: 2px dashed #218838; color: #218838; padding: 10px 20px; border-radius: 5px; margin-top: 10px; font-size: 15px; } .thanku_notification a { background-color: #218838; font-weight: 600; color: #fff; padding: 10px 20px; border-radius: 5px; margin-top: 2em; font-size: 15px; display: inline-block; } .order_form { padding: 20px; background: #fff; border: 1px solid #e6e6e6; border-radius: 10px; } .input-group { display: flex; gap: 10px; flex-wrap: wrap; } .input-group input, .input-group select { flex: 1; min-width: 100px; } .order_form label { font-weight: bold; margin-bottom: 5px; display: block; } .order_form input, .order_form textarea { width: calc(100% - 20px); padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; margin-bottom: 10px; } .order_form select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; margin-bottom: 10px; } .order_form textarea { resize: vertical; min-height: 100px; } .order_form_button { width: 100%; background: var(--primary-color); color: white; border: none; padding: 12px; font-size: 18px; cursor: pointer; border-radius: 5px; margin-top: 10px; } .checkbox-container { padding: 8px; display: flex; align-items: center; justify-content: center; gap: 5px; } .order_form_button:hover { background: #000; } .cart_alert { padding: 1em 0.8em; background: #fde8e9; border: 1px solid #eb2226; border-radius: 5px; margin: 5px; border: 2px solid transparent; } .cart_alert ul { list-style-position: inside; font-size: 14px; } .sticky_button { margin: 0 0.8em; } .home_heading { font-size: 0.8em; line-height: 1.1em; text-align: center; } .main_box { display: flex; flex-wrap: wrap; width: 100%; gap: 10px; justify-content: space-between; margin-block: 2em; } .main_box h2 { font-size: 1.5em; font-weight: 600; margin-bottom: 1em; } .box1 { width: 55%; } .box2 { width: 40%; position: relative; } .box2 ul { list-style-position: inside; } .ch_result { display: none; position: fixed; top: 5%; right: 10px; background: #fff; padding: 15px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 1000; } footer { background-color: #f0f0f0; color: #000; padding: 20px 0; margin-top: 1em; margin-bottom: 75px; } .social, .pagelinks, .contact { display: flex; flex-direction: column; gap: 1em 10px; } .pagelinks a:hover, .social_links a:hover { color: var(--primary-color); } .social_link { display: flex; gap: 10px; align-items: center; } .social_link svg { display: flex; background-color: var(--primary-color); fill: #fff; padding: 5px; border-radius: 50%; align-items: center; } .footer_heading { font-size: 1.5em; font-weight: 600; margin-bottom: 1em; } .footer_widgets { display: flex; gap: 20px; justify-content: space-between; flex-wrap: wrap; padding: 0px 0.8em; } .footer_copyright { text-align: center; padding-top: 1em; margin-top: 1em; color: #000; border-top: 1px solid #e0e0e0; } .contact_item { display: flex; gap: 10px; align-items: center; } .contact_item svg { fill: var(--primary-color); } .its404img { max-width: 400px; width: 100%; margin: auto; } .all_center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .four_zero_four_bg { margin-bottom: 10px; } .four_zero_four_bg .h4 { font-size: 2em; color: #333; font-weight: bold; } .contant_box_404 { max-width: 600px; padding: 20px; } .contant_box_404 .h2 { font-size: 1.8em; color: #555; margin-bottom: 15px; } .contant_box_404 p { font-size: 1em; color: #777; line-height: 1.6; margin-bottom: 25px; } .contant_box_404 a { background-color: #007bff; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px; transition: background-color 0.3s ease; } .contant_box_404 a:hover { background-color: #0056b3; } ul { list-style-position: inside; } .product { display: flex; width: 100%; } .wabtn { display: flex; justify-content: center; align-items: center; width: 100%; margin: 0; padding: 0; background-color: #fff; color: var(--primary-color); font-weight: bold; font-size: 16px; cursor: pointer; transition: background-color 0.3s ease-in-out; border-radius: 5px; border: 1px solid var(--primary-color); min-height: 50px; gap: 10px; } .wabtn:hover { border: 1px solid #000; color: #000; } .cf { display: flex; justify-content: center; align-items: center; gap: 10px; } .product .btn { display: flex; justify-content: center; align-items: center; width: 100%; margin: auto; padding: 8px 10px; background-color: #fff; color: var(--primary-color); font-weight: bold; font-size: 16px; cursor: pointer; transition: background-color 0.3s ease-in-out; border-radius: 5px; border: 1px solid var(--primary-color); min-height: 52px; } .product .btn:hover { border: 1px solid #000; color: #000; } .view_prize { font-size: 1.5em; margin-block: 0.5em; font-weight: 600; } .view_box { display: grid; } .view_flex { display: flex; justify-content: space-between; align-items: center; gap: 5px; margin-block: 2em; } .view_product_description { margin-block: 1em; } .gallery_image { display: flex; } .preview_image { max-width: 100px; display: flex; flex-direction: column; gap: 1em; } .preview_image img { width: 60px; height: 60px; aspect-ratio: 1/1; object-fit: cover; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; border-radius: 5px; border: 1px solid grey; cursor: pointer; } .view_main_img { width: 100%; } .view_main_img img { display: block; padding: 0px; margin: 0px auto; max-width: 100%; max-height: 500px; border-radius: 5px; } .content { padding: 1em; } .content { padding: 0.8em; } .view_box_left, .view_box_right { padding: 1em; } .view_box_right .cart_quantity { display: flex; justify-content: center; align-items: center; gap: 3px; border: 1px solid #000; border-radius: 5px; overflow: hidden; min-height: 50px; width: 100%; } .view_box_right .cart_quantity .decrease-btn { padding: 8px 10px; background-color: #fff; color: var(--primary-color); font-weight: bold; font-size: 18px; cursor: pointer; border: none; } .view_box_right .cart_quantity .quantity-input { padding: 8px 10px; background-color: #fff; color: #000; font-weight: bold; font-size: 18px; cursor: pointer; border: none; text-align: center; } .view_box_right .cart_quantity .quantity-input:focus { border: none; outline: none; } .view_box_right .cart_quantity .increase-btn { padding: 8px 10px; background-color: #fff; color: var(--primary-color); font-weight: bold; font-size: 18px; cursor: pointer; border: none; } #fullscreenModal { display: none; position: fixed; z-index: 999999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0, 0, 0); background-color: #fff; } #fullscreenImage { margin: 1em auto; display: block; width: 90%; height: auto; background-color: #fff; } #closeButton { position: fixed; top: 15px; right: 35px; color: red; font-size: 40px; font-weight: bold; transition: 0.3s; cursor: pointer; } #closeButton:hover, #closeButton:focus { color: #bbb; text-decoration: none; cursor: pointer; } .nostock { display: flex; align-items: center; justify-content: center; gap: 5px; margin: auto; padding: 6px 10px; width: calc(100% - 20px); background-color: #fff5dd; color: var(--primary-color); font-weight: 600; font-size: 16px; cursor: default; pointer-events: none; transition: background-color 0.3s ease-in-out; border-radius: 5px; border: 1px solid #ffb600; text-align: center; } .ep { padding: 0px !important; min-height: 51px; width: 100% !important; } .collection { margin-top: 1em; text-align: center; } .collection h2 { display: inline-block; font-size: 19px; margin: 1em 5px; border-bottom: 2px solid #000; font-weight: 600; } .search-container { max-width: 400px; margin: auto; width: 100%; position: relative; color: #000; } #search { position: relative; padding: 10px 10px 10px 35px; font-size: 16px; border: 1px solid #ccc; border-radius: 25px; outline: none; display: block; width: calc(100% - 28px); } .search_icon { position: absolute; top: 10px; left: 10px; } #results { display: none; position: absolute; width: 100%; background-color: #fff; border: 1px solid #ccc; border-top: none; max-height: 300px; overflow-y: auto; z-index: 10; border-radius: 5px; } #results.show { display: block; } .result-item { padding: 10px; border-bottom: 1px solid #eee; cursor: pointer; display: flex; align-items: center; } .result-item img { width: 50px; height: 50px; border-radius: 5px; margin-right: 10px; object-fit: cover; } .result-item:hover { background-color: #f1f1f1; } .cart_bottom_flex { display: flex; align-items: center; justify-content: space-between; width: 100%; } .nav_inner { display: flex; align-items: center; justify-content: space-between; padding: 10px; } .search { flex-grow: 1; } .cbr { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 10px; background: #ffc845; color: #000; border: 2px solid #000; } .phone svg { width: 35px; height: 35px; } .phone svg path { fill: #000; } .phone svg path:nth-child(2) { -webkit-animation: header-phone 1s infinite cubic-bezier(.1, .57, .5, 1); animation: header-phone 1s infinite cubic-bezier(.1, .57, .5, 1); } .phone svg path:nth-child(3) { -webkit-animation: header-phone2 1s infinite cubic-bezier(.1, .57, .5, 1); animation: header-phone2 1s infinite cubic-bezier(.1, .57, .5, 1); } @-webkit-keyframes header-phone { 0%, 30% { opacity: 0; -webkit-transform: translate3d(-20px, 20px, 0); transform: translate3d(-20px, 20px, 0) } 80% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 100% { opacity: 0 } } @keyframes header-phone { 0%, 30% { opacity: 0; -webkit-transform: translate3d(-20px, 20px, 0); transform: translate3d(-20px, 20px, 0) } 80% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 100% { opacity: 0 } } @-webkit-keyframes header-phone2 { 0% { opacity: 0; -webkit-transform: translate3d(-20px, 20px, 0); transform: translate3d(-20px, 20px, 0) } 70%, 90% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 100% { opacity: 0 } } @keyframes header-phone2 { 0% { opacity: 0; -webkit-transform: translate3d(-20px, 20px, 0); transform: translate3d(-20px, 20px, 0) } 70%, 90% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 100% { opacity: 0 } } .marquee-wrapper { min-height:100px; position: relative; width: 100%; overflow: hidden; padding: 0; background-color: #fff; } .marquee-container { display: flex; white-space: nowrap; position: relative; } .marquee { display: inline-flex; animation: scroll 200s linear infinite; } .marquee-item { padding: 0 10px; text-decoration: none; display: inline-block; transition: transform 0.2s; } .marquee-item img { max-width: 100px; height: auto; border-radius: 8px; aspect-ratio: 1 / 1;
   object-fit: cover; } .marquee-item:hover { transform: scale(1.05); } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .notification {font-size:14px; text-align:center; display: flex; align-items: center; justify-content: center; border-radius: 5px; background: #fffbe5; color: #414141; border: 1px solid #e5c600; margin: 0.7em 0.2em; padding: 9px 5px; gap: 10px; font-weight: 600; } .notification svg { width: 25px; height: 25px; animation: shake 0.9s ease-in-out infinite; } @keyframes shake { 0% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } 75% { transform: rotate(-5deg); } 100% { transform: rotate(0); } } .footer-nav { position: fixed; bottom: 0; width: 100%; background-color: #f2f2f2; border-top: 1px solid #ddd; display: flex; justify-content: space-around; padding: 10px 0; z-index: 100; } .footer-nav a, .footer-nav button { cursor: pointer; text-align: center; border: none; color: #333; text-decoration: none; font-size: 14px; flex: 1; background: none; display: flex; align-items: center; justify-content: center; flex-direction: column; } .footer-nav a.active { color: navy; } .footer-nav svg { width: 30px; height: 30px; display: block; margin-bottom: 3px; } .side-menu { height: 100%; width: 250px; position: fixed; top: 0; background-color: #fff; overflow-x: hidden; padding-top: 20px; transition: 0.3s; z-index: 200; } .menu_heading{ font-size:18px; padding:2px 5px; } .menu_to_box{ display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #f3f4f7; width:95%; padding-bottom:5px; padding-left:5px; } .closebtn { display: flex; align-self: center; justify-content: center; cursor: pointer; width: 30px; height: 30px; border: none; z-index: 5; background-color: none; background: none; } .menu-left { left: -250px; } .menu-right { right: -250px; } .side-menu a img { width: 50px; } .side-menu a { margin-top: 5px; padding: 8px 20px; text-decoration: none; font-size: 18px; color: #333; display: flex; align-items: center; width: 100%; gap: 5px; transition: 0.3s; } .side-menu a:hover { background-color: #f1f1f1; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 150; display: none; } .hide_a, .hide_b { display: none; } #cart_total_footer { position: relative; } #cart_count_footer { position: absolute; top: -6px; right: 0px; display: flex; background-color: #9b9c9c; color: #fff; border-radius: 50%; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 12px; } #cart_count_footer.cartActive { background-color: var(--primary-color); color: #fff; } .collection-container { display: flex; gap: 10px; } .collection-link img { width: 52px; height: 52px; } .collection_ids { max-width: 120px; position: sticky; top: 0; height: 600px; overflow-y: auto; background-color: #f8f9fa; border-radius: 5px; padding: 10px 2px; text-align: center; margin-top: 10px; } .collection_ids::-webkit-scrollbar { width: 6px; opacity: 0; } .collection_ids:hover::-webkit-scrollbar { opacity: 1; } .collection_ids::-webkit-scrollbar-track { background: transparent; } .collection_ids::-webkit-scrollbar-thumb { background: #888; border-radius: 3px; } .collection_ids::-webkit-scrollbar-thumb:hover { background: #555; } .collection_ids a { display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 5px; text-decoration: none; color: #3f4549; border-radius: 5px; margin-bottom: 5px; font-size: 12px; transition: background-color 0.2s; } .collection_ids a.active { background-color: var(--primary-color); color: white; font-weight: bold; } .collection_lists { flex-grow: 1; padding: 10px; background-color: #fff; } .collection { margin-bottom: 20px; } .cf-container { max-width: 500px; background-color: #fff; padding: 20px; margin: 2px auto 2em auto; border-radius: 8px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; } #cf-enquiryForm { display: flex; flex-direction: column; gap: 20px; } .cf-form-group { display: flex; flex-direction: column; } .cf-form-group label { font-weight: bold; margin-bottom: 5px; } .cf-form-group label span { color: red; } #cf-name, #cf-mobile, #cf-enquiry, #cf-orderId, #cf-enquiryType { padding: 10px; border: 1px solid #ccc; border-radius: 4px; } #cf-name:focus, #cf-mobile:focus, #cf-enquiry:focus, #cf-orderId:focus { border-color: #000; outline: none; } @keyframes blinkAnimation { 0 { opacity: 1 } 50% { opacity: .5 } 100% { opacity: 1 } } .blink { animation: blinkAnimation .5s linear infinite } @keyframes rotateAnimation { 0 { transform: rotate(0) } 100% { transform: rotate(360deg) } } .loading_icon { animation: rotateAnimation .5s linear infinite } .cf-form-actions { display: flex; justify-content: space-between; margin-top: 10px; } .cf-btn, .cf-clear-btn { padding: 10px 5px; border: none; border-radius: 4px; cursor: pointer; min-width: 140px; display: flex; align-items: center; justify-content: center; } .cf-success { background-color: #e6ffed; color: #2e7d32; border: 1px solid #4caf50; padding: 15px; border-radius: 8px; margin-top: 15px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .cf-success h3 { margin-top: 0; color: #2e7d32; font-size: 18px; } .cf-success p { margin: 5px 0; font-size: 14px; } .cf-error { background-color: #ffebee; color: #c62828; border: 1px solid #f44336; padding: 15px; border-radius: 8px; margin-top: 15px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .cf-error p { margin: 5px 0; font-size: 14px; } .cf-btn { background-color: var(--primary-color); color: #fff; } .cf-btn:disabled, .cf-btn[disabled] { border: 1px solid #999999; background-color: #cccccc; color: #666666; pointer-events: none; cursor: not-allowed; } .cf-btn { background-color: var(--primary-color); color: #fff; } .cf-clear-btn { background-color: transparent; color: var(--primary-color); border: 1px solid var(--primary-color); } .cf-form-group.cf-required input:invalid { border-color: red; } .cbtn { display: none; } .cnote { margin: 5px; font-size: 13px; color: red; } @media (min-width: 768px) { .view_box { grid-template-columns: 1fr 1fr; } .categories a .card, .categories a { max-width: 200px; } .categories { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; } } @media screen and (max-width: 768px) { .gallery_image{ aspect-ratio: 1 / 1; min-height:300px; } .marquee-item img { max-width: 80px; } .empty_cart_notification { padding: 1em; } .view_box_right .cart_quantity .quantity-input { width: 50px; } .preview_image { max-width: 40px; display: flex; flex-direction: column; gap: 0.5em; position: absolute; top: 5px; left: 5px; z-index: 111; } .preview_image img { width: 30px; height: 30px; } .gallery_image { position: relative; } .view_box { grid-template-columns: 1fr; } .sst { position: fixed; bottom: 75px; left: 0; width: 100%; background-color: #fff; z-index: 99; } .view_flex { margin: 0.2em 0.5em; } .cprice { font-size: 12px !important; font-weight: noraml !important; } .subtotal { font-size: 13px !important; } .listOnMobile { border: 1px solid #c2c3c4; margin-bottom: 1em; padding: 10px; border-radius: 5px; } .products a .products_card { background-color: #fff; transition: transform 0.3s ease-in-out; overflow: hidden; margin-bottom: 10px; text-align: left; display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 1em; } .products a .products_card img { width: 90px; } .onMobileFull { flex-grow: 1; } .onMobileBtn { max-width: 150px; margin-left: auto; } .onMobileBtn .cart_quantity .quantity-input { width: 50px; } .products a .products_card:hover img { transform: scale(1); } .products a .products_card .name { padding: 2px 0px; background-color: #fff; position: relative; min-height: auto; } .nav_inner { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 10px 0px; width: 95%; } .search { width: 100%; order: 3; margin-top: 10px; height: 40px; } .action { width: 35px; } .collection_ids { max-width: 80px; } .collection_lists .categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 5px; justify-content: center; place-items: center } .collection_lists .categories .name { font-size: 14px; } .cf-container { max-width: 500px; background-color: #fff; padding: 20px; margin: 1em auto; border-radius: 0px; box-shadow: none; } .cbtn { display: block; } .type2 { display: none; } .fixed_bottom_buttons { position: fixed; bottom: 0; left: 0; right: 0; padding: 10px; background-color: #ffffff; display: flex; justify-content: center; gap: 15px; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); z-index: 1000; } .box1, .box2 { width: 100%; } .main_box { gap: 0px; margin-block: 0.5em; } .products a .products_card .name { min-height: auto; } .order_form { border: none; border-radius: 0px; padding: 10px 8px; } .products { padding: 0 0.8em; display: block; } .heading { font-size: 1.3em; line-height: 1.1em; } .input-group { flex-direction: column; } .site_name { font-size: 1.2em; } .logo { gap: 5px; } .site_logo { width: 60px; height: 60px; object-fit: cover; border-radius: 50%; } } @media only screen and (max-width: 320px) { .site_logo { width: 55px; height: 55px; object-fit: cover; border-radius: 50%; } .site_name { font-size: 0.9em; font-weight: 600; color: #fff; } .site_tag_line { font-size: 13px; font-weight: 400; color: #fff; } } .play_img { position: relative; text-align: center; color: white; cursor: pointer; } .play_centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer; } .play_button{ border:none; background:none; z-index:99; cursor: pointer; } .video-popup-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); z-index: 9999; justify-content: center; align-items: center; animation: fadeIn 0.3s ease-in-out; } .video-popup-content { position: relative; background: #000; padding: 0; border-radius: 10px; width: 90%; max-width: 800px; animation: slideUp 0.4s ease-in-out; } .video-iframe-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 10px; } .video-iframe-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; z-index: 1; } .video-close-button { position: absolute; top: 10px; right: 10px; font-size: 28px; color: #fff; background: rgba(0,0,0,0.6); border: none; cursor: pointer; padding: 6px 12px; z-index: 2; border-radius: 5px; } .video-close-button:hover { background: rgba(0,0,0,0.9); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }


.htmlInfo {
 
  line-height: 1.6;
  margin-inline: auto;
  padding: 1rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Headings: Fluid sizing with clamp for mobile responsiveness */
.htmlInfo h1,
.htmlInfo h2,
.htmlInfo h3,
.htmlInfo h4,
.htmlInfo h5,
.htmlInfo h6 {
  color: #111827;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 1.75em;
  margin-bottom: 0.5em;
}

.htmlInfo h1:first-child,
.htmlInfo h2:first-child,
.htmlInfo h3:first-child {
  margin-top: 0;
}

.htmlInfo h1 { font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem); }
.htmlInfo h2 { font-size: clamp(1.4rem, 2.5vw + 0.8rem, 2rem); }
.htmlInfo h3 { font-size: clamp(1.2rem, 1.5vw + 0.7rem, 1.5rem); }
.htmlInfo h4 { font-size: 1.15rem; }
.htmlInfo h5 { font-size: 1rem; }
.htmlInfo h6 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* Paragraphs */
.htmlInfo p {
  margin-top: 0;
  margin-bottom: 1.25rem;
  font-size: clamp(0.95rem, 0.4vw + 0.85rem, 1.05rem);
}

/* Lists */
.htmlInfo ul,
.htmlInfo ol {
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding-left: 1.25rem; /* Compact indentation for mobile */
}

.htmlInfo li {
  margin-bottom: 0.4rem;
  padding-left: 0.2rem;
}

.htmlInfo li::marker {
  color: #4b5563;
}

/* Nested lists */
.htmlInfo ul ul,
.htmlInfo ol ol,
.htmlInfo ul ol,
.htmlInfo ol ul {
  margin-top: 0.35rem;
  margin-bottom: 0.35rem;
  padding-left: 1rem;
}



   
    .cartitem { display: flex; align-items: center; border: 1px solid #eee; padding: 10px;  }
    .cartitem img { width: 80px; height: 80px; object-fit: cover;  }
     
    
    
    .item-details{
    display: flex;
    align-items: center;
    flex: 1;
    gap:10px;
}


    .item-actions { display: flex; align-items: center; gap: 8px; }
    
    .summary { padding: 15px; border-top: 2px solid #333; background: #fafafa; font-weight:bold;}
    .empty { text-align: center; padding: 40px; font-size: 18px; }
    


.cartinput{
    max-width:60px;
    text-align:center;
    border:none;
}    

.cartQuantity{
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    height: 30px;
    font-size: 16px;
    border: 1px solid red;
    border-radius: 10px;
    font-weight: bold;
}

.cartQuantity button , .cartQuantity input{
    background:none;
    border:none;
    outline:none;
    height:30px;
    padding:0px 10px;
    font-size:15px;
    font-weight:bold;
    cursor: pointer;
}
    
 .cartdelete{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 16px;
    background-color: rgba(235, 235, 235, 0.9);
    color: #000000;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
}

.cartdelete:hover{

    background-color: rgb(255, 0, 0);
    color: #fff;
}
 .cartoutput{
     
  max-height: 450px;
  
  overflow-y: auto;
     
 }   
 
.cart_main {
  
  margin: 0 auto;
  display: flex;
  flex-direction: row;
}

.cart_one {
 
  width: 70%;
  
  
}

.cart_two {
  width: 30%;
  position: sticky;
  top: 1rem;
  
}

.summary {
  border: 1px solid #ccc;
  padding: 1rem;
  border-radius: 8px;
  margin:1px 10px;
}

.w100{
    width: calc(100% - 2em);
}

.cart-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap:10px;
    background-color: rgb(242, 4, 4);
    color: #fff;
    padding: 10px 1em;
    border-radius: 10px;
    margin:1em;
    font-size:24px;
    
    border:none;
     cursor: pointer;
}


.cart-btn:disabled{
    cursor: default;
    pointer-events: none;
    background-color: rgb(126, 126, 126);
    color: #fff;
}
.cart-btn:hover{
    background-color: #c30000;
}


.summary .cartprice{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:1em;
    padding: 1em;
    border-bottom: 1px solid #bcbcbc;
}


.summary .cartpricelast{
    border-bottom: none;
    font-size: 1.2em;
}

.cartHeading{
    margin:1px;
    padding:0px;
    font-size:30px;
    text-align:center;
}


@media (max-width: 768px) {
  .cart_main {
    flex-direction: column;
  }

  .cart_one,
  .cart_two {
    width: 100%;
  }

  .cart_two {
    position: static;
    margin-top: 1rem;
  }
  
  .cart_two {
  
  position: static;
  top: 1rem;
  
}

 .cartitem {  flex-direction: column; }

      .item-actions { margin-top: 1px; }
      
      
      .item-details {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 10px;
    
    width: 100%;
}

.cartitem img { width: 60px; height: 60px; object-fit: cover;  }
     
.cart-btn{
    
    margin: 10px 1em;
    
}
  .buttonsticky{
       background: #f0f0f0;
  position: fixed;
  bottom: 0;
  width:100%;
  }
}
.spin {
  animation: spin 2s linear infinite;
  display: inline-block; /* Ensures it behaves well inline */
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}




.product_table {
  width: 100%;
  overflow-x: auto; /* allows horizontal scroll on small screens */
}

.product_table table {
  width: 100%;
  border-collapse: collapse;
 
  font-size: 14px;
  background: #fff;
}

.product_table th,
.product_table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
  vertical-align: middle;
}

.product_table th {
  background: #f7f7f7;
  font-weight: bold;
}

.product_table img {
  max-width: 60px;
  height: auto;
  border-radius: 6px;
}

  .product_table .big {
    font-size:20px;
  }
  
  
  .printtable .paybox{
  display: flex;
  justify-content: space-between;
  gap:10px;
  align-items: center;
 
width:100%;
}


  .printtable{
      margin-block:1em;
  }

.printtable .btn-print{
  display: flex;
height: 40px;
width:100px;
align-items: center;
justify-content: center;
background-color: #121212;
color: #fff;
border-radius: 10px;
border: none;
cursor: pointer;
}

.loginBtn {
  display: flex;
  aspect-ratio: 1/1;
  width:56px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background-color: #fff;
  color: #000;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-size:12px;
}

.loginBtn svg{
  width: 25px;
  height: 25px;
}


.loginBtn img{
  width: 31px;
  height: 31px;
}




.order_list {
   
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: #fff;
    margin-bottom: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    width: calc(100% - 24px);
   
}


.order_flex {
    display: flex;
    justify-content: space-between;
      align-items: center;
    gap: 12px;
    width:100%;
    
}


.order_inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}


.order_actionButtons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}


.account_main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom:1em;
}


.account_main img {
    width:70px;
}


.logout {
    display: inline-block;
    padding: 8px 16px;
    background-color: #52565e;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.logout:hover {
    background-color: #c82333;
}

.logout:active {
    background-color: #bd2130;
}

.account_flex{
     display: flex;
    
    align-items: center;
    gap: 8px;
}

.inner1, .inner2 {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: #444;
}

.order_side2 {
    display: flex;
    gap:25px;
    justify-content: space-between;
    text-align: right;
    min-width: 100px;
}



.order_id {
    font-weight: 600;
    color: #222;
    font-size:20px;
}
.order_address {
    font-size: 12px;
    color: #666;
    max-width:250px;
    
}
 
.order_dateTime {
    font-size: 12px;
    color: #999;
}
.order_amount {
    font-weight: 600;
    color: #2e7d32;
    font-size: 16px;
}
.order_totalProduct {
    font-size: 12px;
    color: #555;
}


.actionBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding:0px 10px;
  font-size: 13px;
  border-radius: 4px;
  min-height: 30px;
  font-weight: 600;
}

.actionBtn.view {
  background-color: #673de5;
  color: #fff;
  border: 1px solid #673de5;
}


.actionBtn.pay {
  background-color: #e4002b;
  color: #fff;
  border: 1px solid #e4002b;
}

.actionBtn:hover {
 background-color: #f3f4f7;
   color: #000;
}



.status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 100px;
  font-size: 13px;
  border-radius: 4px;
  min-height: 30px;
  font-weight: 600;
}

.status.new {
  background-color: #f4f1ff;
  color: #7552cc;
  border: 1px solid #7552cc;
}

.status.processing {
  background-color: #fef3ea;
  color: #fb8a2e;
  border: 1px solid #fb8a2e;
}

.status.conformed {
  background-color: #d8ffe5;
  color: #007226;
  border: 1px solid #007226;
}

.status.packing {
  background-color: #faffcd;
  color: #7a8800;
  border: 1px solid #7a8800;
}

.status.delivered {
  background-color: #fbe7f2;
  color: #da1884;
  border: 1px solid #da1884;
}

.status.bagged {
  background-color: #d3efe7;
  color: #2a2f2e;
  border: 1px solid #5b726c;
}

 

.status.verifying {
  background-color: #edf5fc;
  color: #004b79;
  border: 1px solid #004b79;
}

@media (max-width: 600px) {
    .order_flex {
        flex-direction: column;
        gap: 10px;
    }
    
    .order_box{
        padding:0px 5px;
    }
    
    .order_address {
    max-width:100%;
}

.order_side2 {
width: 100%;
}


.product_table img {
  max-width:50px;
}
   
}



 

.loginBox{
    margin:2em auto;
    max-width:300px;
     background-color: #fefefe;
  color: #000;
  border-radius: 5px;
  padding:1em;
  border:1px solid #caccd1;
    display: flex;
   align-items: center;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  justify-content: center;
  flex-direction: column;
  gap:1em;
}


.itslogin {
  display: inline-flex;
  
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  align-items: center;
  padding:10px 1em;
  justify-content: center;
  background-color: #f3f4f7;
  color: #000;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  gap:10px;
  font-size:15px;
  font-weight:600;
  margin:1em auto;
  
}

.itslogin svg{
  width: 35px;
  height: 35px;
}










.bank{
    flex:1;
     max-width:300px;
}
        .bank table {
            width: 100%;
            border-collapse: collapse;
            background-color: #f8f8f8;
            border: 2px solid #003087;
        }
        .bank th, .bank td {
            padding: 8px;
            text-align: center;
            border: 1px solid #ddd;
        }
        .bank th {
            background-color: #003087;
            color: white;
            font-size: 16px;
        }
        .bank td {
            font-size: 15px;
            color: #333;
        }
         
        
        
    .payment_box {
    display: flex;
    justify-content: space-between;
    align-items: start;
   
}

.payment_step1, .payment_step2 {
    flex: 1;
}

.payment_step1 {
   
    border-right: 2px solid #caccd1;
    padding-right:1.5em;
     margin-right:1.5em;
}

 
@media (max-width: 600px) {
     .payment_box {
flex-direction: column;
    padding: 0px;
 
}


.payment_step1 {
    border-right: none;
    padding-right:0px;
     margin-right:0px;
    border-bottom: 2px solid #caccd1;
    padding-bottom:1.5em;
    margin-bottom:1em;
}


.bank th, .bank td {
            padding: 6px 8px;
           font-size:14px;
        }
}
 
 
 .paymentOptions{
      display: flex;
 align-items: start; justify-content: space-between;
flex-wrap: wrap; gap:10px;
margin-top:1em;
 }
 
 .upi{
     max-width:250px;
 }
 .upi img{
   border: 2px solid #003087;  
 }
 
 .note{
     margin-top:1em;
      padding-top:1em;
     border-top:1px dashed grey;
 }






.payment_form {
    
    margin: 5px auto;
    
    
}

.payment_form form {
    display: flex;
 align-items: center;
 justify-content: start;
 flex-wrap:wrap;
    gap: 12px;
}

.payment_form input[type="file"] {
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
}

 

#paymentSubmit {
    padding: 10px;
    border: none;
    border-radius: 6px;
    background: #007bff;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.3s;
}

#paymentSubmit:hover:not(:disabled) {
    background: #0056b3;
}

#paymentSubmit:disabled {
    background: #999;
    cursor: not-allowed;
}

#paymentResult {
    margin-top: 15px;
  
}

.previewBox {
    text-align: center;
    margin-bottom: 10px;
}

.previewImg {
    max-width: 200px;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    margin-top: 5px;
}

.serverResponse {
    margin-top: 10px;
    padding: 8px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    text-align:center;
    font-weight:bold;
}

.iserror {
    border: 2px solid red;
    background-color: #ffe6e6;
    color: red;
    padding: 5px;border-radius: 6px;
     text-align: center;  font-weight:bold;
      animation: iblink 0.5s ease-in-out 2;
}

@keyframes iblink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}














/* Center the entire form */
#customerForm {

  text-align: center;

}

/* Input and select fields */
#customerForm input,
#customerForm select {
  padding: 8px;
  margin: 5px 0;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Mobile row */
#customerForm .mobile {
  margin-bottom: 15px;
}

/* Date of Birth row */
#customerForm .dob {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
}

#customerForm .dob div {
  flex: 1;
  min-width: 80px;
}

/* Submit button */
#customerForm button {
  padding: 10px 20px;
  border: none;
  background-color: #007bff;
  color: #fff;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
}

#customerForm button:hover {
  background-color: #0056b3;
}

#customerForm button:disabled{
  pointer-events: none;
  cursor: default;
  background-color: rgb(180, 180, 180);
  color: rgb(117, 117, 117);
}
















    /* Main container */
      .pmf-container {
        
        width: 100%;
        overflow: hidden;
        position: relative;
      }

 

      /* Progress Bar Styles */
      .pmf-stepProgressBar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30px 40px;
        background: #f8f9fa;
        position: relative;
        
        border-radius: 10px;
      }

      .pmf-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        position: relative;
        z-index: 2;
      }

      .pmf-step-circle {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        color: white;
        margin-bottom: 10px;
        transition: all 0.3s ease;
        border: 3px solid transparent;
      }

      .pmf-step-label {
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        max-width: 120px;
        line-height: 1.3;
        transition: color 0.3s ease;
      }

      /* Step states */
      .pmf-step.completed .pmf-step-circle {
        background: #28a745;
        transform: scale(1.1);
      }

      .pmf-step.active .pmf-step-circle {
        background: #fd7e14;
        transform: scale(1.15);
        box-shadow: 0 0 0 4px rgba(253, 126, 20, 0.3);
      }

      .pmf-step.upcoming .pmf-step-circle {
        background: #6c757d;
      }

      .pmf-step.completed .pmf-step-label,
      .pmf-step.active .pmf-step-label {
        color: #333;
        font-weight: 600;
      }

      .pmf-step.upcoming .pmf-step-label {
        color: #6c757d;
      }

      /* Progress line between steps */
      .pmf-stepProgressBar::before {
        content: "";
        position: absolute;
        top: 55px;
        left: 90px;
        right: 90px;
        height: 4px;
        background: #dee2e6;
        z-index: 1;
        border-radius: 2px;
      }

      .pmf-progress-line {
        position: absolute;
        top: 55px;
        left: 90px;
        height: 4px;
        background: linear-gradient(90deg, #28a745, #fd7e14);
        z-index: 1;
        border-radius: 2px;
        transition: width 0.5s ease;
      }

      /* Content area */
      .pmf-content {
        padding: 40px;
      }

      .pmf-step-content {
        display: none;
      }

      .pmf-step-content.active {
        display: block;
        animation: fadeIn 0.3s ease;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .pmf-step-title {
        font-size: 24px;
        font-weight: 600;
        color: #333;
        margin-bottom: 20px;
        text-align: center;
      }

      /* Radio button styles */
      .pmf-radio-group {
        margin: 20px 0;
      }

      .pmf-radio-option {
        display: block;
        margin-bottom: 15px;
        position: relative;
        cursor: pointer;
        padding: 20px;
        border: 2px solid #e9ecef;
        border-radius: 12px;
        transition: all 0.3s ease;
        background: #fff;
      }

      .pmf-radio-option:hover {
        border-color: #fd7e14;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(253, 126, 20, 0.1);
      }

      .pmf-radio-option.selected {
        border-color: #fd7e14;
        background: rgba(253, 126, 20, 0.05);
      }

      .pmf-radio-input {
        display: none;
      }

      .pmf-radio-custom {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 20px;
        height: 20px;
        border: 2px solid #dee2e6;
        border-radius: 50%;
        background: white;
        transition: all 0.3s ease;
      }

      .pmf-radio-option.selected .pmf-radio-custom {
        border-color: #fd7e14;
        background: #fd7e14;
      }

      .pmf-radio-option.selected .pmf-radio-custom::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: white;
        transform: translate(-50%, -50%);
      }

      .pmf-radio-label {
        font-size: 18px;
        font-weight: 500;
        color: #333;
        margin-bottom: 5px;
        display: block;
        padding-right: 40px;
      }

      .pmf-radio-description {
        font-size: 14px;
        color: #6c757d;
        padding-right: 40px;
      }

      /* Payment options display */
      .pmf-payment-display {
        background: #f8f9fa;
        border-radius: 12px;
        padding: 30px;
        margin: 20px 0;
        text-align: center;
        border: 2px dashed #fd7e14;
      }

      .pmf-payment-display h3 {
        color: #fd7e14;
        margin-bottom: 15px;
        font-size: 20px;
      }

      .pmf-payment-info {
        font-size: 16px;
        color: #333;
        line-height: 1.6;
      }

      /* Screenshot upload area */
      .pmf-upload-area {
        border: 2px dashed #dee2e6;
        border-radius: 12px;
        padding: 40px 20px;
        text-align: center;
        margin: 20px 0;
        transition: all 0.3s ease;
        background: #f8f9fa;
      }

      .pmf-upload-area:hover {
        border-color: #fd7e14;
        background: rgba(253, 126, 20, 0.05);
      }

      .pmf-upload-area.dragover {
        border-color: #fd7e14;
        background: rgba(253, 126, 20, 0.1);
      }

      .pmf-upload-icon {
        font-size: 48px;
        color: #fd7e14;
        margin-bottom: 20px;
      }

      .pmf-file-input {
        display: none;
      }

      .pmf-upload-text {
        font-size: 16px;
        color: #6c757d;
        margin-bottom: 10px;
      }

      .pmf-upload-button {
        background: #fd7e14;
        color: white;
        border: none;
        padding: 12px 24px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
      }

      .pmf-upload-button:hover {
        background: #e8690b;
        transform: translateY(-2px);
      }


      /* Button styles */
      .pmf-button-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 40px;
        gap: 15px;
      }

      .pmf-btn {
        padding: 15px 30px;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;
        min-width: 120px;
        position: relative;
        overflow: hidden;
      }

      .pmf-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none !important;
      }

      .pmf-btn-primary {
        background: linear-gradient(135deg, #fd7e14, #ff9a44);
        color: white;
        box-shadow: 0 4px 15px rgba(253, 126, 20, 0.3);
      }

      .pmf-btn-primary:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(253, 126, 20, 0.4);
      }

      .pmf-btn-secondary {
        background: #6c757d;
        color: white;
      }

      .pmf-btn-secondary:hover:not(:disabled) {
        background: #5a6268;
        transform: translateY(-2px);
      }


.copy-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #ccc;
  background:#fff;
  padding:6px 10px;
  border-radius:6px;
  cursor:pointer;
  transition: background-color 200ms ease, border-color 200ms ease, transform 120ms ease;
}
.copy-btn:active { transform: translateY(1px); }

.copy-btn .icon { fill:currentColor; }
.icon-done { display:none; } /* hide done icon by default */

/* When copied */
.copy-btn.copied {
  background:#28a745;
  border-color:#1f7a33;
  color:#fff;
}
.copy-btn.copied .icon-copy { display:none; }
.copy-btn.copied .icon-done { display:block; }



.success {
  text-align: center;
  font-family: Arial, sans-serif;
  padding: 20px;
  background-color: #e6ffe6; /* light green */
  border: 2px dashed #28a745; /* green dashed border */
  border-radius: 10px;
}

.success svg.pulse {
  animation: pulse 1.5s ease-out forwards;
  transform-origin: center;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}


      .cod{
        padding: 10px;
        border-radius: 10px;
        border: 2px dashed #764ba2;
        background-color: #f0e1ff;
        text-align: center;
        margin-bottom:10px;
      }
      
      
      
      
      
      
      
      
      
      
      
      
      
      
        .empty-orders {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 57.5vh;
      color: #555;
      text-align: center;
    }
    .empty-orders .empbag {
      width: 200px;
      height: 200px;
      
    }
    .empty-orders h2 {
      margin: 0 0 10px;
      font-size: 20px;
    }
    .empty-orders p {
      margin: 0 0 20px;
      font-size: 14px;
      color: #777;
    }
    
    .isbtnflex{
          display: flex;
  justify-content: center; /* Centers items horizontally along the main axis */
  align-items: center;
  gap:10px;
    }
    
    
    .istflex{
        
         display: inline-flex;
  justify-content: start;  
  align-items: center;
  gap:5px;
  flex-wrap:wrap;
    }
    .empty-orders a {
       display: flex;
  justify-content: center; /* Centers items horizontally along the main axis */
  align-items: center;
  gap:10px;
      padding: 10px 20px;
      background: var(--primary-color);
      color: #fff;
      text-decoration: none;
      border-radius: 5px;
      font-size: 18px;
      transition: background 0.3s;
    }
    .empty-orders a:hover {
      background: #000;
    }
      
      .noticeDelivery{
          text-align:center;
          padding:5px;
          background:#fff8e5;
          border-radius: 5px;
          margin:5px;
          border:1px solid #ffb900;
      }
      
      
      .btn__flex{
         display: flex;
            justify-content: center;
            align-items: center;
            gap:5px;
            flex-wrap:wrap;
    }


        .open-btn {
        
      display: inline-flex;
            justify-content: center;
            align-items: center;
            gap:5px;
    padding: 10px 16px;
    background-color: #2c9f45;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    border:none;
    font-size: 14px;
    transition: background-color 0.3s 
ease;
            cursor: pointer;
           
                 }

        .open-btn:hover {
           background :#222;
        }


        /* Modal Overlay */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 1000;
            animation: fadeIn 0.3s ease;
        }

        .modal-overlay.active {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Modal Container */
        .modal {
            background: white;
            border-radius: 12px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
            animation: slideIn 0.3s ease;
            overflow: hidden;
        }

        /* Modal Header */
        .modal-header {
            padding: 20px 24px;
            border-bottom: 1px solid #e5e7eb;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-title {
            font-size: 20px;
            font-weight: 600;
            color: #1f2937;
        }

        .close-btn {
            background: none;
            border: none;
            font-size: 28px;
            color: #6b7280;
            cursor: pointer;
            padding: 0;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            transition: background 0.2s, color 0.2s;
        }

        .close-btn:hover {
            background: #f3f4f6;
            color: #1f2937;
        }

        /* Modal Body */
        .modal-body {
            padding: 24px;
            color: #4b5563;
            line-height: 1.6;
        }


        /* Animations */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        @keyframes slideIn {
            from {
                transform: translateY(-50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
         /* Mobile responsiveness */
      @media (max-width: 768px) {
      .account_main {
     display:block;
    padding: 5px;
}    

      
      
      .btn__flex{
         margin-top:10px;
            flex-wrap:nowrap;
    }

          
          .account_main img {
    width:40px;
}

.account_main .dob{
    font-size:12px;
}
.account_flex div{
    display:flex;
    gap:10px;
    align-items:center;
}
 
.open-btn{
    padding:5px 10px;
width:100%;
text-align:center;

}

.logout{
    padding:2px 5px;
width:100%;
text-align:center;

}
               
        .empty-orders {
      
      height: 50vh;
     
    }
    .empty-orders .empbag {
      width: 100px;
      height: 100px;
      
    }
    
    
           .pmf-payment-display {
        
        border-radius: 12px;
        padding: 20px;
        
        border: 2px dashed #fd7e14;
      }
      
        .pmf-container {
          margin: 10px;
          border-radius: 12px;
        }

        .pmf-title {
          font-size: 24px;
        }

        .pmf-stepProgressBar {
          padding: 20px;
        }

        .pmf-step-circle {
          width: 40px;
          height: 40px;
          font-size: 14px;
        }

        .pmf-step-label {
          font-size: 12px;
          max-width: 80px;
        }

        .pmf-stepProgressBar::before,
        .pmf-progress-line {
          left: 70px;
          right: 70px;
          top: 45px;
        }

        .pmf-content {
          padding:  20px;
        }

        .pmf-step-title {
          font-size: 20px;
          margin:0px;
        }
        
        

        .pmf-radio-option {
          padding: 10px 15px;
        }

        .pmf-radio-label {
          font-size: 16px;
        }

        .pmf-button-container {
          flex-direction: column-reverse;
          gap: 10px;
        }

        .pmf-btn {
          width: 100%;
          padding: 18px;
        }
        
        .moc{
            text-align:center;
        }
      }

      @media (max-width: 480px) {
        .pmf-stepProgressBar {
          padding: 12px 5px;
        }

        .pmf-step-circle {
          width: 35px;
          height: 35px;
          font-size: 12px;
        }

        .pmf-step-label {
          font-size: 11px;
          max-width: 70px;
        }

        .pmf-stepProgressBar::before,
        .pmf-progress-line {
          left: 60px;
          right: 60px;
          top: 35px;
        }
      }

   
   
   
   .ordres table {
   
  border-collapse: collapse;
  width: 100%;
}

.ordres td, .ordres th {
  border: 1px solid #ddd;
  padding: 8px;
}

.ordres tr:nth-child(even){background-color: #f2f2f2;}

 
 .isc{
  max-width:450px; 
  margin: auto;
 }
.reqoro img{
  border-radius: 10px;
  aspect-ratio: 1/1;
  width: 60px;
  height: 60px;
  object-fit: cover;
}

.reqoro{
    
     
  display: flex;
  
  align-items: center;
  justify-content: center;
  gap:10px;
font-size: 16px;
font-weight: bold;
margin: 5px;
}

.reqoro span{
  font-size: 14px;
  font-weight: normal;
}




.paymentBtnBox{

display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap:10px;
padding: 10px;
border-radius: 1em;
background: #f3f4f7;
border:1px solid #caccd1;
margin-block:1em;
    }
button.disabled {    opacity: 0.6;    cursor: not-allowed;}
.payment_status_container {
  margin-block:1.5em;
  display:flex;
  align-items:center;
  justify-content:center;
  
}

.payment_status_card {
  background:#fff;
  border-radius:16px;
  box-shadow:0 10px 35px rgba(0,0,0,.08);
  padding:40px 32px;
  
  width:100%;
  text-align:center;
  border:1px solid #e5e7eb;
}

.payment_status_card.payment_status_success { border-top:8px solid #10b981; border-color:#dcfce7; }
.payment_status_card.payment_status_failed  { border-top:8px solid #ef4444;  border-color:#fee2e2;  }

/* Icon */
.payment_status_icon-wrapper {
  margin:0 auto 24px;
  width:90px;
  height:90px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.payment_status_success .payment_status_icon-wrapper { background:#d1fae5; }
.payment_status_failed  .payment_status_icon-wrapper { background:#fee2e2;  }

.payment_status_icon {
  font-size:48px;
  font-weight:bold;
  line-height:1;
}

.payment_status_success .payment_status_icon { color:#059669; }
.payment_status_failed  .payment_status_icon { color:#dc2626; }

/* Text */
.payment_status_title {
  color:#1f2937;
  font-size:28px;
  font-weight:700;
  margin:0 0 16px;
}

.payment_status_message {
  color:#4b5563;
  font-size:16px;
  line-height:1.6;
  margin:0 0 32px;
}

/* Details */
.payment_status_details {
  border-radius:10px;
  padding:20px;
  margin:0 0 32px;
  text-align:left;
}

.payment_status_success .payment_status_details { background:#f0fdf4; }
.payment_status_failed  .payment_status_details { background:#fef2f2; }

.payment_status_detail-row {
  display:flex;
  justify-content:space-between;
  margin-bottom:12px;
}

.payment_status_detail-row:last-child { margin-bottom:0; }

.payment_status_label {
  color:#6b7280;
  font-size:15px;
}

.payment_status_value {
  font-weight:600;
  color:#374151;
}

.payment_status_value-success { color:#059669; }
.payment_status_value-failed  { color:#dc2626; }

/* Buttons */
.payment_status_actions {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
}

.payment_status_btn {
  padding:14px 32px;
  font-size:18px;
  font-weight:600;
  border-radius:10px;
  cursor:pointer;
  transition:all .2s ease;
  border:none;
  min-width:200px;
}

.payment_btn_primary {
  background:#10b981;
  color:#fff;
}

.payment_btn_continue {
  background:#be0027;
  color:#fff;
}



.payment_status_success .payment_status_btn-continue,
.payment_status_success .payment_status_btn-primary {
  background:#10b981;
  color:#fff;
}

.payment_status_failed .payment_status_btn-retry,
.payment_status_failed .payment_status_btn-primary {
  background:#dc2626;
  color:#fff;
}

.payment_status_btn:hover {
  transform:translateY(-1px);
}

.payment_status_success .payment_status_btn-continue:hover { background:#059669; }
.payment_status_failed  .payment_status_btn-retry:hover   { background:#b91c1c;  }

.payment_status_btn-secondary {
  background:#f3f4f6;
  color:#374151;
}

.payment_status_btn-secondary:hover { background:#e5e7eb; }

/* Responsive */
@media (max-width:480px) {
  .payment_status_card { padding:32px 20px; }
  .payment_status_actions {
    flex-direction:column;
    gap:12px;
  }
  .payment_status_btn { width:100%; }
}



#marquee{
    max-height:100px;
    height:100px;
    overflow:hidden;
        display:flex;
    align-items:center;
    justify-content:center;
}


.marquee-loading{
    

   text-align:center;
}
/* Prefix: biz-req- */

.biz-req-wrapper {
    
    margin: 15px 0;
}
   .biz-req-checkbox-group {
                              width:100%;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 15px;
}
                   .yes_optional{
                   color:#9fadb6;
                   }


.biz-req-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.biz-req-label {
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    color: #333;
}

.biz-req-fields-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.3s ease-in-out;
}

/* Dynamic Hidden Class */
.biz-req-hidden {
    display: none !important;
}

.biz-req-input-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.biz-req-input-group label {
    font-size: 14px;
    color: #555;
}

.biz-req-star {
    color: #e53935;
}

.biz-req-input {
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
}

.biz-req-input:focus {
    border-color: #007bff;
}





 .cb-wrap{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .cb-btn{
    display:flex;
    align-items:center;
    gap:5px;
    padding:6px 15px 6px 6px;
    border:none;
    border-radius:50px;
    cursor:pointer;
    color:#fff;
    text-align:left;
    white-space:nowrap;
  }
  .cb-btn .cb-icon{
    width:35px;
    height:35px;
    flex-shrink:0;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .cb-btn .cb-text{
    line-height:1.2;
    font-size:13px;
    font-weight:400;
  }
  .cb-btn .cb-text strong{
    display:block;
    font-size:14px;
    font-weight:600;
  }
 
  .cb-green{
    background:linear-gradient(180deg,#4caf50,#2e7d32);
  }
  .cb-green .cb-icon{ color:#2e7d32; }

  .cb-blue{
    background:linear-gradient(180deg,#4a90e2,#1a56b0);
  }
  .cb-blue .cb-icon{ color:#1a56b0; }
  
  /* Prefix: office_ */

.office-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.office-badge-open {
    color: #166534;
    background: #dcfce7;
}

.office-badge-closed {
    color: #9a3412;
    background: #ffedd5;
}



  .rcb_banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    margin: 10px auto 0 auto;
    padding: 18px 24px;
    border: 1px solid #f0d896;
    border-radius: 10px;
    background: linear-gradient(180deg, #fff8e6 0%, #fdf2d3 100%);
  }

  .rcb_left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
  }

  .rcb_icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }

  .rcb_icon svg {
    width: 26px;
    height: 26px;
    fill: #e8720c;
  }

  .rcb_text {
    min-width: 0;
  }

  .rcb_title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
  }

  .rcb_subtitle {
    margin: 2px 0 0;
    font-size: 15px;
    color: #4a4a4a;
    line-height: 1.3;
  }

  .rcb_button {
    flex-shrink: 0;
    background: #e8720c;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease;
  }

  .rcb_button:hover {
    background: #d4650a;
  }

  .rcb_button:active {
    background: #bf5a08;
  }

  .rcb_button_short {
    display: none;
  }

  /* Mobile: stay one line, just shrink everything */
  @media (max-width: 560px) {
    .rcb_banner {
      padding: 12px 14px;
      gap: 10px;
      border-radius: 8px;
    }

    .rcb_left {
      gap: 8px;
    }

    .rcb_icon {
      width: 36px;
      height: 36px;
    }

    .rcb_icon svg {
      width: 17px;
      height: 17px;
    }

    .rcb_title {
      font-size: 13px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .rcb_subtitle {
      font-size: 10.5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .rcb_button {
      padding: 9px 14px;
      font-size: 12px;
      border-radius: 6px;
    }

    .rcb_button_full {
      display: none;
    }

    .rcb_button_short {
      display: inline;
    }
  }

  @media (max-width: 380px) {
    .rcb_title {
      font-size: 12px;
    }
    .rcb_subtitle {
      font-size: 9.5px;
    }
    .rcb_button {
      padding: 8px 10px;
      font-size: 11px;
    }
  }
  .codbadge{
            margin-block:1em;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
        }
 
        .rmc-cod-badge {
          
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 18px;
            border-radius: 8px;
            color: #fff;
            min-width: 280px;
        }

        .rmc-cod-badge svg {
            width: 45px;
            height: 45px;
            flex-shrink: 0;
        }

        .rmc-cod-badge b {
            display: block;
            font-size: 20px;
        }

        .rmc-cod-badge span {
            font-size: 15px;
            opacity: 0.9;
        }

        .rmc-cod-available {
            background: #1e8e3e;
        }

        .rmc-cod-unavailable {
            background: #e53935;
        }