/* ═══════════════════════════════════════════════════════════════ BPP Custom Cart & Checkout – Premium Styles ═══════════════════════════════════════════════════════════════ */ /* -- CSS Custom Properties ------------------------------------ */ :root { --bpp-primary: #1abc9c; --bpp-primary-dark: #16a085; --bpp-purple: #5f259f; --bpp-purple-light: #7c3aed; --bpp-amber: #f59e0b; --bpp-amber-dark: #d97706; --bpp-green: #10b981; --bpp-red: #ef4444; --bpp-dark: #1e293b; --bpp-gray: #64748b; --bpp-light: #f8fafc; --bpp-border: #e2e8f0; --bpp-surface: #ffffff; --bpp-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --bpp-shadow-md: 0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04); --bpp-shadow-lg: 0 10px 25px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.04); --bpp-radius: 12px; --bpp-radius-sm: 8px; --bpp-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --bpp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --bpp-text-primary: #1e293b; --bpp-text-secondary: #475569; --bpp-text-muted: #64748b; --bpp-card-bg: #ffffff; --bpp-card-border: #e2e8f0; --bpp-table-bg: #ffffff; --bpp-table-border: #e0e0e0; } /* Dark Mode — applied by ThemeDetector via canonical class on */ html.bpp-dark-mode { --bpp-dark: #f1f5f9; --bpp-gray: #94a3b8; --bpp-light: #1e293b; --bpp-border: #334155; --bpp-surface: #0f172a; --bpp-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --bpp-shadow-md: 0 4px 6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3); --bpp-shadow-lg: 0 10px 25px rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.3); --bpp-text-primary: #f1f5f9; --bpp-text-secondary: #cbd5e1; --bpp-text-muted: #94a3b8; --bpp-card-bg: #1e293b; --bpp-card-border: #334155; --bpp-table-bg: #1e293b; --bpp-table-border: #475569; } /* -- Google Fonts -------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); /* ═══════════════════════════════════════════════════════════════ CART PAGE ═══════════════════════════════════════════════════════════════ */ /* -- Cart Table Container ----------------------------------- */ .woocommerce-cart .woocommerce { font-family: var(--bpp-font); } .woocommerce table.shop_table { border: none !important; border-radius: var(--bpp-radius) !important; overflow: hidden; box-shadow: var(--bpp-shadow-md); border-collapse: separate !important; border-spacing: 0; } .woocommerce table.shop_table thead { background: linear-gradient(135deg, #1e293b 0%, #334155 100%); } html.bpp-dark-mode .woocommerce table.shop_table thead { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); } .woocommerce table.shop_table thead th { color: #fff !important; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; border: none !important; padding: 16px 20px !important; font-family: var(--bpp-font); } .woocommerce table.shop_table tbody td { border: none !important; border-bottom: 1px solid var(--bpp-border) !important; padding: 20px !important; vertical-align: middle; font-family: var(--bpp-font); background: var(--bpp-surface); transition: background var(--bpp-transition); } .woocommerce table.shop_table tbody tr:hover td { background: #f0fdfa; } html.bpp-dark-mode .woocommerce table.shop_table tbody tr:hover td { background: #1a2332; } .woocommerce table.shop_table tbody tr:last-child td { border-bottom: none !important; } /* -- Product Thumbnail -------------------------------------- */ .woocommerce table.shop_table .product-thumbnail img { border-radius: var(--bpp-radius-sm); box-shadow: var(--bpp-shadow); transition: transform var(--bpp-transition); width: 80px; height: 80px; object-fit: cover; } .woocommerce table.shop_table .product-thumbnail img:hover { transform: scale(1.08); } /* -- Product Name ------------------------------------------- */ .woocommerce table.shop_table .product-name a { color: var(--bpp-dark); font-weight: 600; font-size: 15px; text-decoration: none; transition: color var(--bpp-transition); } .woocommerce table.shop_table .product-name a:hover { color: var(--bpp-primary); } /* -- Price -------------------------------------------------- */ .woocommerce table.shop_table .product-price .amount, .woocommerce table.shop_table .product-subtotal .amount { font-weight: 700; color: var(--bpp-dark); font-size: 16px; } /* -- Quantity Input Custom Wrap ----------------------------- */ .bpp-qty-wrapper { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; border: 2px solid var(--bpp-border); border-radius: var(--bpp-radius-sm); overflow: hidden; background: var(--bpp-surface); transition: border-color var(--bpp-transition), box-shadow var(--bpp-transition); vertical-align: middle; } .bpp-qty-wrapper:focus-within { border-color: var(--bpp-primary); box-shadow: 0 0 0 4px rgba(26, 188, 156, 0.15); } .bpp-qty-btn { background: transparent; border: none; cursor: pointer; font-size: 18px; font-weight: 600; color: var(--bpp-gray); width: 36px; height: 38px; display: inline-flex; align-items: center; justify-content: center; transition: all var(--bpp-transition); flex-shrink: 0; padding: 0; line-height: 1; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; } .bpp-qty-btn:hover { background: var(--bpp-light); color: var(--bpp-dark); } .woocommerce table.shop_table .bpp-qty-wrapper .qty { border: none; border-left: 1px solid var(--bpp-border); border-right: 1px solid var(--bpp-border); border-radius: 0; padding: 8px 0; width: 48px; height: 38px; margin: 0; text-align: center; font-weight: 600; font-size: 15px; font-family: var(--bpp-font); -moz-appearance: textfield; appearance: textfield; } .woocommerce table.shop_table .bpp-qty-wrapper .qty:focus { outline: none; box-shadow: none; } .woocommerce table.shop_table .bpp-qty-wrapper .qty::-webkit-inner-spin-button, .woocommerce table.shop_table .bpp-qty-wrapper .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* Fallback for regular qty input if wrapper fails */ .woocommerce table.shop_table .quantity:not(.bpp-qty-wrapper) .qty { border: 2px solid var(--bpp-border); border-radius: var(--bpp-radius-sm); padding: 8px 12px; width: 70px; text-align: center; font-weight: 600; font-size: 15px; font-family: var(--bpp-font); transition: border-color var(--bpp-transition), box-shadow var(--bpp-transition); -moz-appearance: textfield; appearance: textfield; } .woocommerce table.shop_table .quantity:not(.bpp-qty-wrapper) .qty:focus { outline: none; border-color: var(--bpp-primary); box-shadow: 0 0 0 4px rgba(26, 188, 156, 0.15); } .woocommerce table.shop_table .quantity:not(.bpp-qty-wrapper) .qty::-webkit-inner-spin-button, .woocommerce table.shop_table .quantity:not(.bpp-qty-wrapper) .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* -- Remove Button ------------------------------------------ */ .woocommerce table.shop_table .product-remove a.remove { color: var(--bpp-red) !important; font-size: 22px; width: 32px; height: 32px; line-height: 32px; border-radius: 50%; background: #fef2f2; transition: all var(--bpp-transition); display: inline-flex; align-items: center; justify-content: center; } html.bpp-dark-mode .woocommerce table.shop_table .product-remove a.remove { background: #3b1c1c; } .woocommerce table.shop_table .product-remove a.remove:hover { background: var(--bpp-red) !important; color: #fff !important; transform: scale(1.1); } /* -- Update Cart Button ------------------------------------- */ .woocommerce button[name="update_cart"], .woocommerce input[name="update_cart"] { background: var(--bpp-dark) !important; color: #fff !important; border: none !important; border-radius: var(--bpp-radius-sm) !important; padding: 10px 20px !important; font-weight: 600 !important; font-family: var(--bpp-font); letter-spacing: 0.5px; cursor: pointer; transition: all var(--bpp-transition); text-transform: uppercase; font-size: 12px; } .woocommerce button[name="update_cart"]:hover, .woocommerce input[name="update_cart"]:hover { background: #334155 !important; transform: translateY(-1px); box-shadow: var(--bpp-shadow-md); } html.bpp-dark-mode .woocommerce button[name="update_cart"], html.bpp-dark-mode .woocommerce input[name="update_cart"] { background: #334155 !important; } html.bpp-dark-mode .woocommerce button[name="update_cart"]:hover, html.bpp-dark-mode .woocommerce input[name="update_cart"]:hover { background: #475569 !important; } .woocommerce button[name="update_cart"]:disabled, .woocommerce input[name="update_cart"]:disabled { opacity: 0.8 !important; cursor: auto !important; transform: none !important; } /* ═══════════════════════════════════════════════════════════════ CART TOTALS SIDEBAR ═══════════════════════════════════════════════════════════════ */ .woocommerce .cart_totals { background: var(--bpp-surface); border-radius: var(--bpp-radius); box-shadow: var(--bpp-shadow-lg); padding: 28px; border: 1px solid var(--bpp-border); } .woocommerce .cart_totals h2 { font-family: var(--bpp-font); font-size: 20px; font-weight: 800; color: var(--bpp-dark); margin: 0 0 20px; padding: 0 0 16px; border-bottom: 2px solid var(--bpp-primary); position: relative; } .woocommerce .cart_totals table { border: none !important; box-shadow: none !important; } .woocommerce .cart_totals table th { font-weight: 600; color: var(--bpp-gray); font-size: 14px; text-transform: none; letter-spacing: 0; padding: 14px 12px !important; background: transparent !important; border: none !important; border-bottom: 1px solid var(--bpp-border) !important; } .woocommerce .cart_totals table td { padding: 14px 12px !important; border: none !important; border-bottom: 1px solid var(--bpp-border) !important; background: transparent !important; } .woocommerce .cart_totals .order-total th, .woocommerce .cart_totals .order-total td { font-size: 18px; font-weight: 800; color: var(--bpp-dark); border-bottom: none !important; padding-top: 20px !important; } .woocommerce .cart_totals .order-total .amount { color: var(--bpp-primary-dark); font-size: 22px; } /* -- Proceed to Checkout Button ----------------------------- */ .woocommerce .wc-proceed-to-checkout a.checkout-button { background: linear-gradient(135deg, var(--bpp-primary) 0%, var(--bpp-primary-dark) 100%) !important; color: #fff !important; border: none !important; border-radius: var(--bpp-radius-sm) !important; padding: 14px 28px !important; font-size: 14px !important; font-weight: 700 !important; font-family: var(--bpp-font); letter-spacing: 0.5px; text-transform: uppercase; transition: all var(--bpp-transition); box-shadow: 0 4px 15px rgba(26, 188, 156, 0.3); display: block; text-align: center; position: relative; overflow: hidden; } .woocommerce .wc-proceed-to-checkout a.checkout-button::after { content: ' →'; } .woocommerce .wc-proceed-to-checkout a.checkout-button:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(26, 188, 156, 0.4); background: linear-gradient(135deg, #16a085 0%, #148f77 100%) !important; } /* ═══════════════════════════════════════════════════════════════ SHIPPING METHOD STYLING (Cart + Checkout) ═══════════════════════════════════════════════════════════════ */ /* Hide WooCommerce default shipping price from labels — plugin handles COD charges */ .woocommerce ul#shipping_method li label .woocommerce-Price-amount, .woocommerce ul#shipping_method li label .amount { display: none !important; } .woocommerce ul#shipping_method { list-style: none !important; padding: 0 !important; margin: 0 !important; } .woocommerce ul#shipping_method li { margin: 0 0 10px !important; padding: 0 !important; } .woocommerce ul#shipping_method li label { display: flex !important; align-items: center; gap: 12px; padding: 14px 16px; border: 2px solid var(--bpp-border); border-radius: var(--bpp-radius-sm); cursor: pointer; transition: all var(--bpp-transition); font-family: var(--bpp-font); font-weight: 500; color: var(--bpp-dark); background: var(--bpp-surface); position: relative; } .woocommerce ul#shipping_method li label:hover { border-color: var(--bpp-primary); background: #f0fdfa; } html.bpp-dark-mode .woocommerce ul#shipping_method li label:hover { background: #0f2922; } .woocommerce ul#shipping_method li input[type="radio"] { accent-color: var(--bpp-primary); width: 18px; height: 18px; margin: 0 !important; flex-shrink: 0; } .woocommerce ul#shipping_method li input[type="radio"]:checked + label, .woocommerce ul#shipping_method li label:has(input[type="radio"]:checked) { border-color: var(--bpp-primary); background: linear-gradient(135deg, #f0fdfa 0%, #e6fff9 100%); box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.12); } html.bpp-dark-mode .woocommerce ul#shipping_method li input[type="radio"]:checked + label, html.bpp-dark-mode .woocommerce ul#shipping_method li label:has(input[type="radio"]:checked) { background: linear-gradient(135deg, #0f2922 0%, #0a3d2e 100%); } /* ═══════════════════════════════════════════════════════════════ CHECKOUT PAGE ═══════════════════════════════════════════════════════════════ */ .woocommerce-checkout .woocommerce { font-family: var(--bpp-font); } /* -- Billing Form ------------------------------------------- */ .woocommerce form.checkout .col-1, .woocommerce form.checkout .col-2 { background: var(--bpp-surface); border-radius: var(--bpp-radius); padding: 28px; box-shadow: var(--bpp-shadow-md); border: 1px solid var(--bpp-border); } .woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, .woocommerce-additional-fields h3 { font-family: var(--bpp-font); font-size: 20px; font-weight: 800; color: var(--bpp-dark); margin: 0 0 24px; padding: 0 0 16px; border-bottom: 2px solid var(--bpp-primary); } /* -- Form Fields -------------------------------------------- */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { border: 2px solid var(--bpp-border) !important; border-radius: var(--bpp-radius-sm) !important; padding: 12px 16px !important; font-family: var(--bpp-font); font-size: 14px; color: var(--bpp-dark); transition: all var(--bpp-transition); background: var(--bpp-surface); width: 100%; box-sizing: border-box; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus { outline: none !important; border-color: var(--bpp-primary) !important; box-shadow: 0 0 0 4px rgba(26, 188, 156, 0.12) !important; } .woocommerce form .form-row label { font-family: var(--bpp-font); font-weight: 600; color: var(--bpp-text-secondary); font-size: 13px; margin-bottom: 6px; display: block; } .woocommerce form .form-row label .required { color: var(--bpp-red); } /* -- Select2 Dropdown Override ------------------------------ */ .woocommerce .select2-container--default .select2-selection--single { border: 2px solid var(--bpp-border) !important; border-radius: var(--bpp-radius-sm) !important; height: 48px !important; padding: 8px 12px; font-family: var(--bpp-font); } .woocommerce .select2-container--default .select2-selection--single:focus, .woocommerce .select2-container--open .select2-selection--single { border-color: var(--bpp-primary) !important; box-shadow: 0 0 0 4px rgba(26, 188, 156, 0.12) !important; } .woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 30px; color: var(--bpp-dark); font-family: var(--bpp-font); } .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; } /* ═══════════════════════════════════════════════════════════════ ORDER REVIEW TABLE (Checkout) ═══════════════════════════════════════════════════════════════ */ .woocommerce-checkout #order_review_heading { font-family: var(--bpp-font); font-size: 20px; font-weight: 800; color: var(--bpp-dark); margin: 0 0 20px; padding: 0 0 14px; border-bottom: 2px solid var(--bpp-primary); } .woocommerce-checkout .woocommerce-checkout-review-order-table { border: none !important; border-radius: var(--bpp-radius) !important; overflow: hidden; box-shadow: var(--bpp-shadow); } .woocommerce-checkout .woocommerce-checkout-review-order-table thead th { background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important; color: #fff !important; font-weight: 600; font-family: var(--bpp-font); font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; padding: 14px 16px !important; border: none !important; } html.bpp-dark-mode .woocommerce-checkout .woocommerce-checkout-review-order-table thead th { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table td { font-family: var(--bpp-font); padding: 14px 16px !important; border: none !important; border-bottom: 1px solid var(--bpp-border) !important; background: var(--bpp-surface); } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th { font-family: var(--bpp-font); padding: 14px 16px !important; border: none !important; border-bottom: 1px solid var(--bpp-border) !important; background: var(--bpp-surface); font-weight: 600; color: var(--bpp-gray); } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td { font-family: var(--bpp-font); } .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th, .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td { background: linear-gradient(135deg, #f0fdfa 0%, #e6fff9 100%) !important; font-size: 18px !important; font-weight: 800 !important; color: var(--bpp-dark); border-bottom: none !important; } html.bpp-dark-mode .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th, html.bpp-dark-mode .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td { background: linear-gradient(135deg, #0f2922 0%, #0a3d2e 100%) !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total .amount { color: var(--bpp-primary-dark); font-size: 22px; } /* ═══════════════════════════════════════════════════════════════ PAYMENT METHODS (Checkout) ═══════════════════════════════════════════════════════════════ */ .woocommerce-checkout #payment { background: var(--bpp-surface) !important; border-radius: var(--bpp-radius) !important; box-shadow: var(--bpp-shadow-lg) !important; border: 1px solid var(--bpp-border); overflow: hidden; } .woocommerce-checkout #payment ul.payment_methods { padding: 24px !important; border-bottom: 1px solid var(--bpp-border) !important; } .woocommerce-checkout #payment ul.payment_methods li { margin: 0 0 12px !important; padding: 0 !important; background: none !important; border: none !important; } .woocommerce-checkout #payment ul.payment_methods li:last-child { margin-bottom: 0 !important; } /* -- Payment Method Cards ----------------------------------- */ .woocommerce-checkout #payment ul.payment_methods li label { display: flex !important; align-items: center; gap: 14px; padding: 18px 20px !important; border: 2px solid var(--bpp-border); border-radius: var(--bpp-radius-sm); cursor: pointer; transition: all var(--bpp-transition); font-family: var(--bpp-font); font-weight: 600; font-size: 15px; color: var(--bpp-dark); background: var(--bpp-surface); position: relative; } .woocommerce-checkout #payment ul.payment_methods li label:hover { border-color: var(--bpp-primary); transform: translateY(-1px); box-shadow: var(--bpp-shadow-md); } .woocommerce-checkout #payment ul.payment_methods li input[type="radio"] { accent-color: var(--bpp-primary); width: 20px; height: 20px; margin: 0 !important; flex-shrink: 0; } /* -- PhonePe Selected State --------------------------------- */ .woocommerce-checkout #payment ul.payment_methods li.bpp-phonepe-active label { border-color: var(--bpp-purple); background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%); box-shadow: 0 0 0 3px rgba(95, 37, 159, 0.1), var(--bpp-shadow-md); } html.bpp-dark-mode .woocommerce-checkout #payment ul.payment_methods li.bpp-phonepe-active label { background: linear-gradient(135deg, #1a0f2e 0%, #2d1b4e 100%); } /* -- COD Selected State ------------------------------------- */ .woocommerce-checkout #payment ul.payment_methods li.bpp-cod-active label { border-color: var(--bpp-amber); background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1), var(--bpp-shadow-md); } html.bpp-dark-mode .woocommerce-checkout #payment ul.payment_methods li.bpp-cod-active label { background: linear-gradient(135deg, #2d1f0a 0%, #3d2a0e 100%); } /* -- Payment Box (Description) ------------------------------ */ .woocommerce-checkout #payment div.payment_box { background: var(--bpp-light) !important; border: 1px solid var(--bpp-border); border-radius: var(--bpp-radius-sm); margin: 10px 0 0 34px; padding: 16px 18px !important; color: var(--bpp-gray); font-family: var(--bpp-font); font-size: 13px; line-height: 1.6; position: relative; } .woocommerce-checkout #payment div.payment_box::before { display: none !important; } /* ═══════════════════════════════════════════════════════════════ CUSTOM PAYMENT BADGES ═══════════════════════════════════════════════════════════════ */ .bpp-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-left: auto; flex-shrink: 0; } .bpp-badge-free { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); color: #065f46; } .bpp-badge-cod { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); color: #92400e; } .bpp-badge-phonepe { background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%); color: var(--bpp-purple); } html.bpp-dark-mode .bpp-badge-free { background: linear-gradient(135deg, #064e3b 0%, #065f46 100%); color: #6ee7b7; } html.bpp-dark-mode .bpp-badge-cod { background: linear-gradient(135deg, #78350f 0%, #92400e 100%); color: #fde68a; } html.bpp-dark-mode .bpp-badge-phonepe { background: linear-gradient(135deg, #3b0764 0%, #4c1d95 100%); color: #c4b5fd; } /* ═══════════════════════════════════════════════════════════════ COD CHARGE BREAKDOWN ═══════════════════════════════════════════════════════════════ */ .bpp-cod-breakdown { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border: 1px solid #f0c36d; border-radius: var(--bpp-radius-sm); padding: 14px 18px; margin: 12px 0 0 34px; font-family: var(--bpp-font); animation: bppSlideDown 0.3s ease-out; } .bpp-cod-breakdown p { margin: 0; font-size: 13px; color: #92400e; line-height: 1.5; } .bpp-cod-breakdown strong { color: #78350f; } html.bpp-dark-mode .bpp-cod-breakdown { background: linear-gradient(135deg, #2d1f0a 0%, #3d2a0e 100%); border-color: #92400e; } html.bpp-dark-mode .bpp-cod-breakdown p { color: #fde68a; } html.bpp-dark-mode .bpp-cod-breakdown strong { color: #fbbf24; } /* ═══════════════════════════════════════════════════════════════ PREPAID PAYMENT NOTE ═══════════════════════════════════════════════════════════════ */ .bpp-prepaid-breakdown { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); border: 1px solid #6ee7b7; border-radius: var(--bpp-radius-sm); padding: 14px 18px; margin: 12px 0 0 34px; font-family: var(--bpp-font); animation: bppSlideDown 0.3s ease-out; } .bpp-prepaid-breakdown p { margin: 0; font-size: 13px; color: #065f46; line-height: 1.5; } .bpp-prepaid-breakdown strong { color: #064e3b; } html.bpp-dark-mode .bpp-prepaid-breakdown { background: linear-gradient(135deg, #0a2e1f 0%, #0f3d2a 100%); border-color: #065f46; } html.bpp-dark-mode .bpp-prepaid-breakdown p { color: #6ee7b7; } html.bpp-dark-mode .bpp-prepaid-breakdown strong { color: #34d399; } @keyframes bppSlideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════════════════════════════════════ ADVANCE PAYMENT NOTE ═══════════════════════════════════════════════════════════════ */ .bpp-advance-note { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border: 1px solid #f0c36d; border-left: 4px solid var(--bpp-amber); border-radius: var(--bpp-radius-sm); padding: 14px 18px 14px 44px; margin: 12px 0; font-family: var(--bpp-font); font-size: 13px; color: #92400e; line-height: 1.6; position: relative; animation: bppSlideDown 0.3s ease-out; } html.bpp-dark-mode .bpp-advance-note { background: linear-gradient(135deg, #2d1f0a 0%, #3d2a0e 100%); border-color: #92400e; border-left-color: var(--bpp-amber); color: #fde68a; } html.bpp-dark-mode .bpp-advance-note strong { color: #fbbf24; } .bpp-advance-note::before { content: '\26A0\FE0F'; position: absolute; left: 14px; top: 14px; font-size: 18px; line-height: 1; } .bpp-advance-note p { margin: 0; } .bpp-advance-note strong { color: #78350f; } /* ═══════════════════════════════════════════════════════════════ PLACE ORDER BUTTON ═══════════════════════════════════════════════════════════════ */ .woocommerce-checkout #payment #place_order { background: linear-gradient(135deg, var(--bpp-primary) 0%, var(--bpp-primary-dark) 100%) !important; color: #fff !important; border: none !important; border-radius: var(--bpp-radius-sm) !important; padding: 14px 28px !important; font-size: 15px !important; font-weight: 700 !important; font-family: var(--bpp-font); letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; transition: all var(--bpp-transition); box-shadow: 0 4px 15px rgba(26, 188, 156, 0.3); width: 100%; position: relative; overflow: hidden; } .woocommerce-checkout #payment #place_order:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(26, 188, 156, 0.4); background: linear-gradient(135deg, #16a085 0%, #148f77 100%) !important; } .woocommerce-checkout #payment #place_order:active { transform: translateY(0); } .woocommerce-checkout #payment #place_order:disabled, .woocommerce-checkout #payment #place_order.disabled { opacity: 0.6 !important; cursor: not-allowed !important; animation: none !important; transform: none !important; box-shadow: none !important; } /* -- Pulse Animation on Place Order when COD Selected ------- */ .bpp-cod-selected #place_order { animation: bppPulse 2s infinite; background: linear-gradient(135deg, var(--bpp-amber) 0%, var(--bpp-amber-dark) 100%) !important; box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3); } .bpp-cod-selected #place_order:hover { box-shadow: 0 8px 30px rgba(245, 158, 11, 0.4); background: linear-gradient(135deg, var(--bpp-amber-dark) 0%, #b45309 100%) !important; } @keyframes bppPulse { 0% { box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3); } 50% { box-shadow: 0 4px 25px rgba(245, 158, 11, 0.5); } 100% { box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3); } } /* ═══════════════════════════════════════════════════════════════ WooCommerce Notices ═══════════════════════════════════════════════════════════════ */ .woocommerce-message, .woocommerce-info { border-top-color: var(--bpp-primary) !important; border-radius: var(--bpp-radius-sm) !important; font-family: var(--bpp-font); box-shadow: var(--bpp-shadow); } .woocommerce-message::before { color: var(--bpp-primary) !important; } .woocommerce-error { border-top-color: var(--bpp-red) !important; border-radius: var(--bpp-radius-sm) !important; font-family: var(--bpp-font); } /* -- Coupon Form -------------------------------------------- */ .woocommerce .coupon .input-text { border: 2px solid var(--bpp-border) !important; border-radius: var(--bpp-radius-sm) !important; padding: 10px 14px !important; font-family: var(--bpp-font); transition: all var(--bpp-transition); } .woocommerce .coupon .input-text:focus { border-color: var(--bpp-primary) !important; box-shadow: 0 0 0 4px rgba(26, 188, 156, 0.12) !important; outline: none; } .woocommerce .coupon button, .woocommerce .coupon .button { background: var(--bpp-dark) !important; color: #fff !important; border: none !important; border-radius: var(--bpp-radius-sm) !important; padding: 10px 20px !important; font-weight: 600 !important; font-family: var(--bpp-font); transition: all var(--bpp-transition); text-transform: uppercase; font-size: 12px !important; letter-spacing: 0.5px; } .woocommerce .coupon button:hover, .woocommerce .coupon .button:hover { background: #334155 !important; transform: translateY(-1px); } html.bpp-dark-mode .woocommerce .coupon button, html.bpp-dark-mode .woocommerce .coupon .button { background: #334155 !important; } html.bpp-dark-mode .woocommerce .coupon button:hover, html.bpp-dark-mode .woocommerce .coupon .button:hover { background: #475569 !important; } /* ═══════════════════════════════════════════════════════════════ PRIVACY POLICY ═══════════════════════════════════════════════════════════════ */ .woocommerce-checkout .woocommerce-privacy-policy-text { font-family: var(--bpp-font); font-size: 12px; color: var(--bpp-gray); padding: 16px 20px; } .woocommerce-checkout .woocommerce-privacy-policy-text a { color: var(--bpp-primary); } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE — TABLET (max-width: 768px) ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .woocommerce table.shop_table thead { display: none; } .woocommerce table.shop_table tbody td { display: block; padding: 10px 16px !important; text-align: right; } .woocommerce table.shop_table tbody td::before { content: attr(data-title); float: left; font-weight: 600; color: var(--bpp-gray); text-transform: uppercase; font-size: 12px; } /* ── Quantity +/- buttons: force inline-flex on mobile ── */ .bpp-qty-wrapper { display: inline-flex !important; align-items: center !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center; min-width: 0; max-width: 130px; } .bpp-qty-btn { width: 34px; height: 34px; font-size: 16px; flex-shrink: 0; } .woocommerce table.shop_table .bpp-qty-wrapper .qty { width: 40px; height: 34px; padding: 6px 0; font-size: 14px; } /* Quantity cell: center the wrapper */ .woocommerce table.shop_table tbody td.product-quantity { text-align: center; } .woocommerce table.shop_table tbody td.product-quantity::before { float: none; display: block; text-align: left; margin-bottom: 6px; } /* Product thumbnail smaller on mobile */ .woocommerce table.shop_table .product-thumbnail img { width: 60px; height: 60px; } .woocommerce .cart_totals { padding: 16px; } .woocommerce .cart_totals h2 { font-size: 17px; margin-bottom: 14px; padding-bottom: 12px; } .woocommerce form.checkout .col-1, .woocommerce form.checkout .col-2 { padding: 16px; margin-bottom: 16px; } .woocommerce-checkout #payment ul.payment_methods { padding: 16px !important; } .woocommerce-checkout #payment ul.payment_methods li label { padding: 12px 14px !important; font-size: 14px; gap: 10px; flex-wrap: wrap; } .bpp-badge { font-size: 10px; padding: 3px 8px; } .woocommerce-checkout #payment #place_order { padding: 14px 20px !important; font-size: 15px !important; } .woocommerce .wc-proceed-to-checkout a.checkout-button { padding: 14px 20px !important; font-size: 15px !important; } .bpp-advance-note { padding: 10px 14px 10px 38px; font-size: 12px; } .bpp-advance-note::before { left: 10px; top: 10px; font-size: 16px; } .bpp-cod-breakdown { padding: 10px 14px; margin: 10px 0 0 0; font-size: 12px; } .bpp-cod-breakdown p { font-size: 12px; } .bpp-prepaid-breakdown { padding: 10px 14px; margin: 10px 0 0 0; font-size: 12px; } .bpp-prepaid-breakdown p { font-size: 12px; } /* Breakdown cards compact on mobile */ .bpp-breakdown-card { padding: 14px 16px; } .bpp-breakdown-title { font-size: 13px; } .bpp-breakdown-body { padding: 10px 12px; } .bpp-breakdown-table { font-size: 12px; } .bpp-breakdown-footer { font-size: 11px; } /* Update cart button full width on mobile */ .woocommerce button[name="update_cart"], .woocommerce input[name="update_cart"] { width: 100%; text-align: center; } /* Shipping methods compact */ .woocommerce ul#shipping_method li label { padding: 10px 12px; font-size: 13px; gap: 8px; } /* Checkout form fields tighter */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { padding: 10px 12px !important; font-size: 14px; } /* Order review table compact */ .woocommerce-checkout .woocommerce-checkout-review-order-table td, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td { padding: 10px 12px !important; font-size: 13px; } .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th, .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td { font-size: 16px !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total .amount { font-size: 18px; } .woocommerce .cart_totals .order-total th, .woocommerce .cart_totals .order-total td { font-size: 16px; padding-top: 14px !important; } .woocommerce .cart_totals .order-total .amount { font-size: 18px; } } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE — NARROW MOBILE (max-width: 480px) ═══════════════════════════════════════════════════════════════ */ @media (max-width: 480px) { /* Cart table: card-style layout for each product row */ .woocommerce table.shop_table { border-radius: var(--bpp-radius-sm) !important; } .woocommerce table.shop_table tbody tr { display: block; margin-bottom: 12px; border: 1px solid var(--bpp-border); border-radius: var(--bpp-radius-sm); overflow: hidden; background: var(--bpp-surface); box-shadow: var(--bpp-shadow); } .woocommerce table.shop_table tbody td { padding: 8px 12px !important; font-size: 13px; border-bottom: 1px solid var(--bpp-border) !important; } .woocommerce table.shop_table tbody tr:last-child td { border-bottom: 1px solid var(--bpp-border) !important; } .woocommerce table.shop_table tbody td:last-child { border-bottom: none !important; } /* Hide thumbnail on very narrow screens to save space */ .woocommerce table.shop_table .product-thumbnail { display: none; } /* Product name: full width, left aligned */ .woocommerce table.shop_table tbody td.product-name { text-align: left; font-size: 14px; font-weight: 600; background: var(--bpp-light); padding: 10px 12px !important; } .woocommerce table.shop_table tbody td.product-name::before { display: none; } /* Quantity wrapper: centered, compact */ .bpp-qty-wrapper { max-width: 110px; } .bpp-qty-btn { width: 30px; height: 30px; font-size: 15px; } .woocommerce table.shop_table .bpp-qty-wrapper .qty { width: 36px; height: 30px; font-size: 13px; } /* Remove button: smaller */ .woocommerce table.shop_table .product-remove a.remove { font-size: 18px; width: 28px; height: 28px; line-height: 28px; } /* Cart totals: tighter */ .woocommerce .cart_totals { padding: 12px; border-radius: var(--bpp-radius-sm); } .woocommerce .cart_totals h2 { font-size: 15px; margin-bottom: 10px; padding-bottom: 8px; } .woocommerce .cart_totals table th, .woocommerce .cart_totals table td { padding: 10px 8px !important; font-size: 13px; } .woocommerce .cart_totals .order-total th, .woocommerce .cart_totals .order-total td { font-size: 15px; } .woocommerce .cart_totals .order-total .amount { font-size: 17px; } /* Checkout form: compact */ .woocommerce form.checkout .col-1, .woocommerce form.checkout .col-2 { padding: 12px; margin-bottom: 12px; border-radius: var(--bpp-radius-sm); } .woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, .woocommerce-additional-fields h3 { font-size: 16px; margin-bottom: 16px; padding-bottom: 10px; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { padding: 10px 10px !important; font-size: 14px; } .woocommerce form .form-row label { font-size: 12px; margin-bottom: 4px; } /* Payment methods: compact cards */ .woocommerce-checkout #payment { border-radius: var(--bpp-radius-sm) !important; } .woocommerce-checkout #payment ul.payment_methods { padding: 12px !important; } .woocommerce-checkout #payment ul.payment_methods li { margin-bottom: 8px !important; } .woocommerce-checkout #payment ul.payment_methods li label { padding: 10px 12px !important; font-size: 13px; gap: 8px; } .woocommerce-checkout #payment ul.payment_methods li input[type="radio"] { width: 16px; height: 16px; } .woocommerce-checkout #payment div.payment_box { margin: 8px 0 0 28px; padding: 10px 12px !important; font-size: 12px; } .bpp-badge { font-size: 9px; padding: 2px 6px; border-radius: 12px; } /* COD breakdown compact */ .bpp-cod-breakdown { padding: 8px 10px; margin: 8px 0 0 0; border-radius: 6px; } .bpp-cod-breakdown p { font-size: 11px; line-height: 1.4; } .bpp-prepaid-breakdown { padding: 8px 10px; margin: 8px 0 0 0; border-radius: 6px; } .bpp-prepaid-breakdown p { font-size: 11px; line-height: 1.4; } /* Breakdown cards: narrow mobile */ .bpp-breakdown-card { padding: 12px; border-radius: 8px; } .bpp-breakdown-header { gap: 8px; margin-bottom: 8px; } .bpp-breakdown-icon { font-size: 16px; } .bpp-breakdown-title { font-size: 12px; line-height: 1.3; } .bpp-breakdown-body { padding: 8px 10px; border-radius: 6px; } .bpp-breakdown-table { font-size: 11px; } .bpp-breakdown-label, .bpp-breakdown-value { padding: 4px 0; } .bpp-breakdown-footer { font-size: 10px; line-height: 1.4; } /* Advance note compact */ .bpp-advance-note { padding: 8px 10px 8px 32px; font-size: 11px; margin: 8px 0; border-radius: 6px; } .bpp-advance-note::before { left: 8px; top: 8px; font-size: 14px; } /* Place order button: prominent, full width, larger tap target */ .woocommerce-checkout #payment #place_order { padding: 16px 20px !important; font-size: 15px !important; border-radius: 10px !important; letter-spacing: 0.8px; } /* Proceed to checkout: full width, larger tap target */ .woocommerce .wc-proceed-to-checkout a.checkout-button { padding: 16px 20px !important; font-size: 15px !important; border-radius: 10px !important; } /* Update cart button */ .woocommerce button[name="update_cart"], .woocommerce input[name="update_cart"] { padding: 10px 16px !important; font-size: 11px !important; width: 100%; text-align: center; } /* Shipping methods: compact */ .woocommerce ul#shipping_method li label { padding: 8px 10px; font-size: 12px; gap: 6px; } .woocommerce ul#shipping_method li input[type="radio"] { width: 16px; height: 16px; } /* Order review table compact */ .woocommerce-checkout #order_review_heading { font-size: 16px; margin-bottom: 12px; padding-bottom: 10px; } .woocommerce-checkout .woocommerce-checkout-review-order-table thead th { padding: 10px 10px !important; font-size: 11px; } .woocommerce-checkout .woocommerce-checkout-review-order-table td, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td { padding: 8px 10px !important; font-size: 12px; } .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th, .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td { font-size: 14px !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total .amount { font-size: 16px; } /* Coupon form: stack on narrow */ .woocommerce .coupon { display: flex; flex-direction: column; gap: 8px; } .woocommerce .coupon .input-text { width: 100% !important; max-width: 100% !important; } .woocommerce .coupon button, .woocommerce .coupon .button { width: 100%; text-align: center; } /* Select2 compact */ .woocommerce .select2-container--default .select2-selection--single { height: 42px !important; padding: 6px 10px; } .woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 28px; font-size: 14px; } .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; } /* Privacy policy text */ .woocommerce-checkout .woocommerce-privacy-policy-text { padding: 10px 12px; font-size: 11px; } /* Page title */ .woocommerce-cart .entry-title, .woocommerce-checkout .entry-title { font-size: 22px; margin-bottom: 16px; } } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE — EXTRA NARROW (max-width: 360px) ═══════════════════════════════════════════════════════════════ */ @media (max-width: 360px) { .woocommerce table.shop_table tbody td { padding: 6px 10px !important; font-size: 12px; } .woocommerce table.shop_table tbody td.product-name { font-size: 13px; padding: 8px 10px !important; } .bpp-qty-wrapper { max-width: 100px; } .bpp-qty-btn { width: 28px; height: 28px; font-size: 14px; } .woocommerce table.shop_table .bpp-qty-wrapper .qty { width: 32px; height: 28px; font-size: 12px; } .woocommerce .cart_totals { padding: 10px; } .woocommerce .cart_totals table th, .woocommerce .cart_totals table td { padding: 8px 6px !important; font-size: 12px; } .woocommerce-checkout #payment ul.payment_methods li label { padding: 8px 10px !important; font-size: 12px; } .bpp-badge { font-size: 8px; padding: 2px 5px; } .bpp-breakdown-title { font-size: 11px; } .bpp-breakdown-table { font-size: 10px; } .bpp-breakdown-footer { font-size: 9px; } .woocommerce-checkout #payment #place_order { padding: 14px 16px !important; font-size: 14px !important; } .woocommerce .wc-proceed-to-checkout a.checkout-button { padding: 14px 16px !important; font-size: 14px !important; } } /* ═══════════════════════════════════════════════════════════════ DESKTOP ENHANCEMENTS (min-width: 1024px) ═══════════════════════════════════════════════════════════════ */ @media (min-width: 1024px) { /* Ensure cart table has comfortable spacing on desktop */ .woocommerce table.shop_table tbody td { padding: 20px 24px !important; } .woocommerce table.shop_table thead th { padding: 16px 24px !important; } /* Cart totals sidebar: comfortable width */ .woocommerce .cart_totals { padding: 32px; } /* Checkout columns: comfortable spacing */ .woocommerce form.checkout .col-1, .woocommerce form.checkout .col-2 { padding: 32px; } /* Payment method labels: comfortable */ .woocommerce-checkout #payment ul.payment_methods li label { padding: 20px 24px !important; } } /* ═══════════════════════════════════════════════════════════════ LOADING OVERLAY (for AJAX updates) ═══════════════════════════════════════════════════════════════ */ .woocommerce .blockUI.blockOverlay { background: rgba(255, 255, 255, 0.7) !important; opacity: 1 !important; } html.bpp-dark-mode .woocommerce .blockUI.blockOverlay { background: rgba(15, 23, 42, 0.7) !important; } .woocommerce .blockUI.blockOverlay::after { content: ''; display: block; width: 40px; height: 40px; border: 3px solid var(--bpp-border); border-top-color: var(--bpp-primary); border-radius: 50%; position: absolute; top: 50%; left: 50%; margin: -20px 0 0 -20px; animation: bppSpin 0.6s linear infinite; } @keyframes bppSpin { to { transform: rotate(360deg); } } /* ═══════════════════════════════════════════════════════════════ CART SUMMARY TITLE (above cart table) ═══════════════════════════════════════════════════════════════ */ .woocommerce-cart .entry-title, .woocommerce-checkout .entry-title { font-family: var(--bpp-font); font-weight: 800; font-size: 28px; color: var(--bpp-dark); margin-bottom: 24px; } /* ═══════════════════════════════════════════════════════════════ BREAKDOWN CARDS (Cart Page – Prepaid & COD) Uses CSS classes instead of inline styles for dark mode support ═══════════════════════════════════════════════════════════════ */ .bpp-breakdown-card { border-radius: 12px; padding: 18px 20px; margin-top: 10px; font-family: var(--bpp-font); animation: bppSlideDown 0.3s ease-out; } .bpp-breakdown-prepaid { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); border: 2px solid #6ee7b7; } .bpp-breakdown-cod { background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%); border: 2px solid #f0c36d; } .bpp-breakdown-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .bpp-breakdown-icon { font-size: 20px; flex-shrink: 0; } .bpp-breakdown-title { font-size: 15px; } .bpp-breakdown-title--prepaid { color: #065f46; } .bpp-breakdown-title--cod { color: #856404; } .bpp-breakdown-body { background: var(--bpp-card-bg); border-radius: 8px; padding: 12px 16px; margin-bottom: 10px; } .bpp-breakdown-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--bpp-text-secondary); } .bpp-breakdown-label { padding: 6px 0; color: var(--bpp-text-muted); } .bpp-breakdown-value { padding: 6px 0; text-align: right; font-weight: 600; } .bpp-breakdown-row-border { border-top: 1px dashed var(--bpp-table-border); } .bpp-breakdown-footer { font-size: 12px; margin: 0; line-height: 1.5; } .bpp-breakdown-footer--prepaid { color: #065f46; } .bpp-breakdown-footer--cod { color: #664d03; } /* Breakdown value color helpers */ .bpp-color-green { color: #065f46; font-weight: 700; } .bpp-color-green-dark { color: #27ae60; font-weight: 700; } .bpp-color-orange { color: #e67e22; font-weight: 600; } .bpp-color-red { color: #d35400; font-weight: 700; } .bpp-color-dark { color: var(--bpp-text-primary); } /* ── Dark Mode Overrides for Breakdown Cards ── */ html.bpp-dark-mode .bpp-breakdown-prepaid { background: linear-gradient(135deg, #0a2e1f 0%, #0f3d2a 100%); border-color: #065f46; } html.bpp-dark-mode .bpp-breakdown-cod { background: linear-gradient(135deg, #2d1f0a 0%, #3d2a0e 100%); border-color: #92400e; } html.bpp-dark-mode .bpp-breakdown-title--prepaid { color: #6ee7b7; } html.bpp-dark-mode .bpp-breakdown-title--cod { color: #fde68a; } html.bpp-dark-mode .bpp-breakdown-footer--prepaid { color: #6ee7b7; } html.bpp-dark-mode .bpp-breakdown-footer--cod { color: #fde68a; } html.bpp-dark-mode .bpp-color-green { color: #6ee7b7; } html.bpp-dark-mode .bpp-color-green-dark { color: #34d399; } html.bpp-dark-mode .bpp-color-orange { color: #fbbf24; } html.bpp-dark-mode .bpp-color-red { color: #f97316; }