/* Basic Reset or Global Styles */
body {
    font-family: sans-serif; /* Placeholder font */
    /* Example: Define global text color if not using Tailwind's text-foreground extensively */
}

/* 
Tailwind Custom Color Placeholders / Examples 
If you set up a local Tailwind CSS environment, you would define these in your tailwind.config.js.
For now, using the CDN, these specific class names (bg-primary, text-muted-foreground, etc.) 
will mostly fall back to Tailwind defaults or might not have an effect unless they are default Tailwind names.

:root {
    --color-primary: #HEXCODE; 
    --color-secondary: #HEXCODE;
    --color-accent: #HEXCODE;
    --color-background: #HEXCODE; 
    --color-foreground: #HEXCODE; 
    --color-muted-foreground: #HEXCODE;
    --color-card: #HEXCODE;
    --color-border: #HEXCODE;
}

.bg-primary { background-color: var(--color-primary); }
.text-primary { color: var(--color-primary); }
.hover\:text-primary:hover { color: var(--color-primary); }
.hover\:bg-primary\/90:hover { background-color: hsla(var(--primary-hsl), 0.9); } // Assuming HSL conversion for opacity

.bg-secondary { background-color: var(--color-secondary); }

.bg-accent { background-color: var(--color-accent); }
.hover\:bg-accent:hover { background-color: var(--color-accent); }
.text-accent-foreground { color: var(--color-foreground); } // Assuming accent foreground is same as main foreground for now
.hover\:text-accent-foreground:hover { color: var(--color-foreground); }

.bg-background { background-color: var(--color-background); }
.text-foreground { color: var(--color-foreground); }
.text-muted-foreground { color: var(--color-muted-foreground); }
.bg-card { background-color: var(--color-card); }
.border-input { border-color: var(--color-border); } // Or just 'border-border'
.border-border { border-color: var(--color-border); }

*/

/* Custom scrollbar hiding for gallery (if needed and not handled by Tailwind plugin) */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Additional custom styles can be added here */ 

/* You can add your own custom CSS here */

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Share Buttons Section */
.share-section {
    padding: 2rem 1rem;
    background-color: #27272a; /* zinc-800 */
    border-radius: 0.5rem;
    text-align: center;
    max-width: 800px;
    margin: 3rem auto;
}

.share-buttons-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

.share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px; /* rounded-full */
    color: white;
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.share-button:hover {
    transform: scale(1.1);
}

.share-button svg {
    width: 1.5rem; /* w-6 */
    height: 1.5rem; /* h-6 */
}

/* Social Media Colors */
.share-button.facebook { background-color: #1877F2; }
.share-button.twitter { background-color: #14171A; } /* X/Twitter Black */
.share-button.reddit { background-color: #FF4500; }
.share-button.linkedin { background-color: #0A66C2; }
.share-button.pinterest { background-color: #E60023; }
.share-button.copy-link { background-color: #6b7280; } /* gray-500 */

.copy-feedback {
    display: inline-block;
    margin-left: 0.75rem;
    color: #16a34a; /* green-600 */
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}