/**
 * Banner Frontend Styles - UPDATED AT <?php echo date('Y-m-d H:i:s'); ?>
 * Styling for website banners (left and right positions)
 * VERSION: 1.0.<?php echo time(); ?>
 */

/* Banner Container */
#website-banners {
    position: relative;
    z-index: 30;
    pointer-events: none;
}

/* Individual Banner Styles */
.website-banner {
    position: fixed;
    z-index: 30;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    pointer-events: auto;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
}

/* Left Banner Positioning */
.website-banner-left {
    left: 20px;
}

/* Right Banner Positioning */
.website-banner-right {
    right: 20px;
}

/* Vertical Position Modifiers */
.website-banner-position-top {
    top: 20px !important;
    bottom: auto !important;
}

.website-banner-position-center {
    top: 50% !important;
    transform: translateY(-50%);
    bottom: auto !important;
}

.website-banner-position-bottom {
    bottom: 20px !important;
    top: auto !important;
}

/* Left Banner with Vertical Positions */
.website-banner-left.website-banner-position-top {
    animation: bannerSlideInLeft 0.6s ease-out 1s forwards;
}

.website-banner-left.website-banner-position-center {
    animation: bannerSlideInLeftCenter 0.6s ease-out 1s forwards;
}

.website-banner-left.website-banner-position-bottom {
    animation: bannerSlideInLeft 0.6s ease-out 1s forwards;
}

/* Right Banner with Vertical Positions */
.website-banner-right.website-banner-position-top {
    animation: bannerSlideInRight 0.6s ease-out 1s forwards;
}

.website-banner-right.website-banner-position-center {
    animation: bannerSlideInRightCenter 0.6s ease-out 1s forwards;
}

.website-banner-right.website-banner-position-bottom {
    animation: bannerSlideInRight 0.6s ease-out 1s forwards;
}

/* Banner Image */
.banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fill container completely, may crop image */
    object-position: center;
    display: block;
    transition: none; /* Remove transform transition */
}

/* Banner Link Hover Effect - Remove scaling */
.banner-link:hover .banner-image {
    /* No transform to prevent shifting */
}

/* Close Button */
.banner-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    z-index: 5;
    transition: all 0.2s ease;
    opacity: 0.8;
}

.banner-close:hover {
    background: rgba(0, 0, 0, 0.9);
    opacity: 1;
    transform: scale(1.1);
}

.banner-close:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Banner Hover Effects - Subtle without scaling */
.website-banner:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    /* Remove transform scaling to prevent shifting */
}

.website-banner:hover .banner-close {
    opacity: 1;
}

/* Banner Animations */
/* Left Banner Animations */
@keyframes bannerSlideInLeft {
    from {
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px) translateX(-20px);
    }
    to {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) translateX(0);
    }
}

@keyframes bannerSlideInLeftCenter {
    from {
        opacity: 0;
        visibility: hidden;
        transform: translateY(calc(-50% + 20px)) translateX(-20px);
    }
    to {
        opacity: 1;
        visibility: visible;
        transform: translateY(-50%) translateX(0);
    }
}

/* Right Banner Animations */
@keyframes bannerSlideInRightCenter {
    from {
        opacity: 0;
        visibility: hidden;
        transform: translateY(calc(-50% + 20px)) translateX(20px);
    }
    to {
        opacity: 1;
        visibility: visible;
        transform: translateY(-50%) translateX(0);
    }
}

@keyframes bannerSlideInRight {
    from {
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px) translateX(20px);
    }
    to {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) translateX(0);
    }
}

/* Banner Close Animation */
.website-banner.closing {
    animation: bannerSlideOut 0.3s ease-in forwards;
}

@keyframes bannerSlideOut {
    from {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) translateX(0);
    }
    to {
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px) translateX(-20px);
    }
}

.website-banner-right.closing {
    animation: bannerSlideOutRight 0.3s ease-in forwards;
}

@keyframes bannerSlideOutRight {
    from {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) translateX(0);
    }
    to {
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px) translateX(20px);
    }
}


/* Responsive Design */

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
    .website-banner-left {
        left: 30px;
    }
    
    .website-banner-right {
        right: 30px;
    }
    
    .website-banner-top {
        top: 30px;
    }
    
    .website-banner-bottom {
        bottom: 30px;
    }
}

/* Desktop (1024px - 1399px) */
@media (max-width: 1399px) {
    .website-banner-left {
        left: 15px;
    }
    
    .website-banner-right {
        right: 15px;
    }
    
    .website-banner-top {
        top: 15px;
    }
    
    .website-banner-bottom {
        bottom: 15px;
    }
}

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
    .website-banner {
        width: var(--banner-mobile-width, 160px) !important;
        height: var(--banner-mobile-height, 200px) !important;
    }
    
    .website-banner-left {
        left: 10px;
    }
    
    .website-banner-right {
        right: 10px;
    }
    
    .website-banner-top {
        top: 10px;
    }
    
    .website-banner-bottom {
        bottom: 10px;
    }
    
    .banner-close {
        width: 24px;
        height: 24px;
        font-size: 10px;
        top: 6px;
        right: 6px;
    }
}

/* Mobile (480px - 767px) */
@media (max-width: 767px) {
    .website-banner {
        width: var(--banner-mobile-width, 140px) !important;
        height: var(--banner-mobile-height, 180px) !important;
    }
    
    .website-banner-left.website-banner-top,
    .website-banner-left.website-banner-bottom {
        left: 8px;
        animation: bannerSlideInMobile 0.6s ease-out 1s forwards;
    }
    
    .website-banner-left.website-banner-center {
        left: 8px;
        animation: bannerSlideInMobileCenter 0.6s ease-out 1s forwards;
    }
    
    .website-banner-right.website-banner-top,
    .website-banner-right.website-banner-bottom {
        right: 8px;
        animation: bannerSlideInMobileRight 0.6s ease-out 1s forwards;
    }
    
    .website-banner-right.website-banner-center {
        right: 8px;
        animation: bannerSlideInMobileRightCenter 0.6s ease-out 1s forwards;
    }
    
    .website-banner-top {
        top: 8px;
    }
    
    .website-banner-bottom {
        bottom: 8px;
    }
    
    @keyframes bannerSlideInMobile {
        from {
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
    }
    
    @keyframes bannerSlideInMobileRight {
        from {
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
    }
    
    @keyframes bannerSlideInMobileCenter {
        from {
            opacity: 0;
            visibility: hidden;
            transform: translateY(calc(-50% + 20px));
        }
        to {
            opacity: 1;
            visibility: visible;
            transform: translateY(-50%);
        }
    }
    
    @keyframes bannerSlideInMobileRightCenter {
        from {
            opacity: 0;
            visibility: hidden;
            transform: translateY(calc(-50% + 20px));
        }
        to {
            opacity: 1;
            visibility: visible;
            transform: translateY(-50%);
        }
    }
    
    
    .website-banner:hover {
        transform: none;
    }
    
    .banner-close {
        width: 22px;
        height: 22px;
        font-size: 9px;
        top: 4px;
        right: 4px;
    }
}

/* Small Mobile (max 479px) */
@media (max-width: 479px) {
    .website-banner {
        width: var(--banner-mobile-width, 120px) !important;
        height: var(--banner-mobile-height, 160px) !important;
    }
    
    .website-banner-left {
        left: 5px;
    }
    
    .website-banner-right {
        right: 5px;
    }
    
    .website-banner-top {
        top: 5px;
    }
    
    .website-banner-bottom {
        bottom: 5px;
    }
}

/* Accessibility Improvements */
.website-banner:focus-within {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .website-banner {
        animation: none;
        opacity: 1;
        visibility: visible;
    }
    
    .website-banner,
    .banner-image,
    .banner-close {
        transition: none;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .website-banner {
        border: 2px solid #000;
    }
    
    .banner-close {
        background: #000;
        border: 1px solid #fff;
    }
}

/* Print Styles - Hide banners when printing */
@media print {
    #website-banners,
    .website-banner {
        display: none !important;
    }
}

/* Z-index Management */
.website-banner {
    z-index: 30; /* Below modals (40+) but above content */
}

/* Ensure banners don't interfere with navigation */
body.admin-bar .website-banner-bottom {
    bottom: 52px; /* Adjust for WordPress admin bar */
}

@media (max-width: 782px) {
    body.admin-bar .website-banner-bottom {
        bottom: 59px;
    }
}

/* Banner loading state */
.website-banner.loading {
    background: #f0f0f0;
}

.website-banner.loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #ddd;
    border-top-color: #0073aa;
    border-radius: 50%;
    animation: spin 1s infinite linear;
}

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

/* Error state */
.website-banner.error {
    background: #ffe6e6;
    border: 1px solid #ff6b6b;
}

.website-banner.error::before {
    content: '⚠️';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
}

/* Banner fade transition when switching */
.website-banner.switching {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

/* Banner Rotation System */
.banner-rotation {
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.banner-rotation.banner-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.banner-rotation.banner-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Smooth transition between banners */
.banner-rotation.banner-transitioning {
    opacity: 0.3;
    transition: opacity 0.3s ease-in-out;
}

/* Compact mode for smaller screens */
@media (max-height: 600px) {
    .website-banner {
        width: var(--banner-compact-width, 150px) !important;
        height: var(--banner-compact-height, 120px) !important;
    }
}

/* Performance optimization - GPU acceleration */
.website-banner,
.banner-image {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}