.pendingPriceBadgeWrapper { position: relative; display: inline-flex; align-items: center; } .pendingPriceBadge { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #faeeda; border: 0.5px solid #ef9f27; color: #854f0b; font-size: 12px; font-weight: 500; cursor: pointer; user-select: none; } .pendingPriceTooltip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--color-background-primary, #ffffff); border: 0.5px solid var(--color-border-secondary, #e2e2e2); border-radius: var(--border-radius-md, 6px); padding: 8px 12px; width: 220px; font-size: 13px; color: var(--color-text-primary, #333333); line-height: 1.5; z-index: 100; white-space: normal; pointer-events: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); @media (max-width: 767px) { display: none; } strong { display: block; margin-bottom: 4px; color: var(--color-text-primary, #000000); } } :global { .pending-price-modal { .ant-modal-content { border-radius: 12px; padding: 24px; @media (max-width: 767px) { padding: 20px; } } .ant-modal-header { margin-bottom: 12px; .ant-modal-title { font-size: 18px; font-weight: 600; color: #333; @media (max-width: 767px) { font-size: 16px; } } } .ant-modal-body { p { font-size: 14px; line-height: 1.6; color: #555; margin: 0; @media (max-width: 767px) { font-size: 13px; } } } .ant-modal-footer { margin-top: 20px; .ant-btn-primary { background-color: #888888; border-color: #888888; border-radius: 6px; height: 36px; padding: 0 20px; font-weight: 500; &:hover { background-color: #666666; border-color: #666666; } } } } }