/**
 * WP Reels - Main Stylesheet
 */

/* Container and wrapper */
.wp-reels-container {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    background-color: #000;
    margin: 0;
    padding: 0;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.wp-reels-wrapper {
    position: relative;
    width: 100vw;
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none; /* Firefox */
    margin: 0;
    padding: 0;
}

.wp-reels-wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

/* Individual reel item */
.wp-reels-item {
    position: relative;
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    margin: 0;
    padding: 0;
}

.wp-reels-video-container {
    position: relative;
    width: 100vw;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.wp-reels-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    object-fit: cover;
    margin: 0;
    padding: 0;
}

/* Overlay elements */
.wp-reels-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    box-sizing: border-box;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.7) 100%);
    color: #fff;
    z-index: 10;
}

/* Phone number */
.wp-reels-phone {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 20;
}

.wp-reels-phone-link {
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.wp-reels-phone-link:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.wp-reels-phone-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Product link */
.wp-reels-product {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 20;
}

.wp-reels-buy-now {
    display: inline-block;
    background-color: #ff4d4d;
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.wp-reels-buy-now:hover {
    background-color: #ff3333;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.wp-reels-product-name {
    display: block;
    font-size: 12px;
    margin-top: 4px;
    text-align: center;
}

/* Title and content */
.wp-reels-title {
    position: absolute;
    bottom: 80px;
    left: 20px;
    max-width: 70%;
    z-index: 20;
}

.wp-reels-title-top {
    position: absolute;
    top: 20px;
    left: 20px;
    padding-top: 40px; /* Space for phone number */
    bottom: auto;
}

.wp-reels-title h3 {
    margin: 0 0 10px 0;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.wp-reels-content {
    position: absolute;
    bottom: 80px;
    left: 20px;
    max-width: 70%;
    z-index: 20;
}

.wp-reels-content p {
    margin: 0;
    font-size: 14px;
    color: #eee;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Play/Pause button */
.wp-reels-play-pause {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 15;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.wp-reels-video-container:hover .wp-reels-play-pause {
    opacity: 1;
}

.wp-reels-play-icon,
.wp-reels-pause-icon {
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.wp-reels-play-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>');
    display: none;
}

.wp-reels-pause-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>');
    display: block;
}

.wp-reels-play-pause.paused .wp-reels-play-icon {
    display: block;
}

.wp-reels-play-pause.paused .wp-reels-pause-icon {
    display: none;
}

/* Loading indicator */
.wp-reels-loading .wp-reels-loading-indicator {
    display: flex;
}

.wp-reels-loading-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 25;
}

.wp-reels-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Error message */
.wp-reels-error .wp-reels-error-message {
    display: flex;
}

.wp-reels-error-message {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 25;
    color: #fff;
    font-size: 16px;
    text-align: center;
    padding: 20px;
}

/* Actions (like, share) */
.wp-reels-actions {
    position: absolute;
    bottom: 80px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 20;
}

.wp-reels-action {
    margin-bottom: 20px;
    text-align: center;
}

.wp-reels-like-btn,
.wp-reels-share-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.wp-reels-like-btn:hover,
.wp-reels-share-btn:hover {
    transform: scale(1.1);
}

.wp-reels-like-icon {
    display: block;
    width: 30px;
    height: 30px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.7;
}

.wp-reels-liked .wp-reels-like-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="red"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
    opacity: 1;
}

.wp-reels-like-count {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.wp-reels-share-icon {
    display: block;
    width: 30px;
    height: 30px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.7;
}

.wp-reels-share-btn:hover .wp-reels-share-icon {
    opacity: 1;
}

/* Share modal */
.wp-reels-share-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.wp-reels-share-modal-content {
    background-color: #fff;
    border-radius: 10px;
    padding: 30px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    position: relative;
}

.wp-reels-share-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
}

.wp-reels-share-modal-content h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
    font-size: 20px;
}

.wp-reels-share-options {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.wp-reels-share-options a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    transition: transform 0.2s ease;
}

.wp-reels-share-options a:hover {
    transform: scale(1.1);
}

.wp-reels-share-whatsapp-icon,
.wp-reels-share-facebook-icon,
.wp-reels-share-instagram-icon {
    display: block;
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px;
}

.wp-reels-share-whatsapp-icon {
    background-color: #25D366;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M16.75 13.96c.25.13.41.2.46.3.06.11.04.61-.21 1.18-.2.56-1.24 1.1-1.7 1.12-.46.02-.47.36-2.96-.73-2.49-1.09-3.99-3.75-4.11-3.92-.12-.17-.96-1.38-.92-2.61.05-1.22.69-1.8.95-2.04.24-.26.51-.29.68-.26h.47c.15 0 .36-.06.55.45l.69 1.87c.06.13.1.28.01.44l-.27.41-.39.42c-.12.12-.26.25-.12.5.12.26.62 1.09 1.32 1.78.91.88 1.71 1.17 1.95 1.3.24.14.39.12.54-.04l.81-.94c.19-.25.35-.19.58-.11l1.67.88M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10c-1.97 0-3.8-.57-5.35-1.55L2 22l1.55-4.65A9.969 9.969 0 0 1 2 12 10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8c0 1.72.54 3.31 1.46 4.61L4.5 19.5l2.89-.96A7.95 7.95 0 0 0 12 20a8 8 0 0 0 8-8 8 8 0 0 0-8-8z"/></svg>');
}

.wp-reels-share-facebook-icon {
    background-color: #1877F2;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z"/></svg>');
}

.wp-reels-share-instagram-icon {
    background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z"/></svg>');
}

/* No reels message */
.wp-reels-no-reels {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #fff;
    font-size: 18px;
    text-align: center;
    padding: 20px;
}

/* Responsive styles */
@media (max-width: 768px) {
    .wp-reels-title-top {
        padding-top: 35px;
    }
    
    .wp-reels-content {
        bottom: 100px;
    }
    
    .wp-reels-actions {
        bottom: 100px;
    }
    
    .wp-reels-buy-now {
        padding: 8px 16px;
        font-size: 14px;
    }
    
    .wp-reels-phone-link {
        padding: 6px 12px;
        font-size: 14px;
    }
    
    .wp-reels-play-pause {
        width: 50px;
        height: 50px;
    }
    
    .wp-reels-play-icon,
    .wp-reels-pause-icon {
        width: 24px;
        height: 24px;
    }
}

/* Full width overrides */
body.has-wp-reels {
    overflow-x: hidden;
}

.entry-content .wp-reels-container,
.site-content .wp-reels-container,
.content-area .wp-reels-container,
.page-content .wp-reels-container,
.post-content .wp-reels-container,
.container .wp-reels-container,
.wrapper .wp-reels-container,
div[class*="content"] .wp-reels-container {
    max-width: 100vw !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

/* Admin styles */
.wp-reels-meta-box {
    margin: 15px 0;
}

.wp-reels-meta-box p {
    margin-bottom: 15px;
}

.wp-reels-meta-box label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
}

.wp-reels-meta-box .description {
    display: block;
    color: #666;
    font-style: italic;
    margin-top: 5px;
}

#wp-reels-video-preview {
    margin-top: 15px;
}

.wp-reels-shortcode-info {
    margin-top: 30px;
    padding: 20px;
    background-color: #f9f9f9;
    border-left: 4px solid #0073aa;
}

.wp-reels-shortcode-info code {
    display: inline-block;
    padding: 5px 10px;
    background-color: #f1f1f1;
    border: 1px solid #ddd;
    font-family: monospace;
    font-size: 14px;
}