/**
 * Event Calendar for YOOtheme Pro — 42BIT
 * All colors/fonts are CSS custom properties set from the element settings;
 * defaults follow the theme (--ec-primary / --ec-muted are read from UIkit at runtime).
 */

.ec-calendar {
    --_accent: var(--ec-event-bg, var(--ec-primary, #1e87f0));
    --_border: var(--ec-border-color, rgba(128, 128, 128, 0.2));
    position: relative;
    font-family: var(--ec-font, inherit);
}

.ec-calendar [hidden] {
    display: none !important;
}

/* Header */

.ec-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.ec-title {
    flex: 1;
    margin: 0 !important;
    text-align: center;
}

/* Only override the theme heading style when a value is actually set */
.ec-calendar[style*="--ec-title-color"] .ec-title { color: var(--ec-title-color); }
.ec-calendar[style*="--ec-font"] .ec-title { font-family: var(--ec-font); }
.ec-calendar[style*="--ec-title-font"] .ec-title { font-family: var(--ec-title-font); }
.ec-calendar[style*="--ec-title-size"] .ec-title { font-size: var(--ec-title-size); }

.ec-nav,
.ec-today-btn,
.ec-panel-close {
    appearance: none;
    margin: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
    color: var(--ec-nav-color, inherit);
}

.ec-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color .15s;
}

.ec-nav:hover,
.ec-nav:focus-visible {
    background: var(--_border);
}

.ec-today-btn {
    order: 3;
    padding: 4px 10px;
    border: 1px solid var(--_border);
    border-radius: 999px;
    font-size: .8rem;
}

.ec-next { order: 4; }

/* Grid */

.ec-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.ec-table th {
    padding: 6px 0;
    text-align: center;
    font-weight: normal;
    font-size: var(--ec-weekday-size, .8rem);
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ec-weekday-color, var(--ec-muted, inherit));
}

.ec-table td {
    padding: 3px;
    text-align: center;
    vertical-align: middle;
}

.ec-day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 48px;
    aspect-ratio: 1;
    margin: 0 auto;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: none;
    font: inherit;
    font-size: var(--ec-day-size, inherit);
    line-height: 1;
    color: var(--ec-day-color, inherit);
    text-decoration: none !important;
}

.ec-day.is-adjacent {
    opacity: .35;
}

.ec-day.is-today {
    border-color: var(--ec-today-color, currentColor);
    font-weight: bold;
}

.ec-day.is-event.is-past {
    opacity: var(--ec-past-opacity, .45);
}

.ec-day.is-event.is-adjacent.is-past {
    opacity: calc(var(--ec-past-opacity, .45) * .6);
}

/* Days with events */

.ec-day.is-event {
    cursor: pointer;
    font-weight: 600;
    transition: transform .15s, background-color .15s, color .15s, opacity .15s;
}

.ec-day.is-event:hover,
.ec-day.is-event:focus-visible {
    transform: scale(1.08);
    opacity: 1;
}

.ec-day.is-event:focus-visible {
    outline: 2px solid var(--_accent);
    outline-offset: 2px;
}

/* Marker: filled */
.ec-marker-fill .ec-day.is-event {
    background-color: var(--_accent);
    color: var(--ec-event-color, #fff);
}

.ec-marker-fill .ec-day.is-event:hover,
.ec-marker-fill .ec-day.is-event:focus-visible {
    background-color: var(--ec-event-hover, var(--_accent));
}

.ec-marker-fill .ec-day.is-event.is-today {
    box-shadow: 0 0 0 2px var(--ec-today-color, currentColor);
    border-color: #fff;
}

/* Marker: dot */
.ec-marker-dot .ec-day.is-event {
    color: var(--ec-event-color, inherit);
}

.ec-marker-dot .ec-day.is-event::after {
    content: "";
    position: absolute;
    bottom: 12%;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: var(--_accent);
}

.ec-marker-dot .ec-day.is-event:hover {
    background-color: var(--ec-event-hover, var(--_border));
}

/* Marker: outline */
.ec-marker-outline .ec-day.is-event {
    border: 2px solid var(--_accent);
    color: var(--ec-event-color, var(--_accent));
}

.ec-marker-outline .ec-day.is-event:hover {
    background-color: var(--ec-event-hover, var(--_border));
}

/* Marker: underline */
.ec-marker-underline .ec-day.is-event {
    color: var(--ec-event-color, inherit);
}

.ec-marker-underline .ec-day.is-event::after {
    content: "";
    position: absolute;
    bottom: 14%;
    left: 28%;
    right: 28%;
    height: 3px;
    border-radius: 2px;
    background: var(--_accent);
}

.ec-marker-underline .ec-day.is-event:hover {
    background-color: var(--ec-event-hover, var(--_border));
}

/* Count badge */
.ec-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 9px;
    background: var(--ec-event-color, #fff);
    color: var(--_accent);
    box-shadow: 0 0 0 1px var(--_accent);
    font-size: 11px;
    font-weight: bold;
    line-height: 18px;
}

.ec-marker-dot .ec-count,
.ec-marker-outline .ec-count,
.ec-marker-underline .ec-count {
    background: var(--_accent);
    color: #fff;
    box-shadow: none;
}

/* Event panel (tooltip on hover, pinned on click) */

.ec-panel {
    position: absolute;
    z-index: 1000;
    box-sizing: border-box;
    width: max-content;
    min-width: 200px;
    max-width: min(320px, 100%);
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--ec-tooltip-bg, #222);
    color: var(--ec-tooltip-color, #fff);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
    font-size: .875rem;
    line-height: 1.4;
    text-align: left;
}

/* Invisible bridge over the gap between day and panel, so the hover isn't lost */
.ec-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;
}

.ec-panel.is-below::before {
    top: auto;
    bottom: 100%;
}

.ec-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    font-size: .8em;
    opacity: .8;
}

.ec-panel-close {
    display: inline-flex;
    padding: 4px;
    color: inherit;
}

.ec-panel-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ec-panel-list li + li {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .2);
}

.ec-panel-title {
    font-weight: 600;
}

/* Links keep the panel text color in every state (the theme's a:hover color must not apply) */
.ec-panel a,
.ec-panel a:hover,
.ec-panel a:focus,
.ec-panel a:active,
.ec-panel a:visited {
    color: var(--ec-tooltip-color, #fff) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ec-panel a:hover,
.ec-panel a:focus-visible {
    text-decoration-thickness: 2px;
}

.ec-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    font-size: .85em;
    opacity: .85;
}

/* Mobile list (hidden unless a breakpoint is configured) */

.ec-list {
    display: none;
}

.ec-list-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ec-list-item {
    display: flex;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid var(--_border);
}

.ec-list-item:last-child {
    border-bottom: 1px solid var(--_border);
}

.ec-list-item.is-past {
    opacity: var(--ec-past-opacity, .45);
}

.ec-list-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 64px;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--_accent);
    color: var(--ec-event-color, #fff);
    line-height: 1.2;
    text-align: center;
}

.ec-list-weekday {
    font-size: .75em;
    text-transform: uppercase;
}

.ec-list-day {
    font-weight: 600;
    font-size: var(--ec-day-size, inherit);
}

.ec-list-item.is-today .ec-list-date {
    box-shadow: 0 0 0 2px var(--ec-today-color, currentColor);
}

.ec-list-body {
    align-self: center;
    min-width: 0;
}

.ec-list-title {
    font-weight: 600;
}

.ec-list .ec-meta {
    color: var(--ec-muted, inherit);
    opacity: 1;
}

.ec-empty {
    margin: 0;
    padding: 16px 0;
    color: var(--ec-muted, inherit);
    text-align: center;
}

/* Breakpoints match UIkit: s = 640px, m = 960px, l = 1200px */
@media (max-width: 639.98px) {
    .ec-list-s .ec-table { display: none; }
    .ec-list-s .ec-list { display: block; }
}

@media (max-width: 959.98px) {
    .ec-list-m .ec-table { display: none; }
    .ec-list-m .ec-list { display: block; }
}

@media (max-width: 1199.98px) {
    .ec-list-l .ec-table { display: none; }
    .ec-list-l .ec-list { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    .ec-day.is-event { transition: none; }
    .ec-day.is-event:hover { transform: none; }
}