/**
 * Item Layout Styles
 * Styles for the item detail page
 * @version 1.0.0
 */

/* ============================================
   License Option Cards
   ============================================ */
.license-option {
    position: relative;
}

.license-option-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.license-option-label {
    display: block;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
    border: 2px solid #e5e7eb; /* gray-200 */
}

.dark .license-option-label {
    border-color: #374151; /* gray-700 */
}

/* Selected state - Strong visual feedback */
.license-option-input:checked + .license-option-label {
    border-color: #2563eb; /* blue-600 */
    background-color: rgba(37, 99, 235, 0.05);
}

.dark .license-option-input:checked + .license-option-label {
    border-color: #3b82f6; /* blue-500 */
    background-color: rgba(59, 130, 246, 0.1);
}

/* Radio circle indicator */
.license-option-radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #d1d5db; /* gray-300 */
    position: relative;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.dark .license-option-radio {
    border-color: #4b5563; /* gray-600 */
}

/* Radio circle - checked state */
.license-option-input:checked + .license-option-label .license-option-radio {
    border-color: #2563eb;
    background-color: #2563eb;
}

.dark .license-option-input:checked + .license-option-label .license-option-radio {
    border-color: #3b82f6;
    background-color: #3b82f6;
}

/* Inner white dot for checked radio */
.license-option-input:checked + .license-option-label .license-option-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: white;
}

/* Hover effect */
.license-option-label:hover {
    border-color: #60a5fa; /* blue-400 */
}

.dark .license-option-label:hover {
    border-color: #60a5fa;
}

/* Animation for selection */
.license-option.just-selected .license-option-label {
    animation: pulse-select 0.3s ease;
}

@keyframes pulse-select {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* ============================================
   Screenshot Gallery Fade Indicators
   ============================================ */
.screenshot-fade-left {
    background: linear-gradient(to right, rgba(255,255,255,0.9), rgba(255,255,255,0));
}

.dark .screenshot-fade-left {
    background: linear-gradient(to right, rgba(11,14,20,0.9), rgba(11,14,20,0));
}

.screenshot-fade-right {
    background: linear-gradient(to left, rgba(255,255,255,0.9), rgba(255,255,255,0));
}

.dark .screenshot-fade-right {
    background: linear-gradient(to left, rgba(11,14,20,0.9), rgba(11,14,20,0));
}

/* ============================================
   Audio Player
   ============================================ */
.item-single-audio {
    background-color: #fff !important;
}

.dark .item-single-audio {
    background-color: var(--color-dcard) !important;
}

/* ============================================
   Tab Navigation
   ============================================ */
.tab-scroll-container {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tab-scroll-container::-webkit-scrollbar {
    display: none;
}

/* ============================================
   Mobile Order Classes
   ============================================ */
@media (max-width: 768px) {
    .mobile-order-1 { order: 1; }
    .mobile-order-2 { order: 2; }
    .mobile-order-3 { order: 3; }
    .mobile-order-4 { order: 4; }
    .mobile-order-5 { order: 5; }
    .mobile-order-6 { order: 6; }
    .mobile-order-7 { order: 7; }
}

/* ============================================
   Video Player Enhancements
   ============================================ */

/* Progress handle positioning */
.progress-handle {
    transform: translate(-50%, -50%) !important;
    transition: opacity 0.2s, transform 0.2s;
    right: auto !important;
    left: 100% !important;
}

/* Handle active/dragging state */
.progress-handle.dragging {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1.2) !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
}

/* Progress container hover state */
.progress-container:hover .progress-bar {
    background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
}

/* Time preview positioning */
.time-preview {
    transform: translateX(-50%);
    z-index: 10;
}

.time-preview.active {
    display: block;
}

/* Video watermark */
.video-watermark {
    transition: opacity 0.3s ease;
}

/* Watermark opacity on hover */
.custom-video-player:hover .video-watermark {
    opacity: 0.4 !important;
}

/* Adjust watermark position when controls are visible */
.custom-video-player.controls-visible .video-watermark {
    bottom: 5rem;
}

/* Fullscreen adjustments */
.custom-video-player:fullscreen .video-watermark {
    bottom: 6rem;
    right: 2rem;
}

/* ============================================
   Video Ambient Background (YouTube-style)
   ============================================ */
.video-ambient-background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180%;
    height: 180%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        ellipse at center,
        rgba(59, 130, 246, 0.6) 0%,
        rgba(37, 99, 235, 0.4) 35%,
        rgba(29, 78, 216, 0.25) 55%,
        transparent 75%
    );
    filter: blur(150px);
    border-radius: 50%;
}

.video-ambient-background.active {
    opacity: 0.5;
}

/* ============================================
   Audio Ambient Background
   ============================================ */
.audio-ambient-background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180%;
    height: 180%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        ellipse at center,
        rgba(6, 182, 212, 0.5) 0%,
        rgba(14, 165, 233, 0.35) 35%,
        rgba(59, 130, 246, 0.2) 55%,
        transparent 75%
    );
    filter: blur(150px);
    border-radius: 50%;
}

.audio-ambient-background.active {
    opacity: 0.45;
}

/* ============================================
   Waveform Enhancements
   ============================================ */
.waveform {
    cursor: pointer !important;
    transition: opacity 0.2s ease;
}

.waveform:hover {
    opacity: 0.95;
}

/* WaveSurfer canvas styling */
.waveform canvas {
    cursor: pointer !important;
}

/* Loading state for waveform */
.waveform-loading {
    display: flex;
    align-items: center;
    justify-center;
    height: 60px;
    color: #3b82f6;
    font-size: 14px;
}

.waveform-loading::after {
    content: '';
    width: 20px;
    height: 20px;
    margin-left: 8px;
    border: 2px solid #3b82f6;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ============================================
   Premium Icon with Tooltip
   ============================================ */

.premium-icon-wrapper:hover .premium-tooltip {
    opacity: 1;
}