/* ========================================================= BPRShop Basket Header Panel Mirrors compare-header-btn panel — appears on hover of the cart icon, shows items + qty controls + remove + checkout CTA. Uses the same teal palette as the compare dropdown so the two header dropdowns feel like part of one design system. ========================================================= */ /* Force the site's Persian font on every element inside the panel. Body of the site is `font-family: byekan`; the compare panel was inheriting it implicitly, but the explicit stack here also covers pages where the panel ends up appended to before the body stylesheet computes (rare but cheap to defend against). */ #bpr-basket-panel, #bpr-basket-panel * { font-family: byekan, iranyekan, BYekan1, Tahoma, sans-serif; } #bpr-basket-panel { display: none; position: fixed; width: 360px; max-width: calc(100vw - 16px); background: #ffffff; color: #1f2937; border-radius: 14px; box-shadow: 0 18px 50px rgba(15, 23, 42, 0.22), 0 4px 14px rgba(15, 23, 42, 0.08); z-index: 99999; direction: rtl; text-align: right; overflow: hidden; } #bpr-basket-panel.open { display: block !important; animation: bprBskDrop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes bprBskDrop { from { opacity: 0; transform: translateY(-8px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Header bar — same soft gradient as compare panel */ .bpr-bsk-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: linear-gradient(135deg, #f8fbff 0%, #eef7fc 100%); border-bottom: 1px solid #e6eef5; } .bpr-bsk-panel-title { font-size: 13.5px; font-weight: 600; color: #334155; display: inline-flex; align-items: center; gap: 4px; } .bpr-bsk-panel-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; margin-left: 4px; border-radius: 12px; background: #5bc0de; color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1; } .bpr-bsk-panel-header .bpr-bsk-view-cart { color: #0891b2; background: transparent; border: 1px solid transparent; cursor: pointer; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 14px; text-decoration: none; transition: background 0.15s, border-color 0.15s; } .bpr-bsk-panel-header .bpr-bsk-view-cart:hover { background: #ecfeff; border-color: #a5f3fc; text-decoration: none; color: #0e7490; } /* Items list */ .bpr-bsk-panel-list { max-height: 340px; overflow-y: auto; padding: 6px 0; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; } .bpr-bsk-panel-list::-webkit-scrollbar { width: 6px; } .bpr-bsk-panel-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; } .bpr-bsk-panel-list::-webkit-scrollbar-thumb:hover { background: #94a3b8; } .bpr-bsk-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #f3f5f8; transition: background 0.15s; animation: bprBskItemIn 0.22s ease-out both; } @keyframes bprBskItemIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } } .bpr-bsk-item:last-child { border-bottom: none; } .bpr-bsk-item:hover { background: #f7fafc; } .bpr-bsk-item-link { flex-shrink: 0; display: inline-flex; } .bpr-bsk-item-link img { width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: 8px; border: 1px solid #eef1f5; padding: 3px; transition: transform 0.18s, border-color 0.18s; } .bpr-bsk-item-link:hover img { transform: scale(1.05); border-color: #5bc0de; } .bpr-bsk-item-body { flex: 1; min-width: 0; } .bpr-bsk-item-name { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.6; color: #1f2937; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-decoration: none; transition: color 0.15s; margin-bottom: 4px; } .bpr-bsk-item-name:hover { color: #0fa89f; text-decoration: none; } .bpr-bsk-item-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; } .bpr-bsk-item-price { font-size: 12px; font-weight: 700; color: #0891b2; white-space: nowrap; } .bpr-bsk-item-price small { color: #94a3b8; font-weight: 500; margin-right: 3px; font-size: 11px; } .bpr-bsk-qty { display: inline-flex; align-items: center; gap: 2px; background: #f3f5f8; border-radius: 14px; padding: 2px; } .bpr-bsk-qty button { width: 22px; height: 22px; border-radius: 50%; background: transparent; border: 0; color: #64748b; cursor: pointer; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; padding: 0; line-height: 1; } .bpr-bsk-qty button:hover { background: #5bc0de; color: #fff; } .bpr-bsk-qty button:disabled { opacity: 0.4; cursor: not-allowed; } .bpr-bsk-qty .bpr-bsk-qty-val { min-width: 18px; text-align: center; font-size: 12px; font-weight: 700; color: #1f2937; direction: ltr; } .bpr-bsk-item-remove { width: 26px; height: 26px; border-radius: 50%; background: #f3f5f8; border: 0; color: #94a3b8; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; align-self: flex-start; transition: background 0.15s, color 0.15s, transform 0.2s; } .bpr-bsk-item-remove:hover { background: #fee2e2; color: #dc2626; transform: rotate(90deg) scale(1.05); } /* Empty state */ .bpr-bsk-empty { text-align: center; padding: 36px 18px 30px; color: #94a3b8; } .bpr-bsk-empty svg { width: 44px; height: 44px; color: #cbd5e1; margin-bottom: 12px; } .bpr-bsk-empty p { margin: 0 0 4px; font-size: 13.5px; font-weight: 700; color: #475569; } .bpr-bsk-empty span { font-size: 11.5px; color: #94a3b8; } /* Footer / CTAs */ .bpr-bsk-panel-footer { padding: 12px 14px; border-top: 1px solid #eef1f5; background: #fafbfd; } .bpr-bsk-total-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 13px; color: #475569; } .bpr-bsk-total-row strong { font-size: 14.5px; color: #0891b2; font-weight: 800; } .bpr-bsk-actions { display: flex; gap: 8px; } .bpr-bsk-continue, .bpr-bsk-checkout { flex: 1; padding: 10px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 700; cursor: pointer; text-align: center; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s, filter 0.15s, background 0.15s; line-height: 1.2; border: 0; display: inline-flex; align-items: center; justify-content: center; } .bpr-bsk-continue { background: #f3f5f8; color: #475569; border: 1px solid #e2e8f0; } .bpr-bsk-continue:hover { background: #e2e8f0; color: #1f2937; text-decoration: none; } .bpr-bsk-checkout { background: linear-gradient(135deg, #5bc0de 0%, #31b0d5 100%); color: #fff; box-shadow: 0 4px 12px rgba(91, 192, 222, 0.30); } .bpr-bsk-checkout:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(91, 192, 222, 0.45); color: #fff; text-decoration: none; } /* ========================================================= MOBILE — dropdown becomes a bottom sheet ========================================================= */ @media (max-width: 640px) { #bpr-basket-panel { position: fixed !important; top: auto !important; bottom: 0 !important; right: 0 !important; left: 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important; border-radius: 18px 18px 0 0; box-shadow: 0 -14px 36px rgba(15, 23, 42, 0.25); z-index: 99999; padding-top: 12px; } #bpr-basket-panel::before { content: ""; display: block !important; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 42px; height: 4px; border-radius: 2px; background: #cbd5e1; border: none; } #bpr-basket-panel.open { display: block !important; animation: bprBskSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes bprBskSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .bpr-bsk-panel-list { max-height: 55vh; padding: 8px 0; } .bpr-bsk-panel-header { padding: 12px 18px; } .bpr-bsk-panel-title { font-size: 14px; } .bpr-bsk-panel-count { min-width: 26px; height: 26px; font-size: 13px; } .bpr-bsk-item { padding: 12px 16px; gap: 14px; } .bpr-bsk-item-link img { width: 62px; height: 62px; } .bpr-bsk-item-name { font-size: 13px; } .bpr-bsk-item-remove { width: 28px; height: 28px; font-size: 12px; } .bpr-bsk-panel-footer { padding: 14px 16px; padding-bottom: max(14px, env(safe-area-inset-bottom)); } .bpr-bsk-continue, .bpr-bsk-checkout { padding: 13px 12px; font-size: 14px; border-radius: 10px; } body.bpr-bsk-open::after { content: ""; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.50); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 99998; animation: bprBskFadeIn 0.22s ease-out; } @keyframes bprBskFadeIn { from { opacity: 0; } to { opacity: 1; } } body.bpr-bsk-open { overflow: hidden; } }