.verified-domain-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); border: 2px solid #6ee7b7; border-radius: 24px; font-size: 14px; font-weight: 500; color: #065f46; box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2); transition: all 0.2s; } .verified-domain-badge:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3); } .badge-content { display: flex; align-items: center; gap: 8px; } .domain-text { font-family: 'Courier New', monospace; font-weight: 600; color: #047857; } .checkmark { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: #10b981; color: white; border-radius: 50%; font-size: 12px; font-weight: bold; } .blockchain-indicator { font-size: 16px; opacity: 0.8; } .verified-info { font-size: 11px; color: #047857; opacity: 0.8; margin-top: 4px; } /* Compact variant */ .verified-domain-badge.compact { padding: 4px 12px; font-size: 12px; } .verified-domain-badge.compact .checkmark { width: 16px; height: 16px; font-size: 10px; } /* Dark mode support */ @media (prefers-color-scheme: dark) { .verified-domain-badge { background: linear-gradient(135deg, #064e3b 0%, #065f46 100%); border-color: #047857; color: #d1fae5; } .domain-text { color: #a7f3d0; } .verified-info { color: #a7f3d0; } }