/**
 * Playground Hours Enhancement Styles
 * Styling for enhanced hours displays in grid and detail views
 */

/* Enhanced Hours Container */
.playground-hours-enhanced {
    font-family: inherit;
    line-height: 1.4;
}

/* Status Display */
.hours-status {
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #363636;
}

/* Status indicators with emojis */
.hours-status:has-text("Open now") {
    color: #23a724;
}

.hours-status:has-text("Closed") {
    color: #d73e48;
}

.hours-status:has-text("Opens in") {
    color: #f39c12;
}

/* Summary display for detail pages */
.hours-summary {
    font-style: italic;
    color: #6b7280;
    margin-bottom: 0.75rem;
    font-size: 0.9em;
}

/* Detailed schedule */
.hours-schedule {
    font-size: 0.85em;
    line-height: 1.3;
}

.hours-schedule div {
    margin-bottom: 0.25rem;
    padding: 0.1rem 0;
}

.hours-schedule div:last-child {
    margin-bottom: 0;
}

/* Current day highlighting */
.hours-schedule .current-day {
    background-color: #f0f9ff;
    border-left: 3px solid #0ea5e9;
    padding-left: 0.5rem;
    margin-left: -0.5rem;
    font-weight: 600;
}

/* Grid view specific styles */
.playground-hours .hours-enhanced-display {
    margin-top: 0.25rem;
}

.playground-hours .hours-status {
    font-size: 0.9em;
    font-weight: 600;
}

/* Fallback styles */
.hours-fallback {
    color: #6b7280;
    font-size: 0.85em;
}

/* Detail page specific styles */
.playground-hours-enhanced .hours-status {
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hours-schedule {
        font-size: 0.8em;
    }
    
    .playground-hours .hours-status {
        font-size: 0.85em;
    }
}

/* Loading state */
.playground-hours[data-working-hours] .hours-status:empty {
    display: none;
}

.playground-hours-enhanced[data-working-hours] .hours-status:empty {
    display: none;
}

/* Enhanced display when JS is disabled */
.no-js .hours-status,
.no-js .hours-summary {
    display: none !important;
}

.no-js .hours-fallback {
    display: block !important;
}