/* Social Media block styles */
.social-media-block-content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 8px 0; /* Add vertical padding to accommodate hover animations */
    overflow: visible; /* Ensure hover effects aren't clipped */
}

/* Ensure the parent block doesn't clip content */
.social-media-block {
    overflow: visible !important;
}

/* Multiple buttons container */
.social-media-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    position: relative; /* Ensure proper stacking context */
}

/* Layout styles */
.social-media-block-content.layout-horizontal .social-media-buttons {
    flex-direction: row;
}

.social-media-block-content.layout-vertical .social-media-buttons {
    flex-direction: column;
}

/* Spacing styles */
.social-media-block-content.spacing-small .social-media-buttons {
    gap: var(--spacing-xs);
}

.social-media-block-content.spacing-medium .social-media-buttons {
    gap: var(--spacing-sm);
}

.social-media-block-content.spacing-large .social-media-buttons {
    gap: var(--spacing-md);
}

/* Alignment styles */
.social-media-block-content.align-left {
    justify-content: flex-start;
}

.social-media-block-content.align-center {
    justify-content: center;
}

.social-media-block-content.align-right {
    justify-content: flex-end;
}

.social-media-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: var(--border-radius);
    cursor: pointer;
}

/* Icon only style */
.social-media-link.style-icon {
    padding: var(--spacing-sm);
}

.social-media-link.style-icon:hover {
    transform: scale(1.1);
    background: rgba(0, 0, 0, 0.05);
}

/* Button only style */
.social-media-link.style-button {
    padding: var(--spacing-md) var(--spacing-lg);
    border: 2px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    font-weight: 500;
    font-size: var(--font-size-sm);
}

.social-media-link.style-button:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-light);
    color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Icon + Text style */
.social-media-link.style-iconText {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    font-weight: 500;
    font-size: var(--font-size-sm);
}

.social-media-link.style-iconText:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-light);
    color: var(--color-accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Platform-specific styling */
.social-media-link.platform-instagram .social-media-icon {
    /* Let emoji keep its natural colors */
    filter: drop-shadow(0 0 2px rgba(240, 148, 51, 0.3));
}

.social-media-link.platform-instagram.style-button:hover,
.social-media-link.platform-instagram.style-iconText:hover {
    border-color: #e6683c;
    background: rgba(240, 148, 51, 0.1);
}

.social-media-link.platform-twitter .social-media-icon {
    color: #6b8fb5;
    filter: drop-shadow(0 0 2px rgba(107, 143, 181, 0.2));
}

.social-media-link.platform-twitter.style-button:hover,
.social-media-link.platform-twitter.style-iconText:hover {
    border-color: #6b8fb5;
    background: rgba(107, 143, 181, 0.1);
    color: #6b8fb5;
}

.social-media-link.platform-bluesky .social-media-icon {
    color: #5a9bb8;
    filter: drop-shadow(0 0 2px rgba(90, 155, 184, 0.2));
}

.social-media-link.platform-bluesky.style-button:hover,
.social-media-link.platform-bluesky.style-iconText:hover {
    border-color: #5a9bb8;
    background: rgba(90, 155, 184, 0.1);
    color: #5a9bb8;
}

/* Icon styling */
.social-media-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.2s ease;
}

/* Text styling */
.social-media-text {
    font-weight: inherit;
    white-space: nowrap;
    /* Font family and size are applied inline via JavaScript */
    /* Ensure text doesn't get cut off */
    display: inline-block;
    vertical-align: middle;
}

/* Focus states for accessibility */
.social-media-link:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-accent-light);
}

/* Active states */
.social-media-link:active {
    transform: scale(0.98);
}

.social-media-link.style-button:active,
.social-media-link.style-iconText:active {
    transform: translateY(0);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .social-media-link.style-button,
    .social-media-link.style-iconText {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
    }
    
    .social-media-icon {
        font-size: 20px !important;
    }
}

@media (max-width: 480px) {
    .social-media-link.style-iconText .social-media-text {
        display: none;
    }
    
    .social-media-link.style-iconText {
        padding: var(--spacing-sm);
    }
    
    /* Stack buttons vertically on very small screens */
    .social-media-block-content.layout-horizontal .social-media-buttons {
        flex-direction: column;
    }
}

/* Button configuration UI styles */
.social-media-buttons-config {
    width: 100%;
}

.buttons-config-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--color-border);
}

.buttons-config-title {
    font-weight: 600;
    color: var(--color-text);
}

.buttons-config-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: var(--spacing-xs);
}

/* Scrollbar styling for buttons list */
.buttons-config-list::-webkit-scrollbar {
    width: 6px;
}

.buttons-config-list::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
    border-radius: var(--border-radius-sm);
}

.buttons-config-list::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--border-radius-sm);
    transition: background 0.2s ease;
}

.buttons-config-list::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent);
}

.button-config {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm);
    background: var(--color-bg-light);
}

.button-config-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--color-border);
}

.button-config-title {
    font-weight: 500;
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.btn {
    padding: var(--spacing-xs) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-bg);
    color: var(--color-text);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    box-shadow: var(--shadow-sm);
}

.btn:hover {
    background: var(--color-hover);
    border-color: var(--color-accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    border-radius: var(--border-radius);
}

.btn-primary {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
    font-weight: 600;
}

.btn-primary:hover {
    background: #FF8A5A;
    border-color: #FF8A5A;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-danger {
    background: var(--color-error);
    color: white;
    border-color: var(--color-error);
    font-weight: 600;
}

.btn-danger:hover {
    background: #FF7A65;
    border-color: #FF7A65;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn:disabled:hover {
    background: var(--color-bg);
    border-color: var(--color-border);
    transform: none;
    box-shadow: var(--shadow-sm);
}

/* Custom Button Styles */
.social-media-link.button-style-borderless {
    background: transparent !important;
    border: none !important;
    padding: var(--spacing-sm) var(--spacing-md);
}

.social-media-link.button-style-borderless:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    transform: translateY(-1px);
}

.social-media-link.button-style-filled {
    /* Styling applied via JavaScript */
}

.social-media-link.button-style-filled:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.social-media-link.button-style-outlined {
    background: transparent !important;
}

.social-media-link.button-style-outlined:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.social-media-link.button-style-rounded {
    /* Border radius applied via JavaScript */
}

.social-media-link.button-style-rounded:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.social-media-link.button-style-pills {
    /* Border radius applied via JavaScript */
    padding: var(--spacing-sm) var(--spacing-lg);
}

.social-media-link.button-style-pills:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Ensure custom styles take precedence over default styles */
.social-media-link[style] {
    /* Custom inline styles from JavaScript will override defaults */
}

/* Custom styled buttons should maintain proper text rendering */
.social-media-link.button-style-borderless .social-media-text,
.social-media-link.button-style-filled .social-media-text,
.social-media-link.button-style-outlined .social-media-text,
.social-media-link.button-style-rounded .social-media-text,
.social-media-link.button-style-pills .social-media-text {
    /* Ensure text inherits colors from parent link */
    color: inherit;
}

/* Custom icon styles */
.social-media-icon.custom-icon {
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
    border-radius: var(--border-radius-sm);
}

/* Custom icon upload UI */
.custom-icon-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.custom-icon-preview {
    display: inline-block;
    width: 32px;
    height: 32px;
    object-fit: contain;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    padding: 4px;
    background: var(--color-bg);
}

.default-icon-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px dashed var(--color-border);
    border-radius: var(--border-radius-sm);
    background: var(--color-bg-light);
    opacity: 0.7;
}

.btn-secondary {
    background: var(--color-bg-secondary);
    color: var(--color-text);
    border-color: var(--color-border);
    font-weight: 500;
}

.btn-secondary:hover {
    background: var(--color-hover);
    border-color: var(--color-accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}