/* Distribuie pe Social Media — seotoolpro.ro 2026 */

.dsm-wrap {
    background: #fff;
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 2px 14px rgba(0,0,0,0.07);
    margin-bottom: 24px;
}

.dsm-input-section { margin-bottom: 24px; }
.dsm-input-row {
    display: flex;
    align-items: stretch;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s;
    background: #fff;
    margin-bottom: 8px;
}
.dsm-input-row:focus-within { border-color: #7c3aed; }
.dsm-input-icon {
    padding: 0 14px;
    font-size: 18px;
    background: #f9fafb;
    display: flex;
    align-items: center;
    border-right: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.dsm-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 14px 16px;
    font-size: 15px;
    color: #111827;
    min-width: 0;
    background: transparent;
}
.dsm-btn-gen {
    padding: 0 24px;
    background: #7c3aed;
    color: #fff;
    border: none;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.dsm-btn-gen:hover { background: #6d28d9; }
.dsm-input-hint { font-size: 12px; color: #9ca3af; }
.dsm-error { margin-top: 8px; font-size: 13px; color: #dc2626; font-weight: 600; }

.dsm-empty { text-align: center; padding: 48px 20px; color: #9ca3af; }
.dsm-empty-icon { font-size: 52px; margin-bottom: 14px; }
.dsm-empty-title { font-size: 18px; font-weight: 700; color: #374151; margin-bottom: 6px; }
.dsm-empty-sub { font-size: 14px; }

.dsm-url-preview {
    background: #f5f3ff;
    border: 1px solid #ede9fe;
    border-radius: 8px;
    padding: 11px 16px;
    font-size: 13px;
    color: #5b21b6;
    font-weight: 600;
    margin-bottom: 16px;
    word-break: break-all;
}

.dsm-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.dsm-filter {
    padding: 7px 16px;
    border: 2px solid #e5e7eb;
    background: #fff;
    color: #6b7280;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}
.dsm-filter.active, .dsm-filter:hover {
    border-color: #7c3aed;
    color: #7c3aed;
    background: #f5f3ff;
}

.dsm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
}

.dsm-card {
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 8px 12px;
    gap: 8px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    outline: none;
}
.dsm-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.11);
    border-color: #c4b5fd;
    text-decoration: none !important;
}
.dsm-card:focus-visible { box-shadow: 0 0 0 3px #a78bfa; border-color: #7c3aed; }
.dsm-card.hidden { display: none; }

.dsm-badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    font-family: Arial, sans-serif;
    flex-shrink: 0;
}
.dsm-card-name {
    font-size: 11px;
    font-weight: 700;
    color: #374151;
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
}

.dsm-bg-facebook   { background: #0866FF; }
.dsm-bg-x          { background: #000000; }
.dsm-bg-linkedin   { background: #007BB5; }
.dsm-bg-reddit     { background: #FF4500; }
.dsm-bg-pinterest  { background: #E60023; }
.dsm-bg-threads    { background: #1A1A1A; }
.dsm-bg-bluesky    { background: #1285FE; }
.dsm-bg-mastodon   { background: #6364FF; }
.dsm-bg-tumblr     { background: #35465C; }
.dsm-bg-vk         { background: #4C75A3; }
.dsm-bg-ok         { background: #F2720C; }
.dsm-bg-flipboard  { background: #CC0000; }
.dsm-bg-mix        { background: #FF8226; }
.dsm-bg-digg       { background: #005f8e; }
.dsm-bg-hacker     { background: #FF6600; }
.dsm-bg-whatsapp   { background: #25D366; }
.dsm-bg-telegram   { background: #2CA5E0; }
.dsm-bg-viber      { background: #7C529E; }
.dsm-bg-line       { background: #00C300; }
.dsm-bg-skype      { background: #00AFF0; }
.dsm-bg-teams      { background: #5059C9; }
.dsm-bg-discord    { background: #5865F2; }
.dsm-bg-kakao      { background: #FAE100; color: #3C1E1E !important; }
.dsm-bg-wechat     { background: #07C160; }
.dsm-bg-snapchat   { background: #FFFC00; }
.dsm-bg-snapchat .dsm-badge { color: #1A1A1A !important; }
.dsm-bg-gmail      { background: #EA4335; }
.dsm-bg-outlook    { background: #0078D4; }
.dsm-bg-yahoo      { background: #6001D2; }
.dsm-bg-email      { background: #6b7280; }
.dsm-bg-pocket     { background: #EE4056; }
.dsm-bg-instapaper { background: #1A1A1A; }
.dsm-bg-evernote   { background: #00A82D; }
.dsm-bg-buffer     { background: #168EEA; }
.dsm-bg-trello     { background: #0079BF; }
.dsm-bg-wordpress  { background: #21759B; }

@media (max-width: 600px) {
    .dsm-wrap { padding: 16px; }
    .dsm-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; }
    .dsm-input-icon { display: none; }
    .dsm-btn-gen { padding: 0 14px; font-size: 13px; }
    .dsm-badge { width: 38px; height: 38px; font-size: 11px; border-radius: 10px; }
    .dsm-card { padding: 12px 6px 10px; }
}