.zebra-social-bar {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 12px 18px;
margin-bottom: 25px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.zebra-social-title {
font-weight: 700;
font-size: 0.95rem;
color: #333;
}
.zebra-social-buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.zebra-btn {
display: inline-block;
padding: 6px 14px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
color: #fff !important;
text-decoration: none !important;
transition: opacity 0.2s ease-in-out;
}
.zebra-btn:hover {
opacity: 0.88;
}
.zebra-btn-yt { background-color: #ff0000; }
.zebra-btn-fb { background-color: #1877f2; }
.zebra-btn-x  { background-color: #000000; }
.zebra-btn-ig { background-color: #e1306c; } .zebra-yt-container {
margin-top: 35px;
padding-top: 20px;
border-top: 2px solid #eaeaea;
}
.zebra-yt-title {
font-size: 1.5rem;
margin-bottom: 20px;
color: #222;
}
.zebra-yt-grid {
display: grid;
gap: 24px;
}
.zebra-yt-cols-1 { grid-template-columns: 1fr; }
.zebra-yt-cols-2 { grid-template-columns: repeat(2, 1fr); }
.zebra-yt-cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) {
.zebra-yt-cols-2,
.zebra-yt-cols-3 {
grid-template-columns: 1fr;
}
}
.zebra-yt-item {
background: #ffffff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
border: 1px solid #f0f0f0;
display: flex;
flex-direction: column;
}
.zebra-yt-wrapper {
position: relative;
padding-bottom: 56.25%; height: 0;
overflow: hidden;
background: #000;
}
.zebra-yt-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
} .zebra-yt-meta {
padding: 12px 14px;
background: #fff;
}
.zebra-yt-video-title {
font-size: 0.95rem;
font-weight: 600;
line-height: 1.35;
color: #0f0f0f !important;
text-decoration: none !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 0.15s ease;
}
.zebra-yt-video-title:hover {
color: #ff0000 !important;
}
.zebra-yt-credit {
font-size: 0.8rem;
text-align: right;
margin-top: 14px;
color: #777;
}
.zebra-yt-credit a {
color: #555;
text-decoration: none;
font-weight: 600;
}
.zebra-yt-credit a:hover {
text-decoration: underline;
}