/* Hotel Kiosk Theme Extensions - Frontend Enhancements */

/* Enhanced Ad Visual Effects */
.advertisement-section .ad-content {
    position: relative;
    overflow: hidden;
}

.advertisement-section .single-ad-item {
    position: relative;
    z-index: 2;
}

/* Color Overlay Support */
.advertisement-section.hkte-has-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--hkte-overlay-color);
    opacity: var(--hkte-overlay-opacity);
    z-index: 1;
    pointer-events: none;
}

/* Transition Effects */
.hkte-transition-fade {
    transition: opacity var(--hkte-transition-duration, 500ms) ease-in-out;
}

.hkte-transition-fade.hkte-transitioning-out {
    opacity: 0;
}

.hkte-transition-slide {
    transition: transform var(--hkte-transition-duration, 500ms) ease-in-out;
}

.hkte-transition-slide.hkte-transitioning-out {
    transform: translateX(-100%);
}

.hkte-transition-zoom {
    transition: transform var(--hkte-transition-duration, 500ms) ease-in-out, 
                opacity var(--hkte-transition-duration, 500ms) ease-in-out;
}

.hkte-transition-zoom.hkte-transitioning-out {
    transform: scale(0.8);
    opacity: 0;
}

.hkte-transition-flip {
    transition: transform var(--hkte-transition-duration, 500ms) ease-in-out;
    transform-style: preserve-3d;
}

.hkte-transition-flip.hkte-transitioning-out {
    transform: rotateY(90deg);
}

/* Border and Styling Enhancements */
.advertisement-section[data-hkte-border-width]:not([data-hkte-border-width="0"]) {
    border-style: solid;
    border-width: var(--hkte-border-width);
    border-color: var(--hkte-border-color, #ddd);
}

.advertisement-section[data-hkte-border-radius]:not([data-hkte-border-radius="0"]) {
    border-radius: var(--hkte-border-radius);
}

/* Text Color Override */
.advertisement-section[data-hkte-text-color] .ad-title,
.advertisement-section[data-hkte-text-color] .ad-description {
    color: var(--hkte-text-color) !important;
}

/* Background Color Support */
.advertisement-section[data-hkte-background-color] {
    background-color: var(--hkte-background-color) !important;
}

/* Hover Effects */
.advertisement-section.hkte-pause-on-hover {
    cursor: pointer;
}

.advertisement-section.hkte-pause-on-hover:hover .single-ad-item {
    animation-play-state: paused;
}

.advertisement-section.hkte-pause-on-hover:hover::after {
    content: '⏸';
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 5px 8px;
    border-radius: 3px;
    font-size: 12px;
    z-index: 10;
}

/* Rotation Speed Classes (placeholder for future enhancements) */
.advertisement-section.hkte-speed-slow {
    /* Future: Could add visual indicators for slow rotation */
}

.advertisement-section.hkte-speed-fast {
    /* Future: Could add visual indicators for fast rotation */
}

/* Sticky Ad Indicator */
.advertisement-section.hkte-sticky-ad::before {
    content: '📌';
    position: absolute;
    top: 5px;
    left: 5px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 3px 5px;
    border-radius: 3px;
    font-size: 10px;
    z-index: 10;
    opacity: 0.7;
}

/* Enhanced Loading States */
.advertisement-section.hkte-loading .ad-content {
    opacity: 0.5;
    pointer-events: none;
}

.advertisement-section.hkte-loading .ad-content::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #333;
    border-radius: 50%;
    animation: hkte-spin 1s linear infinite;
}

@keyframes hkte-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive Enhancements */
@media (max-width: 768px) {
    .advertisement-section[data-hkte-border-radius] {
        border-radius: calc(var(--hkte-border-radius) / 2);
    }
    
    .advertisement-section[data-hkte-border-width] {
        border-width: calc(var(--hkte-border-width) / 2);
    }
}

/* Print Styles */
@media print {
    .advertisement-section::after,
    .advertisement-section::before {
        display: none !important;
    }
}

/* Accessibility Enhancements */
.advertisement-section:focus-within {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .hkte-transition-fade,
    .hkte-transition-slide,
    .hkte-transition-zoom,
    .hkte-transition-flip {
        transition: none !important;
    }
    
    .advertisement-section.hkte-loading .ad-content::after {
        animation: none !important;
    }
}