/* === TANGLE-ME LOGO BUTTON (TOP LEFT) === */ .tangle-logo { position: fixed; top: 1rem; left: 1rem; display: flex; align-items: center; gap: 0.5rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 0.6rem 1.2rem; border-radius: 25px; cursor: pointer; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); transition: all 0.3s ease; z-index: 1000; border: 2px solid rgba(255, 255, 255, 0.3); } .tangle-logo:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6); border-color: rgba(255, 255, 255, 0.5); } .tangle-logo:active { transform: translateY(0); } .tangle-logo-icon { font-size: 1.5rem; animation: spin 3s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .tangle-logo-text { font-size: 1.1rem; font-weight: 700; color: #fff; letter-spacing: 0.5px; } @media (max-width: 768px) { .tangle-logo { padding: 0.5rem 1rem; top: 0.5rem; left: 0.5rem; } .tangle-logo-text { font-size: 0.95rem; } .tangle-logo-icon { font-size: 1.3rem; } } /* === PHASE 1 NEW STYLES - v2.6 === */ /* Messages Badge */ .messages-btn { background: rgba(255, 255, 255, 0.15); border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 20px; padding: 0.5rem 1rem; color: #fff; font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: all 0.2s; position: relative; display: flex; align-items: center; gap: 0.5rem; } .messages-btn:hover { background: rgba(255, 255, 255, 0.25); transform: translateY(-1px); } .messages-btn .badge { background: #f44336; color: #fff; border-radius: 10px; padding: 0.15rem 0.5rem; font-size: 0.75rem; font-weight: 700; display: none; } .messages-btn .badge.show { display: inline-block; } /* Ad Number Badge */ .ad-header-top { display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.75rem; gap: 0.5rem; } .ad-num-badge { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; border: none; padding: 0.4rem 0.8rem; border-radius: 15px; font-size: 0.8rem; font-weight: 600; cursor: default; white-space: nowrap; } /* Star Button */ .star-btn { background: transparent; border: none; font-size: 1.8rem; cursor: pointer; transition: transform 0.2s; padding: 0.25rem; line-height: 1; } .star-btn:hover { transform: scale(1.2); } .star-btn.saved { filter: drop-shadow(0 0 8px gold); } /* My Tangles Modal */ .tangles-modal-content { background: #fff; border-radius: 20px; padding: 2rem; max-width: 700px; width: 100%; max-height: 90vh; overflow-y: auto; color: #333; position: relative; } .tangles-title { font-size: 1.8rem; font-weight: 700; color: #2d3748; margin-bottom: 1.5rem; text-align: center; } .tangle-card { background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%); border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; border-left: 4px solid #667eea; } .tangle-username { font-size: 1.2rem; font-weight: 700; color: #667eea; font-family: 'Courier New', monospace; margin-bottom: 0.5rem; cursor: pointer; } .tangle-username:hover { text-decoration: underline; } .tangle-country { font-size: 0.9rem; color: #4a5568; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.35rem; } .tangle-info { font-size: 0.85rem; color: #718096; margin-bottom: 0.75rem; } .tangle-notes { background: #fff; padding: 0.75rem; border-radius: 8px; font-size: 0.9rem; color: #2d3748; margin-bottom: 0.75rem; font-style: italic; border: 1px dashed #cbd5e0; } .tangle-notes-empty { color: #a0aec0; } .tangle-reference { font-size: 0.85rem; color: #718096; margin-bottom: 0.75rem; padding: 0.5rem; background: rgba(255,255,255,0.5); border-radius: 6px; } .tangle-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .tangle-btn { flex: 1; min-width: 100px; padding: 0.6rem; border-radius: 8px; font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: all 0.2s; border: none; } .tangle-btn:hover { transform: translateY(-1px); } .tangle-btn-view { background: #667eea; color: #fff; } .tangle-btn-edit { background: #fff; color: #667eea; border: 2px solid #667eea; } .tangle-btn-remove { background: #fff; color: #f44336; border: 2px solid #f44336; } .no-tangles { text-align: center; padding: 3rem 2rem; color: #718096; } .no-tangles-icon { font-size: 4rem; margin-bottom: 1rem; } /* Messages Modal */ .messages-modal-content { background: #fff; border-radius: 20px; padding: 2rem; max-width: 800px; width: 100%; max-height: 90vh; overflow-y: auto; color: #333; position: relative; } .messages-title { font-size: 1.8rem; font-weight: 700; color: #2d3748; margin-bottom: 1.5rem; text-align: center; } .messages-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; border-bottom: 2px solid #e2e8f0; } .message-tab { padding: 0.75rem 1.5rem; background: transparent; border: none; color: #718096; font-weight: 600; cursor: pointer; border-bottom: 3px solid transparent; transition: all 0.2s; font-size: 1rem; } .message-tab.active { color: #667eea; border-bottom-color: #667eea; } .message-tab:hover { color: #667eea; } .messages-container { min-height: 200px; } .message-card { background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%); border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; cursor: pointer; transition: all 0.2s; border-left: 4px solid #e2e8f0; } .message-card.unread { border-left-color: #667eea; background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%); box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15); } .message-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .message-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.75rem; gap: 1rem; } .message-from { font-weight: 700; color: #667eea; font-family: 'Courier New', monospace; font-size: 1.05rem; } .message-time { font-size: 0.8rem; color: #718096; white-space: nowrap; } .message-ad-ref { font-size: 0.85rem; color: #4a5568; margin-bottom: 0.5rem; font-weight: 600; } .message-text { color: #2d3748; font-size: 0.95rem; line-height: 1.5; white-space: pre-wrap; } .no-messages { text-align: center; padding: 3rem 2rem; color: #718096; } .no-messages-icon { font-size: 4rem; margin-bottom: 1rem; } /* Send Message Modal */ .send-message-content { background: #fff; border-radius: 20px; padding: 2rem; max-width: 600px; width: 100%; color: #333; position: relative; } .send-message-title { font-size: 1.5rem; font-weight: 700; color: #2d3748; margin-bottom: 1rem; text-align: center; } .send-message-subtitle { font-size: 0.9rem; color: #718096; margin-bottom: 1.5rem; text-align: center; } .message-textarea { width: 100%; min-height: 150px; padding: 1rem; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 0.95rem; font-family: inherit; resize: vertical; margin-bottom: 1rem; } .message-textarea:focus { outline: none; border-color: #667eea; } .message-hint { background: #fef3cd; padding: 0.75rem; border-radius: 8px; font-size: 0.85rem; color: #856404; margin-bottom: 1rem; border-left: 4px solid #ffc107; } .message-char-count { text-align: right; font-size: 0.8rem; color: #718096; margin-bottom: 1rem; } /* Edit Ad Modal */ .edit-ad-content { background: #fff; border-radius: 20px; padding: 2rem; max-width: 700px; width: 100%; max-height: 90vh; overflow-y: auto; color: #333; position: relative; } .edit-ad-title { font-size: 1.5rem; font-weight: 700; color: #2d3748; margin-bottom: 1.5rem; text-align: center; } /* Edit Tangle Note Modal */ .edit-note-content { background: #fff; border-radius: 20px; padding: 2rem; max-width: 500px; width: 100%; color: #333; position: relative; } .edit-note-title { font-size: 1.3rem; font-weight: 700; color: #2d3748; margin-bottom: 1rem; text-align: center; } .note-textarea { width: 100%; min-height: 100px; padding: 0.9rem; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 0.95rem; font-family: inherit; resize: vertical; margin-bottom: 1rem; } .note-textarea:focus { outline: none; border-color: #667eea; }
🔍 Search Results
Loading...

📍 Posted Ads

📭
No ads posted yet
Be the first to post!

📝 My Ads

📝
You haven't posted any ads yet
Click "Post Free" to create your first ad!