/* ========================================================= MEHFARO PURCHASE FLOW V2 - CART / CHAT FINAL FIX ========================================================= */ #cartDrawer.mf-purchase-flow-v2 { display: flex !important; flex-direction: column !important; height: 100dvh !important; overflow: hidden !important; } #cartDrawer.mf-purchase-flow-v2 .cart-header, #cartDrawer.mf-purchase-flow-v2 #mfPurchaseTabs { flex: 0 0 auto !important; } /* ========================================================= CART TAB ========================================================= */ #cartDrawer.mf-purchase-view-cart #cartItems { display: block !important; flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; overflow-x: hidden !important; } /* Empty message only when cart really has no product */ #cartDrawer.mf-purchase-view-cart:has(#cartItems .cart-item) #emptyCart { display: none !important; } #cartDrawer.mf-purchase-view-cart:not(:has(#cartItems .cart-item)) #emptyCart { display: block !important; flex: 1 1 auto !important; } /* Subtotal + Proceed button always at bottom */ #cartDrawer.mf-purchase-view-cart .cart-summary { display: block !important; flex: 0 0 auto !important; margin-top: auto !important; position: relative !important; inset: auto !important; z-index: 20 !important; background: #ffffff !important; border-top: 2px solid #178f84 !important; } /* ========================================================= CHAT TAB NO CART CONTENT HERE ========================================================= */ #cartDrawer.mf-purchase-view-chat #cartItems, #cartDrawer.mf-purchase-view-chat #emptyCart, #cartDrawer.mf-purchase-view-chat .cart-summary { display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* Chat gets all remaining space */ #cartDrawer.mf-purchase-view-chat #mfUnifiedCartChat, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock { flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; } /* Composer stays at bottom */ #cartDrawer.mf-purchase-view-chat .mf-order-chat-form, #cartDrawer.mf-purchase-view-chat .mf-unified-chat-composer { flex: 0 0 auto !important; } /* ========================================================= CART TAB - REMOVE OUTER CURRENT CART BOX ========================================================= */ #cartDrawer.mf-purchase-view-cart #cartItems { width: 100% !important; margin: 0 !important; padding: 8px 10px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; max-height: none !important; min-height: 0 !important; flex: 1 1 auto !important; overflow-y: auto !important; overflow-x: hidden !important; } /* Current Cart heading simple rakho - box nahi */ #cartDrawer.mf-purchase-view-cart #cartItems::before { position: static !important; display: block !important; margin: 0 0 7px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: #17343a !important; font-size: 13px !important; font-weight: 800 !important; } /* Individual product rows full width */ #cartDrawer.mf-purchase-view-cart #cartItems .cart-item { width: 100% !important; margin: 0 0 7px !important; box-sizing: border-box !important; } /* Bottom subtotal area clean */ #cartDrawer.mf-purchase-view-cart .cart-summary { margin: 0 !important; padding: 8px 10px 10px !important; border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* ========================================================= CHAT - ORDER TABLE + TEXT READABILITY ========================================================= */ /* Main headings */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock h3, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock h4, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-title { font-size: 13px !important; line-height: 1.35 !important; font-weight: 800 !important; } /* Order table headings + values */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock table th, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock table td { font-size: 13px !important; line-height: 1.35 !important; } /* Product / delivery detail text */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-card, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-card *, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-delivery-details, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-delivery-details * { font-size: 13px !important; line-height: 1.35 !important; } /* Chat message actual text */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-bubble > p { font-size: 13px !important; line-height: 1.45 !important; margin: 0 !important; padding: 0 !important; text-align: left !important; text-indent: 0 !important; } /* Timestamps / ticks chote hi */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-bubble > small { font-size: 9px !important; line-height: 1 !important; } /* Order number bhi readable */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-number { font-size: 11px !important; } /* Delivery labels/values */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock strong, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock td strong { font-size: 13px !important; } /* ========================================================= MEHFARO V2 FINAL CART RESET ========================================================= */ /* Cart itself is already the container. No second Current Cart box needed. */ #cartDrawer.mf-purchase-flow-v2.mf-purchase-view-cart #cartItems { flex: 1 1 auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 8px 10px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow-y: auto !important; overflow-x: hidden !important; } /* Remove old Current Cart heading */ #cartDrawer.mf-purchase-flow-v2.mf-purchase-view-cart #cartItems::before { display: none !important; content: none !important; } /* Products become clean full-width rows */ #cartDrawer.mf-purchase-flow-v2.mf-purchase-view-cart #cartItems .cart-item { width: 100% !important; margin: 0 !important; padding: 9px 4px !important; border: 0 !important; border-bottom: 1px solid #e4e9e7 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* Bottom checkout remains separate */ #cartDrawer.mf-purchase-flow-v2.mf-purchase-view-cart .cart-summary { flex: 0 0 auto !important; width: 100% !important; margin: 0 !important; padding: 9px 10px 10px !important; border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important; } /* ========================================================= READ-ONLY ORDER CARD ========================================================= */ #cartDrawer.mf-purchase-view-chat .mf-order-chat-card { margin: 7px 8px !important; padding: 9px !important; border-radius: 12px !important; box-sizing: border-box !important; } /* Your Order / Delivery Details */ #cartDrawer.mf-purchase-view-chat .mf-order-chat-card-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; margin-bottom: 8px !important; } #cartDrawer.mf-purchase-view-chat .mf-order-chat-card-head h3 { margin: 0 !important; font-size: 14px !important; line-height: 1.3 !important; font-weight: 800 !important; color: #17343a !important; } /* Order number */ #cartDrawer.mf-purchase-view-chat .mf-order-chat-order-number { display: inline-flex !important; align-items: center !important; padding: 4px 7px !important; border-radius: 8px !important; background: #eef6f4 !important; color: #176d67 !important; font-size: 11px !important; line-height: 1.2 !important; font-weight: 800 !important; white-space: nowrap !important; } /* ========================================================= ORDER PRODUCT TABLE ========================================================= */ #cartDrawer.mf-purchase-view-chat .mf-order-chat-table-wrap { width: 100% !important; overflow-x: auto !important; } #cartDrawer.mf-purchase-view-chat .mf-order-chat-table { width: 100% !important; border-collapse: collapse !important; table-layout: auto !important; } #cartDrawer.mf-purchase-view-chat .mf-order-chat-table th { padding: 7px 6px !important; font-size: 12px !important; line-height: 1.3 !important; font-weight: 800 !important; color: #18342d !important; text-align: left !important; white-space: nowrap !important; } #cartDrawer.mf-purchase-view-chat .mf-order-chat-table td { padding: 8px 6px !important; font-size: 13px !important; line-height: 1.35 !important; color: #203331 !important; vertical-align: middle !important; } /* Product name */ #cartDrawer.mf-purchase-view-chat .mf-order-chat-product-name { display: block !important; font-size: 13px !important; line-height: 1.3 !important; font-weight: 800 !important; } /* SKU stays secondary */ #cartDrawer.mf-purchase-view-chat .mf-order-chat-product-sku { display: block !important; margin-top: 2px !important; font-size: 9px !important; color: #788481 !important; } /* Quantity = number only */ #cartDrawer.mf-purchase-view-chat .mf-order-chat-qty-value { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 28px !important; height: 28px !important; padding: 0 6px !important; border-radius: 14px !important; background: #eef6f4 !important; font-size: 13px !important; font-weight: 800 !important; color: #173d39 !important; } /* Price always readable */ #cartDrawer.mf-purchase-view-chat .mf-order-chat-table th:last-child, #cartDrawer.mf-purchase-view-chat .mf-order-chat-table td:last-child { min-width: 72px !important; white-space: nowrap !important; } #cartDrawer.mf-purchase-view-chat .mf-order-chat-table td:last-child strong { font-size: 13px !important; font-weight: 800 !important; } /* ========================================================= TOTALS ========================================================= */ #cartDrawer.mf-purchase-view-chat .mf-order-chat-summary { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; margin-top: 7px !important; } #cartDrawer.mf-purchase-view-chat .mf-order-chat-summary > div { padding: 7px !important; } #cartDrawer.mf-purchase-view-chat .mf-order-chat-summary span { display: block !important; margin-bottom: 3px !important; font-size: 11px !important; line-height: 1.2 !important; color: #687572 !important; } #cartDrawer.mf-purchase-view-chat .mf-order-chat-summary strong { font-size: 13px !important; line-height: 1.25 !important; font-weight: 800 !important; } /* ========================================================= DELIVERY DETAILS ========================================================= */ #cartDrawer.mf-purchase-view-chat .mf-order-chat-address-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; } #cartDrawer.mf-purchase-view-chat .mf-order-chat-address-grid > div { min-width: 0 !important; padding: 8px !important; border-radius: 8px !important; background: #f7faf9 !important; } #cartDrawer.mf-purchase-view-chat .mf-order-chat-address-grid > .full { grid-column: 1 / -1 !important; } #cartDrawer.mf-purchase-view-chat .mf-order-chat-address-grid span { display: block !important; margin-bottom: 3px !important; font-size: 11px !important; line-height: 1.2 !important; font-weight: 700 !important; color: #6c7775 !important; } #cartDrawer.mf-purchase-view-chat .mf-order-chat-address-grid strong, #cartDrawer.mf-purchase-view-chat .mf-order-chat-address-grid p { display: block !important; width: 100% !important; margin: 0 !important; font-size: 13px !important; line-height: 1.4 !important; font-weight: 700 !important; color: #1d302e !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere !important; } /* Legacy confirm/cancel/action bar must never appear */ #cartDrawer.mf-purchase-view-chat .mf-order-chat-actions { display: none !important; } /* ========================================================= CHAT TEXT ========================================================= */ #cartDrawer.mf-purchase-view-chat .mf-order-chat-bubble > p { margin: 0 !important; padding: 0 !important; font-size: 13px !important; line-height: 1.45 !important; text-align: left !important; text-indent: 0 !important; } /* Time/ticks remain small */ #cartDrawer.mf-purchase-view-chat .mf-order-chat-bubble > small { font-size: 9px !important; } /* ========================================================= FINAL CART SHELL REMOVAL Cart itself is the container - no inner table/box ========================================================= */ #cartDrawer.mf-purchase-view-cart #cartItems, #cartDrawer.mf-purchase-view-cart .cart-items, #cartDrawer.mf-purchase-view-cart .cart-items-list, #cartDrawer.mf-purchase-view-cart .cart-items-container { border: 0 !important; outline: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; margin: 0 !important; width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; } /* Main product area */ #cartDrawer.mf-purchase-view-cart #cartItems { flex: 1 1 auto !important; padding: 8px 10px !important; overflow-y: auto !important; overflow-x: hidden !important; } /* Remove decoration from any old wrapper INSIDE cartItems */ #cartDrawer.mf-purchase-view-cart #cartItems > :not(.cart-item) { border: 0 !important; outline: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: none !important; } /* Individual product rows remain clean */ #cartDrawer.mf-purchase-view-cart #cartItems .cart-item { width: 100% !important; margin: 0 !important; padding: 10px 4px !important; border: 0 !important; border-bottom: 1px solid #dfe7e4 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; box-sizing: border-box !important; } /* Last product doesn't need bottom line */ #cartDrawer.mf-purchase-view-cart #cartItems .cart-item:last-child { border-bottom: 0 !important; } /* Cart must never show order chat content */ #cartDrawer.mf-purchase-view-cart #mfUnifiedCartChat, #cartDrawer.mf-purchase-view-cart #mfUnifiedOrderChatDock { display: none !important; } /* CHAT keeps its own full-height layout */ #cartDrawer.mf-purchase-flow-v2.mf-purchase-view-chat { display: flex !important; flex-direction: column !important; height: 100dvh !important; overflow: hidden !important; } #cartDrawer.mf-purchase-view-chat #cartItems, #cartDrawer.mf-purchase-view-chat #emptyCart, #cartDrawer.mf-purchase-view-chat .cart-summary { display: none !important; } /* ========================================================= FINAL CART - REMOVE LEGACY ACTIVE-ORDER BOX ========================================================= */ #cartDrawer.mf-purchase-view-cart:has(#mfUnifiedOrderChatDock) #cartItems:has(.cart-item) { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 10px 12px !important; background: transparent !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } /* Remove old Current Cart heading generated by legacy CSS */ #cartDrawer.mf-purchase-view-cart:has(#mfUnifiedOrderChatDock) #cartItems:has(.cart-item)::before { display: none !important; content: none !important; } /* Legacy active-order subtotal box bhi normal karo */ #cartDrawer.mf-purchase-view-cart:has(#mfUnifiedOrderChatDock):has(#cartItems .cart-item) .cart-summary { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 10px 12px 14px !important; border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-radius: 0 !important; box-sizing: border-box !important; } /* ===== MEHFARO CHAT FULL PAGE FINAL ===== */ #cartDrawer.mf-purchase-flow-v2.mf-purchase-view-chat { display: flex !important; flex-direction: column !important; height: 100dvh !important; max-height: 100dvh !important; overflow: hidden !important; } #cartDrawer.mf-purchase-view-chat .cart-header, #cartDrawer.mf-purchase-view-chat #mfPurchaseTabs { flex: 0 0 auto !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedCartChat.mf-active-order-chat { display: flex !important; flex-direction: column !important; flex: 1 1 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedCartChat.mf-active-order-chat > .mf-unified-chat-head { display: none !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock { display: flex !important; flex-direction: column !important; flex: 1 1 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; box-shadow: none !important; } #cartDrawer.mf-purchase-view-chat #mehfaroOrderChatRoot.mf-order-chat-docked { display: flex !important; flex-direction: column !important; flex: 1 1 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-overlay { position: static !important; inset: auto !important; display: flex !important; flex-direction: column !important; flex: 1 1 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: transparent !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-shell, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-layout { display: flex !important; flex-direction: column !important; flex: 1 1 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-header, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-conversation-head { display: none !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-right { display: flex !important; flex-direction: column !important; flex: 1 1 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; border-radius: 0 !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-messages { flex: 1 1 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 8px 10px !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-form { flex: 0 0 auto !important; position: relative !important; bottom: auto !important; width: 100% !important; margin: 0 !important; z-index: 20 !important; } /* ===== CHAT MODE - KILL HIDDEN CART SPACE FINAL ===== */ #cartDrawer.mf-purchase-flow-v2.mf-purchase-view-chat:has(#mfUnifiedOrderChatDock) > #cartItems, #cartDrawer.mf-purchase-flow-v2.mf-purchase-view-chat:has(#mfUnifiedOrderChatDock) > #emptyCart, #cartDrawer.mf-purchase-flow-v2.mf-purchase-view-chat:has(#mfUnifiedOrderChatDock) > .cart-summary { display: none !important; visibility: hidden !important; flex: 0 0 0 !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; max-width: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; overflow: hidden !important; } /* ===== MEHFARO CHAT RESPONSIVE FINAL FIT ===== */ #cartDrawer.mf-purchase-flow-v2.mf-purchase-view-chat { display: flex !important; flex-direction: column !important; width: min(520px, 100%) !important; height: 100dvh !important; max-height: 100dvh !important; overflow: hidden !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedCartChat, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock, #cartDrawer.mf-purchase-view-chat #mehfaroOrderChatRoot, #cartDrawer.mf-purchase-view-chat .mf-order-chat-overlay, #cartDrawer.mf-purchase-view-chat .mf-order-chat-shell, #cartDrawer.mf-purchase-view-chat .mf-order-chat-layout, #cartDrawer.mf-purchase-view-chat .mf-order-chat-right { width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedCartChat { flex: 1 1 0 !important; min-height: 0 !important; overflow: hidden !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock, #cartDrawer.mf-purchase-view-chat #mehfaroOrderChatRoot, #cartDrawer.mf-purchase-view-chat .mf-order-chat-overlay, #cartDrawer.mf-purchase-view-chat .mf-order-chat-shell, #cartDrawer.mf-purchase-view-chat .mf-order-chat-layout, #cartDrawer.mf-purchase-view-chat .mf-order-chat-right { flex: 1 1 0 !important; height: 100% !important; min-height: 0 !important; overflow: hidden !important; } /* yellow line ke bilkul neeche se content */ #cartDrawer.mf-purchase-view-chat .mf-order-chat-messages { flex: 1 1 0 !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 8px 10px !important; overflow-y: auto !important; overflow-x: hidden !important; box-sizing: border-box !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; } /* first Order Card/message ke upar bhi koi gap nahi */ #cartDrawer.mf-purchase-view-chat .mf-order-chat-messages > :first-child { margin-top: 0 !important; } /* composer always bottom */ #cartDrawer.mf-purchase-view-chat .mf-order-chat-form { flex: 0 0 auto !important; width: 100% !important; margin: 0 !important; padding: 7px 7px calc(7px + env(safe-area-inset-bottom)) !important; box-sizing: border-box !important; } /* Mobile / tablet full width */ @media (max-width: 620px) { #cartDrawer.mf-purchase-flow-v2 { width: 100% !important; max-width: 100% !important; } } /* fallback for older browsers */ @supports not (height: 100dvh) { #cartDrawer.mf-purchase-flow-v2.mf-purchase-view-chat { height: 100vh !important; max-height: 100vh !important; } } /* ===== MEHFARO CHAT ZERO TOP GAP - FINAL ===== */ #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-right > .mf-order-chat-actions, #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-conversation-head { display: none !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-right { justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; } #cartDrawer.mf-purchase-view-chat #mfUnifiedOrderChatDock .mf-order-chat-messages { margin: 0 !important; padding-top: 0 !important; width: 100% !important; min-height: 0 !important; box-sizing: border-box !important; } /* ========================================================= MEHFARO STORE THEME — CART + CHAT ========================================================= */ #cartDrawer.mf-purchase-flow-v2 { --mf-dark: #0f1f24; --mf-dark-2: #152b31; --mf-gold: #d89a1d; --mf-gold-soft: #f6e2ac; --mf-teal: #1f9a90; --mf-teal-2: #13766f; --mf-cream: #fff9ef; --mf-cream-2: #f8f1e3; --mf-border: #e8d2a0; --mf-text: #16242b; --mf-muted: #6e6a61; --mf-white: #ffffff; --mf-shadow: 0 10px 24px rgba(15, 31, 36, 0.10); background: linear-gradient(180deg, var(--mf-cream) 0%, var(--mf-cream-2) 100%) !important; color: var(--mf-text) !important; } /* ===== Header ===== */ #cartDrawer.mf-purchase-flow-v2 .cart-header { background: linear-gradient(135deg, var(--mf-dark) 0%, var(--mf-dark-2) 100%) !important; border-bottom: 1px solid rgba(216,154,29,0.25) !important; box-shadow: 0 10px 24px rgba(15, 31, 36, 0.16) !important; } #cartDrawer.mf-purchase-flow-v2 .cart-header h2, #cartDrawer.mf-purchase-flow-v2 .cart-header .cart-title, #cartDrawer.mf-purchase-flow-v2 .cart-header .drawer-title { color: #ffffff !important; font-weight: 800 !important; letter-spacing: -0.02em !important; } #cartDrawer.mf-purchase-flow-v2 .cart-header .cart-subtitle, #cartDrawer.mf-purchase-flow-v2 .cart-header .shopping-bag-label, #cartDrawer.mf-purchase-flow-v2 .cart-header .section-kicker, #cartDrawer.mf-purchase-flow-v2 .cart-header small { color: var(--mf-gold-soft) !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; font-weight: 700 !important; } #cartDrawer.mf-purchase-flow-v2 .cart-close, #cartDrawer.mf-purchase-flow-v2 .close-cart { background: rgba(255,255,255,0.10) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 14px !important; } /* ===== Tabs ===== */ #cartDrawer.mf-purchase-flow-v2 #mfPurchaseTabs { background: #fff6e8 !important; border-bottom: 1px solid var(--mf-border) !important; padding: 6px 8px !important; } #cartDrawer.mf-purchase-flow-v2 #mfPurchaseTabs button, #cartDrawer.mf-purchase-flow-v2 #mfPurchaseTabs .tab-btn, #cartDrawer.mf-purchase-flow-v2 #mfPurchaseTabs .mf-purchase-tab { background: #ffffff !important; color: var(--mf-dark) !important; border: 1px solid var(--mf-border) !important; border-radius: 14px !important; font-weight: 700 !important; box-shadow: none !important; } #cartDrawer.mf-purchase-flow-v2 #mfPurchaseTabs button.active, #cartDrawer.mf-purchase-flow-v2 #mfPurchaseTabs .tab-btn.active, #cartDrawer.mf-purchase-flow-v2 #mfPurchaseTabs .mf-purchase-tab.active, #cartDrawer.mf-purchase-flow-v2 #mfPurchaseTabs button[aria-selected="true"] { background: linear-gradient(135deg, var(--mf-teal) 0%, var(--mf-teal-2) 100%) !important; color: #ffffff !important; border-color: rgba(216,154,29,0.45) !important; box-shadow: 0 8px 20px rgba(31,154,144,0.18) !important; } /* ===== Cart items ===== */ #cartDrawer.mf-purchase-flow-v2 #cartItems { background: transparent !important; } #cartDrawer.mf-purchase-flow-v2 #cartItems .cart-item { background: rgba(255,255,255,0.78) !important; border: 1px solid var(--mf-border) !important; border-radius: 18px !important; box-shadow: var(--mf-shadow) !important; padding: 14px !important; margin-bottom: 14px !important; } #cartDrawer.mf-purchase-flow-v2 #cartItems .cart-item img, #cartDrawer.mf-purchase-flow-v2 #cartItems .cart-item .item-thumb, #cartDrawer.mf-purchase-flow-v2 #cartItems .cart-item .item-initials { border-radius: 14px !important; border: 1px solid rgba(216,154,29,0.22) !important; } #cartDrawer.mf-purchase-flow-v2 #cartItems .cart-item h3, #cartDrawer.mf-purchase-flow-v2 #cartItems .cart-item .item-name, #cartDrawer.mf-purchase-flow-v2 #cartItems .cart-item .product-title { color: var(--mf-dark) !important; font-weight: 800 !important; } #cartDrawer.mf-purchase-flow-v2 #cartItems .cart-item .item-price, #cartDrawer.mf-purchase-flow-v2 #cartItems .cart-item .price { color: var(--mf-gold) !important; font-weight: 800 !important; } #cartDrawer.mf-purchase-flow-v2 #cartItems .cart-item .item-variant, #cartDrawer.mf-purchase-flow-v2 #cartItems .cart-item .variant, #cartDrawer.mf-purchase-flow-v2 #cartItems .cart-item .meta, #cartDrawer.mf-purchase-flow-v2 #cartItems .cart-item small { color: var(--mf-teal-2) !important; font-weight: 600 !important; } #cartDrawer.mf-purchase-flow-v2 #cartItems .qty-control, #cartDrawer.mf-purchase-flow-v2 #cartItems .quantity-controls, #cartDrawer.mf-purchase-flow-v2 #cartItems .cart-qty { background: #fffdf8 !important; border: 1px solid var(--mf-border) !important; border-radius: 999px !important; box-shadow: none !important; } #cartDrawer.mf-purchase-flow-v2 #cartItems .qty-control button, #cartDrawer.mf-purchase-flow-v2 #cartItems .quantity-controls button, #cartDrawer.mf-purchase-flow-v2 #cartItems .cart-qty button { background: transparent !important; color: var(--mf-dark) !important; border: 0 !important; font-weight: 800 !important; } #cartDrawer.mf-purchase-flow-v2 #cartItems .remove-item, #cartDrawer.mf-purchase-flow-v2 #cartItems .delete-item, #cartDrawer.mf-purchase-flow-v2 #cartItems .cart-remove { color: #d7664f !important; } /* ===== Cart footer / subtotal ===== */ #cartDrawer.mf-purchase-flow-v2 .cart-summary { background: rgba(255,255,255,0.92) !important; border-top: 1px solid var(--mf-border) !important; box-shadow: 0 -8px 24px rgba(15, 31, 36, 0.06) !important; } #cartDrawer.mf-purchase-flow-v2 .cart-summary, #cartDrawer.mf-purchase-flow-v2 .cart-summary * { color: var(--mf-text) !important; } #cartDrawer.mf-purchase-flow-v2 .cart-summary .subtotal-value, #cartDrawer.mf-purchase-flow-v2 .cart-summary .cart-total, #cartDrawer.mf-purchase-flow-v2 .cart-summary strong { color: var(--mf-dark) !important; font-weight: 800 !important; } #cartDrawer.mf-purchase-flow-v2 .cart-summary .checkout-btn, #cartDrawer.mf-purchase-flow-v2 .cart-summary .proceed-checkout, #cartDrawer.mf-purchase-flow-v2 .cart-summary button[type="button"], #cartDrawer.mf-purchase-flow-v2 .cart-summary button[type="submit"] { background: linear-gradient(135deg, var(--mf-gold) 0%, #b97c08 100%) !important; color: #111111 !important; border: 0 !important; border-radius: 16px !important; font-weight: 800 !important; box-shadow: 0 10px 22px rgba(216,154,29,0.26) !important; } /* ===== Chat main area ===== */ #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-messages { background: linear-gradient(180deg, #fffdf9 0%, #f8f4ea 100%) !important; } #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-messages::-webkit-scrollbar { width: 8px !important; } #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-messages::-webkit-scrollbar-thumb { background: rgba(216,154,29,0.55) !important; border-radius: 999px !important; } /* ===== Chat bubbles ===== */ #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-message, #cartDrawer.mf-purchase-flow-v2 .mf-chat-message, #cartDrawer.mf-purchase-flow-v2 .chat-message { color: var(--mf-text) !important; } #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-message.mf-own .mf-order-chat-bubble, #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-message.mf-own .bubble, #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-message.is-own .bubble { background: linear-gradient(135deg, #dff6f1 0%, #c8eee8 100%) !important; border: 1px solid rgba(31,154,144,0.30) !important; color: var(--mf-dark) !important; border-radius: 18px !important; } #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-message:not(.mf-own) .mf-order-chat-bubble, #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-message:not(.mf-own) .bubble, #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-message.is-other .bubble { background: linear-gradient(135deg, #fff4d9 0%, #ffefc8 100%) !important; border: 1px solid rgba(216,154,29,0.35) !important; color: var(--mf-text) !important; border-radius: 18px !important; } #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-system, #cartDrawer.mf-purchase-flow-v2 .system-message, #cartDrawer.mf-purchase-flow-v2 .mf-chat-system { background: rgba(255,255,255,0.75) !important; color: var(--mf-muted) !important; border: 1px solid rgba(216,154,29,0.18) !important; border-radius: 999px !important; } /* ===== Inline order card inside chat ===== */ #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-messages table, #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-messages .order-card, #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-messages .mf-inline-order-card, #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-messages .mf-order-summary-card { border-color: var(--mf-border) !important; } #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-messages .order-card, #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-messages .mf-inline-order-card, #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-messages .mf-order-summary-card { background: rgba(255,255,255,0.92) !important; border: 1px solid var(--mf-border) !important; border-radius: 18px !important; box-shadow: var(--mf-shadow) !important; } #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-messages th { color: var(--mf-dark) !important; font-weight: 800 !important; } #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-messages td, #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-messages p, #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-messages span { color: var(--mf-text) !important; } /* ===== Composer ===== */ #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-form { background: rgba(255,255,255,0.95) !important; border-top: 1px solid var(--mf-border) !important; box-shadow: 0 -8px 24px rgba(15, 31, 36, 0.05) !important; padding: 10px 12px !important; } #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-form input, #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-form textarea, #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-form .chat-input, #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-form .message-input { background: #fffdf9 !important; color: var(--mf-text) !important; border: 2px solid #73c3b7 !important; border-radius: 20px !important; box-shadow: none !important; } #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-form input::placeholder, #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-form textarea::placeholder { color: #7d847d !important; } #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-form button, #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-form .send-btn, #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-form .chat-send { background: linear-gradient(135deg, var(--mf-dark) 0%, #194b49 100%) !important; color: #ffffff !important; border: 0 !important; border-radius: 18px !important; font-weight: 800 !important; box-shadow: 0 10px 20px rgba(15,31,36,0.18) !important; } #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-form .attach-btn, #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-form .upload-btn, #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-form label[for] { color: var(--mf-gold) !important; } /* ===== Empty state ===== */ #cartDrawer.mf-purchase-flow-v2 #emptyCart, #cartDrawer.mf-purchase-flow-v2 .empty-cart { background: rgba(255,255,255,0.78) !important; border: 1px dashed var(--mf-border) !important; border-radius: 18px !important; color: var(--mf-muted) !important; } /* ===== Responsive polish ===== */ @media (max-width: 768px) { #cartDrawer.mf-purchase-flow-v2 #cartItems .cart-item { border-radius: 16px !important; padding: 12px !important; } #cartDrawer.mf-purchase-flow-v2 .cart-summary { padding: 10px 12px 14px !important; } #cartDrawer.mf-purchase-flow-v2 .mf-order-chat-form { padding: 8px 10px !important; } } /* ===== MEHFARO YELLOW THEME FOR CART + CHAT TABS ===== */ #cartDrawer.mf-purchase-flow-v2 #mfPurchaseTabs { background: #fff7e8 !important; border-bottom: 1px solid #e3c27a !important; padding: 6px 8px !important; } #cartDrawer.mf-purchase-flow-v2 #mfPurchaseTabs button, #cartDrawer.mf-purchase-flow-v2 #mfPurchaseTabs .tab-btn, #cartDrawer.mf-purchase-flow-v2 #mfPurchaseTabs .mf-purchase-tab { background: linear-gradient(135deg, #f7d98a 0%, #e0a11b 100%) !important; color: #1a1a1a !important; border: 1px solid #c88b12 !important; border-radius: 14px !important; font-weight: 800 !important; box-shadow: 0 4px 12px rgba(216,154,29,0.18) !important; } #cartDrawer.mf-purchase-flow-v2 #mfPurchaseTabs button.active, #cartDrawer.mf-purchase-flow-v2 #mfPurchaseTabs .tab-btn.active, #cartDrawer.mf-purchase-flow-v2 #mfPurchaseTabs .mf-purchase-tab.active, #cartDrawer.mf-purchase-flow-v2 #mfPurchaseTabs button[aria-selected="true"] { background: linear-gradient(135deg, #d89a1d 0%, #b97c08 100%) !important; color: #111 !important; border-color: #a86c00 !important; box-shadow: 0 6px 16px rgba(185,124,8,0.26) !important; } #cartDrawer.mf-purchase-flow-v2 .cart-header { border-bottom: 2px solid #d89a1d !important; } #cartDrawer.mf-purchase-flow-v2 .cart-header h2, #cartDrawer.mf-purchase-flow-v2 .cart-header .cart-title, #cartDrawer.mf-purchase-flow-v2 .cart-header .drawer-title { color: #ffffff !important; } #cartDrawer.mf-purchase-flow-v2 .cart-header .shopping-bag-label, #cartDrawer.mf-purchase-flow-v2 .cart-header small { color: #f7d98a !important; } /* ========================================================= MEHFARO CHECKOUT - RESPONSIVE COMPACT FINAL ========================================================= */ #checkoutModal.open { align-items: center !important; justify-content: center !important; padding: 8px !important; } #checkoutModal .easy-checkout-shell { width: min(1180px, 100%) !important; max-height: calc(100dvh - 16px) !important; margin: 0 auto !important; padding: 14px 16px !important; border-radius: 22px !important; overflow-y: auto !important; overflow-x: hidden !important; } /* HEADER */ #checkoutModal .easy-checkout-title { margin-bottom: 9px !important; padding-right: 48px !important; } #checkoutModal .easy-checkout-title .section-kicker { font-size: 8px !important; } #checkoutModal .easy-checkout-title h2 { margin: 3px 0 5px !important; font-size: clamp(25px, 3vw, 34px) !important; line-height: 1 !important; } #checkoutModal .easy-checkout-title p { max-width: 720px !important; margin: 0 !important; font-size: 11px !important; line-height: 1.4 !important; } #checkoutModal .checkout-close { top: 10px !important; right: 10px !important; width: 36px !important; height: 36px !important; } /* STEPS - ALWAYS ONE COMPACT ROW */ #checkoutModal .checkout-steps { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; margin-bottom: 10px !important; } #checkoutModal .checkout-step { min-height: 46px !important; grid-template-columns: 27px minmax(0, 1fr) !important; column-gap: 7px !important; padding: 6px 8px !important; border-radius: 12px !important; } #checkoutModal .checkout-step > span { width: 27px !important; height: 27px !important; font-size: 11px !important; } #checkoutModal .checkout-step strong { font-size: 10px !important; } #checkoutModal .checkout-step small { font-size: 8px !important; } /* MAIN DESKTOP LAYOUT */ #checkoutModal .checkout-layout { grid-template-columns: minmax(0, 1.65fr) minmax(280px, .7fr) !important; gap: 12px !important; align-items: start !important; } /* FORM BECOMES COMPACT GRID ON LARGE SCREEN */ @media (min-width: 901px) { #checkoutModal .checkout-form { display: grid !important; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) !important; gap: 9px !important; align-items: start !important; } #checkoutModal .checkout-form > .easy-form-section:nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; } #checkoutModal .checkout-form > .easy-form-section:nth-child(2) { grid-column: 2 !important; grid-row: 1 / span 2 !important; } #checkoutModal .checkout-form > .easy-form-section:nth-child(3) { grid-column: 1 !important; grid-row: 2 !important; } #checkoutModal .easy-checkout-help, #checkoutModal .place-order-btn, #checkoutModal .place-order-help { grid-column: 1 / -1 !important; } } /* SECTIONS */ #checkoutModal .easy-form-section { margin: 0 !important; padding: 11px !important; border-radius: 15px !important; } #checkoutModal .form-section-head { gap: 8px !important; margin-bottom: 8px !important; } #checkoutModal .form-step-number { flex: 0 0 28px !important; width: 28px !important; height: 28px !important; font-size: 11px !important; } #checkoutModal .form-section-head h3 { margin: 0 0 1px !important; font-size: 15px !important; } #checkoutModal .form-section-head p { font-size: 9px !important; line-height: 1.3 !important; } /* FIELDS */ #checkoutModal .form-grid { gap: 7px 8px !important; } #checkoutModal .easy-form-section .field { gap: 3px !important; } #checkoutModal .easy-form-section .field > span { font-size: 10px !important; } #checkoutModal .easy-form-section .field input, #checkoutModal .easy-form-section .field select, #checkoutModal .easy-form-section .field textarea { min-height: 39px !important; padding: 7px 10px !important; border-radius: 10px !important; font-size: 13px !important; } #checkoutModal .easy-form-section .field textarea { min-height: 60px !important; max-height: 72px !important; } #checkoutModal .field-help { font-size: 8px !important; line-height: 1.25 !important; } /* PAYMENT */ #checkoutModal .cod-simple-card { gap: 8px !important; margin-bottom: 7px !important; padding: 9px !important; border-radius: 12px !important; } #checkoutModal .cod-icon { width: 34px !important; height: 34px !important; border-radius: 10px !important; font-size: 16px !important; } #checkoutModal .cod-simple-card strong { font-size: 11px !important; } #checkoutModal .cod-simple-card p { font-size: 8px !important; } #checkoutModal .delivery-pill { padding: 6px 9px !important; font-size: 8px !important; } #checkoutModal .easy-delivery-card { padding: 9px !important; border-radius: 12px !important; } #checkoutModal .easy-delivery-card strong { font-size: 11px !important; } #checkoutModal .easy-delivery-card p { font-size: 8px !important; } #checkoutModal .delivery-warning { margin-top: 6px !important; padding: 7px 9px !important; border-radius: 10px !important; font-size: 8px !important; line-height: 1.35 !important; } /* HELP + CONFIRM */ #checkoutModal .easy-checkout-help { margin: 8px 0 !important; padding: 9px 11px !important; border-radius: 13px !important; } #checkoutModal .easy-checkout-help strong { font-size: 10px !important; } #checkoutModal .easy-checkout-help span { font-size: 8px !important; } #checkoutModal .checkout-help-button { min-height: 34px !important; padding: 0 12px !important; font-size: 9px !important; } #checkoutModal .place-order-btn { min-height: 42px !important; margin: 0 !important; font-size: 12px !important; } #checkoutModal .place-order-help { margin: 4px 0 0 !important; font-size: 8px !important; } /* ORDER SUMMARY */ #checkoutModal .easy-summary-card { position: sticky !important; top: 0 !important; padding: 13px !important; border-radius: 16px !important; } #checkoutModal .easy-summary-card h3 { margin-bottom: 8px !important; font-size: 16px !important; } #checkoutModal .checkout-items { max-height: 190px !important; margin-bottom: 8px !important; } #checkoutModal .checkout-item { grid-template-columns: 46px 1fr auto !important; gap: 8px !important; padding: 6px 0 !important; } #checkoutModal .checkout-item img { width: 46px !important; height: 50px !important; border-radius: 9px !important; } #checkoutModal .checkout-item h4 { font-size: 10px !important; } #checkoutModal .checkout-item p, #checkoutModal .checkout-item strong { font-size: 9px !important; } #checkoutModal .checkout-total-row { padding: 7px 0 !important; font-size: 10px !important; } #checkoutModal .checkout-total-row.grand-total { padding-top: 9px !important; font-size: 16px !important; } #checkoutModal .cash-reminder { font-size: 9px !important; line-height: 1.35 !important; } #checkoutModal .checkout-fineprint { margin-top: 7px !important; font-size: 8px !important; line-height: 1.3 !important; } /* ========================================================= TABLET / SMALL SCREEN ========================================================= */ @media (max-width: 900px) { #checkoutModal .checkout-layout { grid-template-columns: 1fr !important; } #checkoutModal .checkout-form { display: block !important; } #checkoutModal .easy-form-section { margin-bottom: 8px !important; } #checkoutModal .easy-summary-card { position: static !important; margin-top: 8px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 620px) { #checkoutModal { padding: 4px !important; } #checkoutModal .easy-checkout-shell { max-height: calc(100dvh - 8px) !important; padding: 10px !important; border-radius: 16px !important; } #checkoutModal .easy-checkout-title { margin-bottom: 7px !important; } #checkoutModal .easy-checkout-title h2 { font-size: 23px !important; } #checkoutModal .easy-checkout-title p { display: none !important; } #checkoutModal .checkout-step { min-height: 38px !important; grid-template-columns: 23px minmax(0, 1fr) !important; padding: 5px !important; } #checkoutModal .checkout-step > span { width: 23px !important; height: 23px !important; } #checkoutModal .checkout-step strong { font-size: 8px !important; } #checkoutModal .checkout-step small { display: none !important; } #checkoutModal .easy-form-section { padding: 9px !important; } #checkoutModal .form-section-head p, #checkoutModal .field-help { display: none !important; } #checkoutModal .form-section-head { margin-bottom: 6px !important; } #checkoutModal .easy-form-section .field input, #checkoutModal .easy-form-section .field select, #checkoutModal .easy-form-section .field textarea { min-height: 40px !important; padding: 7px 9px !important; font-size: 14px !important; } #checkoutModal .easy-form-section .field textarea { min-height: 56px !important; } #checkoutModal .easy-checkout-help span { display: none !important; } #checkoutModal .easy-checkout-help { grid-template-columns: 1fr auto !important; } #checkoutModal .checkout-help-button { width: auto !important; } #checkoutModal .checkout-items { max-height: 150px !important; } } @supports not (height: 100dvh) { #checkoutModal .easy-checkout-shell { max-height: calc(100vh - 16px) !important; } } /* ========================================================= MEHFARO WHATSAPP-STYLE ORDER RECEIPT - FINAL ========================================================= */ #cartDrawer.mf-purchase-view-chat .mf-order-chat-message.customer .order-card-bubble { width: 96% !important; max-width: 470px !important; padding: 5px !important; background: #fff5dc !important; border: 1px solid #e6bd61 !important; border-radius: 18px 18px 5px 18px !important; box-shadow: 0 6px 18px rgba(23, 32, 37, .10) !important; } /* Main receipt */ #cartDrawer.mf-purchase-view-chat .mf-chat-order-card { width: 100% !important; overflow: hidden !important; border: 1px solid #e7c878 !important; border-radius: 14px !important; background: #fffdf8 !important; box-shadow: none !important; } /* Receipt top */ #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding: 10px 12px !important; background: linear-gradient( 135deg, #112d33, #17454a ) !important; border-bottom: 3px solid #d89a1d !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-head strong { color: #ffffff !important; font-size: 13px !important; font-weight: 900 !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card.confirmed .mf-chat-order-card-head strong::before { content: "✓ "; color: #f3b72c !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-head span { padding: 4px 7px !important; border-radius: 999px !important; background: #f3b72c !important; color: #112d33 !important; font-size: 8px !important; font-weight: 900 !important; white-space: nowrap !important; } /* Product table */ #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table { width: 100% !important; overflow-x: auto !important; background: #ffffff !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table table { width: 100% !important; border-collapse: collapse !important; table-layout: fixed !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table th { padding: 7px 6px !important; background: #fff1ca !important; color: #6b4b08 !important; font-size: 9px !important; font-weight: 900 !important; text-align: left !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table td { padding: 8px 6px !important; border-top: 1px solid #eee6d4 !important; background: #ffffff !important; color: #172025 !important; font-size: 10px !important; line-height: 1.3 !important; vertical-align: top !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table td:first-child, #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table th:first-child { width: 36% !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table td strong { font-size: 11px !important; font-weight: 900 !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table td small { display: block !important; margin-top: 2px !important; color: #7b8582 !important; font-size: 8px !important; } /* Totals */ #cartDrawer.mf-purchase-view-chat .mf-chat-order-totals { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; border-top: 1px solid #eadbb6 !important; background: #fffaf0 !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-totals span { padding: 8px 7px !important; color: #6c716e !important; font-size: 8px !important; border-right: 1px solid #eadfca !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-totals span:last-child { border-right: 0 !important; background: #e1f3ef !important; color: #126f68 !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-totals strong { display: block !important; margin-top: 3px !important; color: #172025 !important; font-size: 11px !important; font-weight: 900 !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-totals span:last-child strong { color: #087d73 !important; font-size: 12px !important; } /* Delivery details */ #cartDrawer.mf-purchase-view-chat .mf-chat-order-address { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 !important; border-top: 1px solid #eadbb6 !important; background: #ffffff !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-address span { min-width: 0 !important; padding: 8px !important; border-right: 1px solid #eee7d8 !important; border-bottom: 1px solid #eee7d8 !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-address .address { grid-column: 1 / -1 !important; border-bottom: 0 !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-address small { display: block !important; margin: 0 0 3px !important; color: #a27214 !important; font-size: 7px !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: .05em !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-address strong { display: block !important; color: #172025 !important; font-size: 10px !important; line-height: 1.35 !important; overflow-wrap: anywhere !important; } /* Card timestamp stays outside receipt visually */ #cartDrawer.mf-purchase-view-chat .order-card-bubble > small { margin: 5px 5px 1px !important; color: #8b7650 !important; font-size: 8px !important; } /* Phone polish */ @media (max-width: 430px) { #cartDrawer.mf-purchase-view-chat .mf-order-chat-message.customer .order-card-bubble { width: 98% !important; max-width: 98% !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-head { padding: 8px 9px !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-head strong { font-size: 11px !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table th { padding: 6px 4px !important; font-size: 8px !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table td { padding: 7px 4px !important; font-size: 9px !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-totals span { padding: 7px 5px !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-address span { padding: 7px !important; } } /* ===== ORDER CARD MICRO FIXES ===== */ /* Product subtitle / variant name */ #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table td small { display: block !important; margin-top: 4px !important; color: #6b6f73 !important; font-size: 9px !important; font-weight: 600 !important; line-height: 1.35 !important; letter-spacing: 0 !important; text-transform: none !important; } /* Address / delivery labels fix */ #cartDrawer.mf-purchase-view-chat .mf-chat-order-address small { display: block !important; margin: 0 0 5px !important; color: #9b6a10 !important; font-size: 8px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .03em !important; text-align: left !important; } /* Address / delivery values */ #cartDrawer.mf-purchase-view-chat .mf-chat-order-address strong { display: block !important; color: #172025 !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.4 !important; text-align: left !important; } /* Cell alignment */ #cartDrawer.mf-purchase-view-chat .mf-chat-order-address span { text-align: left !important; vertical-align: top !important; } /* ===== MEHFARO ORDER PRODUCT GRID - FINAL ===== */ #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table { width: 100% !important; overflow-x: auto !important; border-top: 1px solid #ead8aa !important; border-bottom: 1px solid #ead8aa !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table table { width: 100% !important; border-collapse: collapse !important; table-layout: auto !important; } /* headings */ #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table th { padding: 7px 8px !important; background: #fff7df !important; color: #9b6805 !important; font-size: 8px !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: .04em !important; text-align: left !important; border-right: 1px solid #ead8aa !important; border-bottom: 1px solid #ead8aa !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table th:last-child { border-right: 0 !important; } /* product values */ #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table td { padding: 9px 8px !important; background: #ffffff !important; color: #172025 !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1.35 !important; text-align: left !important; vertical-align: top !important; border-right: 1px solid #ead8aa !important; border-bottom: 1px solid #ead8aa !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table td:last-child { border-right: 0 !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table tbody tr:last-child td { border-bottom: 0 !important; } /* Product name */ #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table td:first-child strong { display: block !important; font-size: 11px !important; font-weight: 900 !important; color: #172025 !important; } /* SKU */ #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table td:first-child small { display: block !important; margin-top: 4px !important; color: #697579 !important; font-size: 9px !important; font-weight: 700 !important; line-height: 1.3 !important; } /* Mobile */ @media (max-width: 430px) { #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table th { padding: 6px 5px !important; font-size: 7px !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table td { padding: 8px 5px !important; font-size: 9px !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table td:first-child strong { font-size: 10px !important; } #cartDrawer.mf-purchase-view-chat .mf-chat-order-card-table td:first-child small { font-size: 8px !important; } }