/**
 * Themed Photo & Video Frames - 1HourStore
 * Professional holiday-themed borders and backgrounds for store images
 * FIXED: Correct selectors + overflow removed for decorations
 */

/* BASE FRAME STRUCTURE */
.theme-photo-wrapper,
.theme-video-wrapper {
    position: relative;
    width: 100%;
    margin: 2rem 0;
}

.theme-photo-container,
.theme-video-container {
    position: relative;
    padding: 2rem;
    border-radius: 16px;
    /* NO overflow:hidden - decorations need to appear outside */
}

.store-photo {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Only clip the image itself */
}

/* Corner Decorations Base */
.theme-photo-container::before,
.theme-photo-container::after,
.theme-video-container::before,
.theme-video-container::after {
    position: absolute;
    font-size: 2.5rem;
    z-index: 10;
}

/* 🎃 HALLOWEEN THEME */
.halloween-theme.theme-photo-container,
.halloween-theme.theme-video-container {
    background: linear-gradient(135deg, #2d1b4e 0%, #1a0f2e 100%);
    border: 6px solid #F4831B;
    box-shadow: 
        0 0 30px rgba(144, 46, 187, 0.4),
        inset 0 0 40px rgba(144, 46, 187, 0.1);
}

.halloween-theme.theme-photo-container::before {
    content: "🎃";
    top: -15px;
    left: -15px;
}

.halloween-theme.theme-photo-container::after {
    content: "🦇";
    bottom: -15px;
    right: -15px;
}

.halloween-theme.theme-video-container::before {
    content: "👻";
    top: -15px;
    right: -15px;
}

.halloween-theme.theme-video-container::after {
    content: "🕷️";
    bottom: -15px;
    left: -15px;
}

/* 🦃 THANKSGIVING THEME */
.thanksgiving-theme.theme-photo-container,
.thanksgiving-theme.theme-video-container {
    background: linear-gradient(135deg, #f9f5f0 0%, #ede0d1 100%);
    border: 6px solid #A26B35;
    box-shadow: 
        0 0 30px rgba(193, 49, 28, 0.3),
        inset 0 0 40px rgba(193, 49, 28, 0.05);
}

.thanksgiving-theme.theme-photo-container::before,
.thanksgiving-theme.theme-video-container::before {
    content: "🍂";
    top: -15px;
    left: -15px;
    color: #C1311C;
}

.thanksgiving-theme.theme-photo-container::after,
.thanksgiving-theme.theme-video-container::after {
    content: "🌾";
    bottom: -15px;
    right: -15px;
    color: #A26B35;
}

.thanksgiving-theme.theme-photo-container {
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(193, 49, 28, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(162, 107, 53, 0.05) 0%, transparent 50%);
}

/* 🎄 CHRISTMAS THEME */
.christmas-theme.theme-photo-container,
.christmas-theme.theme-video-container {
    background: linear-gradient(135deg, #f0f8f5 0%, #e8f5e9 100%);
    border: 6px solid #165B33;
    box-shadow: 
        0 0 30px rgba(187, 37, 40, 0.3),
        inset 0 0 40px rgba(22, 91, 51, 0.08);
}

.christmas-theme.theme-photo-container::before,
.christmas-theme.theme-video-container::before {
    content: "🎄";
    top: -15px;
    left: -15px;
    color: #165B33;
}

.christmas-theme.theme-photo-container::after,
.christmas-theme.theme-video-container::after {
    content: "🎁";
    bottom: -15px;
    right: -15px;
    color: #BB2528;
}

.christmas-theme.theme-photo-container,
.christmas-theme.theme-video-container {
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(22, 91, 51, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(187, 37, 40, 0.03) 0%, transparent 50%);
}

.christmas-theme.theme-photo-wrapper::before {
    content: "🔔";
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 2rem;
    z-index: 20;
}

/* 🎉 NEW YEAR THEME */
.newyear-theme.theme-photo-container,
.newyear-theme.theme-video-container {
    background: linear-gradient(135deg, #051c38 0%, #03172F 100%);
    border: 6px solid #D7B030;
    box-shadow: 
        0 0 40px rgba(215, 176, 48, 0.4),
        inset 0 0 50px rgba(215, 176, 48, 0.1);
}

.newyear-theme.theme-photo-container::before,
.newyear-theme.theme-video-container::before {
    content: "✨";
    top: -15px;
    left: -15px;
    color: #D7B030;
}

.newyear-theme.theme-photo-container::after,
.newyear-theme.theme-video-container::after {
    content: "🎉";
    bottom: -15px;
    right: -15px;
    color: #D7B030;
}

.newyear-theme.theme-photo-container,
.newyear-theme.theme-video-container {
    background-image: 
        radial-gradient(circle at 15% 25%, rgba(215, 176, 48, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 85% 75%, rgba(215, 176, 48, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(215, 176, 48, 0.05) 0%, transparent 50%);
}

/* 🐰 EASTER THEME */
.easter-theme.theme-photo-container,
.easter-theme.theme-video-container {
    background: linear-gradient(135deg, #f8f5ff 0%, #f0f8ff 100%);
    border: 6px solid #A696CC;
    box-shadow: 
        0 0 30px rgba(166, 150, 204, 0.3),
        inset 0 0 40px rgba(197, 235, 213, 0.15);
}

.easter-theme.theme-photo-container::before,
.easter-theme.theme-video-container::before {
    content: "🐰";
    top: -15px;
    left: -15px;
    color: #A696CC;
}

.easter-theme.theme-photo-container::after,
.easter-theme.theme-video-container::after {
    content: "🌷";
    bottom: -15px;
    right: -15px;
    color: #C5EBD5;
}

.easter-theme.theme-photo-container,
.easter-theme.theme-video-container {
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(166, 150, 204, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(197, 235, 213, 0.05) 0%, transparent 50%);
}

.easter-theme.theme-photo-wrapper::after {
    content: "🥚";
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 2rem;
    z-index: 20;
}

/* 🇺🇸 4TH OF JULY THEME */
.july4th-theme.theme-photo-container,
.july4th-theme.theme-video-container {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 6px solid #B32134;
    box-shadow: 
        0 0 30px rgba(59, 59, 109, 0.3),
        inset 0 0 40px rgba(179, 33, 52, 0.08);
}

.july4th-theme.theme-photo-container::before,
.july4th-theme.theme-video-container::before {
    content: "⭐";
    top: -15px;
    left: -15px;
    color: #3B3B6D;
}

.july4th-theme.theme-photo-container::after,
.july4th-theme.theme-video-container::after {
    content: "🎆";
    bottom: -15px;
    right: -15px;
    color: #B32134;
}

.july4th-theme.theme-photo-container,
.july4th-theme.theme-video-container {
    background-image: 
        linear-gradient(90deg, rgba(179, 33, 52, 0.02) 0%, transparent 50%),
        linear-gradient(0deg, rgba(59, 59, 109, 0.02) 0%, transparent 50%);
}

.july4th-theme.theme-photo-wrapper::before {
    content: "🇺🇸";
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 2rem;
    z-index: 20;
}

/* STANDARD THEMES (NO DECORATIONS) */
.professional-theme.theme-photo-container,
.professional-theme.theme-video-container,
.elegant-theme.theme-photo-container,
.elegant-theme.theme-video-container,
.romantic-theme.theme-photo-container,
.romantic-theme.theme-video-container,
.rustic-theme.theme-photo-container,
.rustic-theme.theme-video-container,
.nostalgic-theme.theme-photo-container,
.nostalgic-theme.theme-video-container,
.futurist-theme.theme-photo-container,
.futurist-theme.theme-video-container {
    background: var(--background-alt);
    border: 4px solid var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.professional-theme.theme-photo-container::before,
.professional-theme.theme-photo-container::after,
.elegant-theme.theme-photo-container::before,
.elegant-theme.theme-photo-container::after,
.romantic-theme.theme-photo-container::before,
.romantic-theme.theme-photo-container::after,
.rustic-theme.theme-photo-container::before,
.rustic-theme.theme-photo-container::after,
.nostalgic-theme.theme-photo-container::before,
.nostalgic-theme.theme-photo-container::after,
.futurist-theme.theme-photo-container::before,
.futurist-theme.theme-photo-container::after {
    content: none !important;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .theme-photo-container,
    .theme-video-container {
        padding: 1.5rem;
    }
    
    .theme-photo-container::before,
    .theme-photo-container::after {
        font-size: 2rem;
    }
    
    .theme-photo-wrapper::before,
    .theme-photo-wrapper::after {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .theme-photo-container,
    .theme-video-container {
        padding: 1rem;
        border-width: 4px;
    }
    
    .theme-photo-container::before,
    .theme-photo-container::after {
        font-size: 1.5rem;
    }
}

/* HOVER EFFECTS */
.theme-photo-container:hover {
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

.halloween-theme.theme-photo-container:hover {
    box-shadow: 
        0 0 40px rgba(144, 46, 187, 0.6),
        inset 0 0 40px rgba(144, 46, 187, 0.15);
}

.christmas-theme.theme-photo-container:hover {
    box-shadow: 
        0 0 40px rgba(187, 37, 40, 0.4),
        inset 0 0 40px rgba(22, 91, 51, 0.12);
}

.newyear-theme.theme-photo-container:hover {
    box-shadow: 
        0 0 50px rgba(215, 176, 48, 0.5),
        inset 0 0 50px rgba(215, 176, 48, 0.15);
}

@media print {
    .theme-photo-container::before,
    .theme-photo-container::after,
    .theme-photo-wrapper::before,
    .theme-photo-wrapper::after {
        content: none !important;
    }
    
    .theme-photo-container,
    .theme-video-container {
        box-shadow: none;
        border: 2px solid #000;
    }
}