:root {
    --cc-text-color: #ffffff;
    --cc-dim-text: rgba(255, 255, 255, 0.5);
    --cc-font: 'Inter', sans-serif;
    --cc-selected-bg: #ffffff;
    --cc-selected-text: #235098;
    --cc-empty-bg: #D9D9D9; 
    --cc-empty-text: #333333;
}

.events-results-container { display: grid; grid-template-columns: 1fr; gap: 48px; margin-top: 40px; width: 100%; }

.cc-wrapper { display: flex; flex-wrap: wrap; background-color: transparent; color: var(--cc-text-color); padding: 40px 0; font-family: var(--cc-font); gap: 50px; border: none; }
.cc-calendar-section { flex: 2; min-width: 300px; }
.cc-header { display: flex; align-items: center; margin-bottom: 30px; font-weight: 700; text-transform: uppercase; font-size: 16px; letter-spacing: 0.5px; justify-content: flex-start; padding-left: 10px; }
#cc-month-label { margin: 0 20px; text-align: center; min-width: 140px; }
.cc-nav-btn { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--cc-text-color) !important; cursor: pointer; padding: 5px; line-height: 0; transition: opacity 0.2s; display: flex; align-items: center; justify-content: center; }
.cc-nav-btn svg { width: 24px; height: 24px; stroke-width: 2px; }
.cc-nav-btn:hover { opacity: 0.7; }
.cc-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.cc-days-header, .cc-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.cc-days-header span { font-size: 14px; margin-bottom: 20px; font-weight: 400; color: var(--cc-text-color); }
.cc-grid { row-gap: 15px; }

.cc-day { padding: 10px; cursor: pointer; position: relative; font-size: 24px; font-weight: 300; transition: all 0.2s ease; border: 1px solid transparent; border-radius: 0; }
.cc-day.has-event::after { content: ''; display: block; width: 4px; height: 4px; background-color: white; border-radius: 50%; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); }
.cc-day:hover:not(.disabled) { background-color: rgba(255,255,255,0.1); }
.cc-day.selected { border: 1px solid white; }
.cc-day.is-start { border: 1px solid white; background-color: transparent; }
.cc-day.in-range { background-color: rgba(255,255,255,0.15); }
.cc-day.is-end { background-color: var(--cc-selected-bg); color: var(--cc-selected-text); font-weight: 600; border: 1px solid white; }
.cc-day.is-end:hover { background-color: transparent; color: #ffffff; border: 1px solid white; }
.cc-day.disabled { color: var(--cc-dim-text); cursor: default; pointer-events: none; }
.cc-day.empty { cursor: default; }

.cc-sidebar { flex: 1; min-width: 200px; text-align: right; }
.cc-category-list { list-style: none; padding: 0; margin: 0; }
.cc-cat-item { padding: 12px 0; cursor: pointer; font-size: 16px; font-weight: 300; position: relative; transition: 0.3s; opacity: 1; }
.cc-cat-name { position: relative; }
.cc-cat-item:hover .cc-cat-name, .cc-cat-item.active .cc-cat-name { text-decoration: underline; text-underline-offset: 5px; }
.cc-count { font-size: 0.75rem; vertical-align: super; margin-left: 2px; opacity: 0.8; text-decoration: none !important; display: inline-block; }

.loading-spinner { text-align: center; padding: 60px 20px; color: var(--cc-text-color); grid-column: 1 / -1; width: 100%; background: transparent; }
.no-events-found { text-align: left; padding: 40px; background-color: var(--cc-empty-bg); color: var(--cc-empty-text); grid-column: 1 / -1; width: 100%; }
.no-events-found h3 { margin: 0 0 10px 0; font-size: 24px; font-weight: 400; text-transform: uppercase; color: var(--cc-empty-text); }
.no-events-found p { margin: 0; font-size: 16px; font-weight: 300; color: var(--cc-empty-text); }

.rec-load-more-container { width: 100%; margin-top: 30px; text-align: right; }

@media (max-width: 768px) {
    .cc-wrapper { flex-direction: column; padding: 20px 0; gap: 30px; }
    .cc-day { font-size: 16px; padding: 5px; }
    .cc-header { justify-content: space-between; width: 100%; padding-left: 0; }
    #cc-month-label { margin: 0; flex-grow: 1; }
    .cc-sidebar { order: 2; text-align: left; width: 100%; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; overflow: hidden; }
    .cc-category-list { display: flex; flex-direction: row; overflow-x: auto; gap: 25px; padding-bottom: 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .cc-category-list::-webkit-scrollbar { display: none; }
    .cc-cat-item { display: block; margin: 0; white-space: nowrap; flex-shrink: 0; font-size: 14px; }
    .rec-load-more-container { text-align: center; }
    .rec-load-more-container button, .rec-load-more-container .button { width: 100%; display: block; }
}