/**
 * TurnKey Directories 2.0 - Ad Banner System
 * Professional ad banner styling for business listing pages
 * Following industry best practices for visual ad banners
 */

/* === AD BANNER LAYOUT SYSTEM === */

/* Main Container with Sidebar Layout */
.glass-business-container {
    display: flex !important;
    gap: 20px !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 40px 20px !important;
    box-sizing: border-box !important;
    position: relative !important;
    align-items: flex-start !important;
}

/* Left Sidebar Ad Banner */
.glass-ad-sidebar-left {
    width: 200px !important;
    min-height: 600px !important;
    position: sticky !important;
    top: 20px !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
    order: 1 !important;
}

/* Right Sidebar Ad Banner */
.glass-ad-sidebar-right {
    width: 200px !important;
    min-height: 600px !important;
    position: sticky !important;
    top: 20px !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
    order: 3 !important;
}

/* Main Content Area */
.glass-main-card {
    flex: 1 !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 1 !important;
    order: 2 !important;
}

/* === AD BANNER STYLES === */

/* Base Ad Banner Styling */
.glass-ad-banner {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.90) 0%, 
        rgba(255, 255, 255, 0.85) 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 200px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Ad Banner Hover Effects */
.glass-ad-banner:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.15) 0%, 
        rgba(255, 255, 255, 0.1) 100%) !important;
}

/* Banner cards: Make outer wrapper transparent - only inner glass-ad-banner shows */
.glass-card-wrapper.banner-card .glass-card-top {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Banner cards: Disable hover transform on outer layer */
.glass-card-wrapper.banner-card .glass-card-top:hover {
    transform: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Ad Banner Content - Use dashboard text color with high specificity */
.glass-business-container .glass-ad-banner .glass-ad-content,
.glass-ad-sidebar-left .glass-ad-banner .glass-ad-content,
.glass-ad-sidebar-right .glass-ad-banner .glass-ad-content {
    color: var(--tkd-text-color, #000000) !important;
    text-shadow: none !important;
    width: 100% !important;
}

/* Ad Banner Icon - Use dashboard text color with high specificity */
.glass-business-container .glass-ad-banner .glass-ad-icon,
.glass-ad-sidebar-left .glass-ad-banner .glass-ad-icon,
.glass-ad-sidebar-right .glass-ad-banner .glass-ad-icon {
    font-size: 2.5rem !important;
    margin-bottom: 12px !important;
    opacity: 0.9 !important;
    color: var(--tkd-text-color, #000000) !important;
    text-shadow: none !important;
}

/* Ad Banner Title - Use dashboard text color with high specificity */
.glass-business-container .glass-ad-banner .glass-ad-content h3,
.glass-ad-sidebar-left .glass-ad-banner .glass-ad-content h3,
.glass-ad-sidebar-right .glass-ad-banner .glass-ad-content h3 {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin: 0 0 8px 0 !important;
    color: var(--tkd-text-color, #000000) !important;
    line-height: 1.3 !important;
    text-shadow: none !important;
}

/* Ad Banner Description - Use dashboard text color with high specificity */
.glass-business-container .glass-ad-banner .glass-ad-content p,
.glass-ad-sidebar-left .glass-ad-banner .glass-ad-content p,
.glass-ad-sidebar-right .glass-ad-banner .glass-ad-content p {
    font-size: 0.9rem !important;
    margin: 0 0 16px 0 !important;
    opacity: 0.8 !important;
    color: var(--tkd-text-color-secondary, rgba(0, 0, 0, 0.7)) !important;
    line-height: 1.4 !important;
    text-shadow: none !important;
}

/* Ad Banner Link/Button - Use dashboard text color */
.glass-ad-link {
    display: inline-block !important;
    background: linear-gradient(135deg, var(--tkd-accent-color, #ff9500) 0%, rgba(var(--tkd-accent-rgb, 255, 149, 0), 0.8) 100%) !important;
    color: #ffffff !important; /* Keep white for contrast on colored background */
    text-decoration: none !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    border: none !important;
    text-shadow: none !important;
    box-shadow: 0 2px 8px rgba(var(--tkd-accent-rgb, 255, 149, 0), 0.2) !important;
}

.glass-ad-link:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(var(--tkd-accent-rgb, 255, 149, 0), 0.3) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Ad Banner Image */
.glass-ad-image {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.3s ease !important;
}

.glass-ad-image:hover {
    transform: scale(1.02) !important;
}

/* === AD BANNER SIZES (Industry Standard) === */

/* Standard Banner Sizes */
.glass-ad-banner.leaderboard {
    width: 728px !important;
    height: 90px !important;
    min-height: 90px !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 15px 20px !important;
}

.glass-ad-banner.skyscraper {
    width: 160px !important;
    height: 600px !important;
    min-height: 600px !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 20px 15px !important;
}

.glass-ad-banner.rectangle {
    width: 300px !important;
    height: 250px !important;
    min-height: 250px !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 20px !important;
}

.glass-ad-banner.square {
    width: 250px !important;
    height: 250px !important;
    min-height: 250px !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 20px !important;
}

/* === RESPONSIVE DESIGN === */

/* Tablet Layout - Show sidebars on tablet, hide on mobile */
@media (max-width: 1024px) and (min-width: 769px) {
    .glass-business-container {
        flex-direction: column !important;
        gap: 20px !important;
        padding: 30px 15px !important;
    }
    
    .glass-ad-sidebar-left,
    .glass-ad-sidebar-right {
        width: 100% !important;
        min-height: 200px !important;
        position: static !important;
        order: 2 !important;
    }
    
    .glass-main-card {
        order: 1 !important;
        max-width: 100% !important;
    }
    
    .glass-ad-banner {
        min-height: 150px !important;
    }
}

/* Mobile Layout - Completely hide sidebars on mobile */
@media (max-width: 768px) {
    .glass-business-container {
        flex-direction: column !important;
        gap: 15px !important;
        padding: 20px 10px !important;
    }
    
    /* Completely hide sidebar banners on mobile - HIGH SPECIFICITY */
    .glass-business-container .glass-ad-sidebar-left,
    .glass-business-container .glass-ad-sidebar-right,
    .glass-ad-sidebar-left,
    .glass-ad-sidebar-right {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
    }
    
    .glass-main-card {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .glass-ad-banner {
        min-height: 120px !important;
        padding: 15px !important;
        margin: 10px 0 !important;
    }
}

/* Mobile Layout - Additional mobile optimizations */
@media (max-width: 768px) {
    .glass-ad-icon {
        font-size: 2rem !important;
        margin-bottom: 8px !important;
    }
    
    .glass-ad-content h3 {
        font-size: 1rem !important;
        margin-bottom: 6px !important;
    }
    
    .glass-ad-content p {
        font-size: 0.8rem !important;
        margin-bottom: 12px !important;
    }
    
    .glass-ad-link {
        padding: 8px 14px !important;
        font-size: 0.8rem !important;
    }
}

/* Small Mobile - Further optimize for very small screens */
@media (max-width: 480px) {
    .glass-business-container {
        padding: 15px 8px !important;
        gap: 12px !important;
        flex-direction: column !important;
    }
    
    /* Ensure sidebars remain hidden on small mobile */
    .glass-ad-sidebar-left,
    .glass-ad-sidebar-right {
        display: none !important;
    }
    
    /* Optimize main content for small mobile */
    .glass-main-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Optimize middle banners for small mobile */
    .glass-ad-banner {
        min-height: 100px !important;
        padding: 12px !important;
        margin: 8px 0 !important;
    }
    
    .glass-ad-icon {
        font-size: 1.8rem !important;
        margin-bottom: 6px !important;
    }
    
    .glass-ad-content h3 {
        font-size: 0.9rem !important;
        margin-bottom: 4px !important;
    }
    
    .glass-ad-content p {
        font-size: 0.75rem !important;
        margin-bottom: 10px !important;
    }
    
    .glass-ad-link {
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
    }
}

/* === AD BANNER ANIMATIONS === */

/* Fade in animation for ad banners */
@keyframes adBannerFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.glass-ad-banner {
    animation: adBannerFadeIn 0.6s ease-out forwards;
}

.glass-ad-sidebar-left .glass-ad-banner {
    animation-delay: 0.2s;
}

.glass-ad-sidebar-right .glass-ad-banner {
    animation-delay: 0.4s;
}

/* === AD BANNER PLACEHOLDER STYLES === */

/* Placeholder for empty ad slots */
.glass-ad-placeholder {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    color: rgba(255, 255, 255, 0.6) !important;
    text-align: center !important;
    padding: 20px !important;
}

.glass-ad-placeholder-icon {
    font-size: 2rem !important;
    margin-bottom: 8px !important;
    opacity: 0.7 !important;
}

.glass-ad-placeholder-text {
    font-size: 0.9rem !important;
    opacity: 0.8 !important;
    line-height: 1.4 !important;
}

/* === AD BANNER ACCESSIBILITY === */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .glass-ad-banner {
        background: rgba(255, 255, 255, 0.25) !important;
        border: 2px solid rgba(255, 255, 255, 0.5) !important;
    }
    
    .glass-ad-content,
    .glass-ad-content h3,
    .glass-ad-content p {
        color: #ffffff !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .glass-ad-banner {
        animation: none !important;
        transition: none !important;
    }
    
    .glass-ad-banner:hover {
        transform: none !important;
    }
    
    .glass-ad-link:hover {
        transform: none !important;
    }
    
    .glass-ad-image:hover {
        transform: none !important;
    }
}

/* === AD BANNER PERFORMANCE OPTIMIZATIONS === */

/* GPU acceleration for smooth animations */
.glass-ad-banner {
    will-change: transform, box-shadow !important;
    transform: translateZ(0) !important;
}

/* Contain layout for better performance */
.glass-ad-sidebar-left,
.glass-ad-sidebar-right {
    contain: layout style paint !important;
}

/* === AD BANNER THEMING === */

/* Dark theme support */
@media (prefers-color-scheme: dark) {
    .glass-ad-banner {
        background: linear-gradient(135deg, 
            rgba(0, 0, 0, 0.3) 0%, 
            rgba(0, 0, 0, 0.2) 100%) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }
}

/* Light theme support */
@media (prefers-color-scheme: light) {
    .glass-ad-banner {
        background: linear-gradient(135deg, 
            rgba(255, 255, 255, 0.2) 0%, 
            rgba(255, 255, 255, 0.15) 100%) !important;
        border-color: rgba(0, 0, 0, 0.1) !important;
    }
}

/* === AD BANNER UTILITIES === */

/* Hide ad banners when needed */
.glass-ad-banner.hidden {
    display: none !important;
}

/* Show ad banners */
.glass-ad-banner.visible {
    display: flex !important;
}

/* Ad banner loading state */
.glass-ad-banner.loading {
    opacity: 0.6 !important;
    pointer-events: none !important;
}

/* Ad banner error state */
.glass-ad-banner.error {
    background: linear-gradient(135deg, 
        rgba(239, 68, 68, 0.1) 0%, 
        rgba(220, 38, 38, 0.1) 100%) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

/* === AD BANNER DEBUGGING === */

/* Debug mode for development */
.glass-ad-banner.debug {
    border: 2px dashed rgba(255, 255, 255, 0.5) !important;
    background: linear-gradient(135deg, 
        rgba(255, 0, 0, 0.1) 0%, 
        rgba(0, 255, 0, 0.1) 100%) !important;
}

.glass-ad-banner.debug::before {
    content: "AD BANNER DEBUG" !important;
    position: absolute !important;
    top: 5px !important;
    left: 5px !important;
    font-size: 10px !important;
    color: #ff0000 !important;
    background: rgba(255, 255, 255, 0.9) !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    z-index: 1000 !important;
}

/* Fix for white bar issue - ensure proper display */
.glass-ad-sidebar-left,
.glass-ad-sidebar-right {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure banners are visible and properly positioned */
.glass-ad-sidebar-left .glass-ad-banner,
.glass-ad-sidebar-right .glass-ad-banner {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
}

/* Fix for any conflicting styles */
.glass-business-container .glass-ad-sidebar-left,
.glass-business-container .glass-ad-sidebar-right {
    position: sticky !important;
    top: 20px !important;
    z-index: 10 !important;
    display: block !important;
    width: 200px !important;
    min-height: 600px !important;
    flex-shrink: 0 !important;
}

/* === CRITICAL OVERRIDE FOR DASHBOARD COLOR INTEGRATION === */
/* Force all ad banner text to use dashboard color with maximum specificity */

/* Override all ad banner text elements */
.glass-business-container .glass-ad-banner *,
.glass-ad-sidebar-left .glass-ad-banner *,
.glass-ad-sidebar-right .glass-ad-banner *,
.glass-business-container .glass-ad-sidebar-left *,
.glass-business-container .glass-ad-sidebar-right * {
    color: var(--tkd-text-color, #000000) !important;
    text-shadow: none !important;
}

/* Specific overrides for different text elements */
.glass-business-container .glass-ad-banner .glass-ad-content,
.glass-ad-sidebar-left .glass-ad-banner .glass-ad-content,
.glass-ad-sidebar-right .glass-ad-banner .glass-ad-content,
.glass-business-container .glass-ad-sidebar-left .glass-ad-content,
.glass-business-container .glass-ad-sidebar-right .glass-ad-content {
    color: var(--tkd-text-color, #000000) !important;
    text-shadow: none !important;
}

.glass-business-container .glass-ad-banner .glass-ad-content h3,
.glass-ad-sidebar-left .glass-ad-banner .glass-ad-content h3,
.glass-ad-sidebar-right .glass-ad-banner .glass-ad-content h3,
.glass-business-container .glass-ad-sidebar-left .glass-ad-content h3,
.glass-business-container .glass-ad-sidebar-right .glass-ad-content h3 {
    color: var(--tkd-text-color, #000000) !important;
    text-shadow: none !important;
}

.glass-business-container .glass-ad-banner .glass-ad-content p,
.glass-ad-sidebar-left .glass-ad-banner .glass-ad-content p,
.glass-ad-sidebar-right .glass-ad-banner .glass-ad-content p,
.glass-business-container .glass-ad-sidebar-left .glass-ad-content p,
.glass-business-container .glass-ad-sidebar-right .glass-ad-content p {
    color: var(--tkd-text-color-secondary, rgba(0, 0, 0, 0.7)) !important;
    text-shadow: none !important;
}

.glass-business-container .glass-ad-banner .glass-ad-icon,
.glass-ad-sidebar-left .glass-ad-banner .glass-ad-icon,
.glass-ad-sidebar-right .glass-ad-banner .glass-ad-icon,
.glass-business-container .glass-ad-sidebar-left .glass-ad-icon,
.glass-business-container .glass-ad-sidebar-right .glass-ad-icon {
    color: var(--tkd-text-color, #000000) !important;
    text-shadow: none !important;
}

/* Override any existing color declarations with maximum specificity */
body .glass-business-container .glass-ad-banner .glass-ad-content,
body .glass-ad-sidebar-left .glass-ad-banner .glass-ad-content,
body .glass-ad-sidebar-right .glass-ad-banner .glass-ad-content,
body .glass-business-container .glass-ad-sidebar-left .glass-ad-content,
body .glass-business-container .glass-ad-sidebar-right .glass-ad-content {
    color: var(--tkd-text-color, #000000) !important;
    text-shadow: none !important;
}

body .glass-business-container .glass-ad-banner .glass-ad-content h3,
body .glass-ad-sidebar-left .glass-ad-banner .glass-ad-content h3,
body .glass-ad-sidebar-right .glass-ad-banner .glass-ad-content h3,
body .glass-business-container .glass-ad-sidebar-left .glass-ad-content h3,
body .glass-business-container .glass-ad-sidebar-right .glass-ad-content h3 {
    color: var(--tkd-text-color, #000000) !important;
    text-shadow: none !important;
}

body .glass-business-container .glass-ad-banner .glass-ad-content p,
body .glass-ad-sidebar-left .glass-ad-banner .glass-ad-content p,
body .glass-ad-sidebar-right .glass-ad-banner .glass-ad-content p,
body .glass-business-container .glass-ad-sidebar-left .glass-ad-content p,
body .glass-business-container .glass-ad-sidebar-right .glass-ad-content p {
    color: var(--tkd-text-color-secondary, rgba(0, 0, 0, 0.7)) !important;
    text-shadow: none !important;
}

body .glass-business-container .glass-ad-banner .glass-ad-icon,
body .glass-ad-sidebar-left .glass-ad-banner .glass-ad-icon,
body .glass-ad-sidebar-right .glass-ad-banner .glass-ad-icon,
body .glass-business-container .glass-ad-sidebar-left .glass-ad-icon,
body .glass-business-container .glass-ad-sidebar-right .glass-ad-icon {
    color: var(--tkd-text-color, #000000) !important;
    text-shadow: none !important;
}

/* === CRITICAL MOBILE SIDEBAR HIDE - MAXIMUM SPECIFICITY === */
/* This rule MUST be at the end to override all other rules */
@media (max-width: 768px) {
    /* Maximum specificity with html and body prefix */
    html body .glass-business-container .glass-ad-sidebar-left,
    html body .glass-business-container .glass-ad-sidebar-right,
    html body .glass-ad-sidebar-left,
    html body .glass-ad-sidebar-right,
    body .glass-business-container .glass-ad-sidebar-left,
    body .glass-business-container .glass-ad-sidebar-right,
    body .glass-ad-sidebar-left,
    body .glass-ad-sidebar-right,
    .glass-business-container .glass-ad-sidebar-left,
    .glass-business-container .glass-ad-sidebar-right,
    .glass-ad-sidebar-left[style],
    .glass-ad-sidebar-right[style],
    div.glass-ad-sidebar-left,
    div.glass-ad-sidebar-right,
    [class*="glass-ad-sidebar"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        z-index: -9999 !important;
        pointer-events: none !important;
        clip: rect(0, 0, 0, 0) !important;
        clip-path: inset(50%) !important;
        border: 0 !important;
    }
    
    /* Target elements with specific inline styles */
    div[style*="width: 300px"][style*="min-height: 600px"],
    .glass-business-container > div[style*="width: 300px"],
    .glass-business-container > div[style*="order: 1"][style*="position: sticky"],
    .glass-business-container > div[style*="order: 3"][style*="position: sticky"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        pointer-events: none !important;
    }
}