/**
 * EgySpeed Bundle - Combined Stylesheet
 * Contains Fotorama Slider & Custom Components
 * 
 * @package EgySpeed
 * @version 1.0.0
 * @updated 2026-08-05
 */

/* ==========================================
   EgySpeed Custom Video Block Styles
   ========================================== */
.egyspeed-yt-block-container { margin: 25px 0; width: 100%; }
.egyspeed-yt-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; background-color: #000; cursor: pointer; overflow: hidden; border-radius: 8px; }
.egyspeed-yt-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.egyspeed-yt-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

.egyspeed-yt-caption-text { text-align: center; margin-top: 10px; font-weight: 500; font-size: 13px; color: #777; line-height: 1.5; }
.dark-skin .egyspeed-yt-caption-text { color: #aaa; }

.egyspeed-yt-channel-badge { position: absolute; top: 15px; right: 15px; background: rgba(255, 255, 255, 0.95); color: #111; padding: 6px 12px; border-radius: 30px; display: flex; align-items: center; gap: 10px; z-index: 2; box-shadow: 0 2px 10px rgba(0,0,0,0.3); backdrop-filter: blur(4px); }
.egyspeed-yt-avatar { position: static !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; object-fit: cover !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; }
.egyspeed-yt-channel-text { display: flex; flex-direction: column; justify-content: center; text-align: right; line-height: 1.2; }
.egyspeed-yt-creator-label { font-size: 12px; font-weight: 800; color: #111; }
.egyspeed-yt-channel-name { font-size: 12px; font-weight: 400; color: #555; }

.dark-skin .egyspeed-yt-channel-badge { background: rgba(17, 17, 17, 0.95); color: #fff; border: 1px solid rgba(255,255,255,0.1); }
.dark-skin .egyspeed-yt-creator-label { color: #fff; }
.dark-skin .egyspeed-yt-channel-name { color: #bbb; }

.egyspeed-yt-duration { position: absolute; top: 15px; left: 15px; background: #fff; color: #111; font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 30px; display: flex; align-items: center; gap: 6px; z-index: 2; direction: ltr; box-shadow: 0 2px 10px rgba(0,0,0,0.3); backdrop-filter: blur(4px); }
.dark-skin .egyspeed-yt-duration { background: #111; color: #fff; border: 1px solid rgba(255,255,255,0.1); }

.egyspeed-yt-overlay-title { position: absolute; bottom: 15px; right: 15px; left: 15px; color: #111; background: #fff; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); font-size: 19px; font-weight: 700; padding: 10px 20px 10px 50px; border-radius: 50px; pointer-events: none; z-index: 2; text-align: center; line-height: 1.4; overflow: hidden; }
.dark-skin .egyspeed-yt-overlay-title { color: #fff; background: #111; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4); }

.egyspeed-yt-overlay-title::before { content: "\f04b"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; top: 3px; right: 3px; bottom: 3px; aspect-ratio: 1 / 1; background: #111; color: var(--brand-color); font-size: 15px; display: flex; align-items: center; justify-content: center; border-radius: 50%; z-index: 2; transition: transform 0.3s ease; padding-left: 2px; }
.dark-skin .egyspeed-yt-overlay-title::before { background: #333; }

.egyspeed-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; background: #fff !important; border: 2px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important; z-index: 3; }
.egyspeed-play-btn svg { width: 28px; height: 28px; fill: var(--brand-color, #e60000) !important; margin: 0px !important; }

.egyspeed-yt-wrapper:hover .egyspeed-play-btn { background: var(--brand-color, #e60000) !important; border-color: #fff !important; transform: translate(-50%, -50%) scale(1.12); }
.egyspeed-yt-wrapper:hover .egyspeed-play-btn svg { fill: #fff !important; }
.dark-skin .egyspeed-play-btn { background: #111 !important; border: 2px solid #333; }

@media (max-width: 600px) {
    .egyspeed-yt-channel-badge { top: 10px; right: 10px; padding: 4px 8px; gap: 6px; }
    .egyspeed-yt-avatar { width: 28px !important; height: 28px !important; }
    .egyspeed-yt-creator-label, .egyspeed-yt-channel-name { font-size: 10px; }
    .egyspeed-yt-overlay-title { font-size: 11px; bottom: 10px; right: 10px; left: 10px; padding: 8px 15px 8px 40px; }
    .egyspeed-yt-overlay-title::before { font-size: 11px; }
    .egyspeed-yt-duration { top: 10px; left: 10px; font-size: 11px; padding: 3px 7px; }
    .egyspeed-play-btn { width: 52px; height: 52px; }
    .egyspeed-play-btn svg { width: 22px; height: 22px; }
}