/* ============================================================
   Event Calendar Pro — Frontend CSS v2.0
   Modern Education / Booking UI — Blue + Amber
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');

:root {
    --ec-font:          'Nunito', 'Segoe UI', sans-serif;
    --ec-blue:          #1a6ff4;
    --ec-blue-dark:     #1457c7;
    --ec-blue-light:    #e8f0fe;
    --ec-blue-glow:     rgba(26,111,244,0.18);
    --ec-amber:         #f59e0b;
    --ec-amber-light:   #fffbeb;
    --ec-bg:            #f4f7ff;
    --ec-surface:       #ffffff;
    --ec-border:        #e2e8f4;
    --ec-text:          #1e2a3a;
    --ec-text-muted:    #6b7a99;
    --ec-weekend:       #e53e3e;
    --ec-radius-lg:     20px;
    --ec-radius-md:     12px;
    --ec-radius-sm:     8px;
    --ec-radius-pill:   999px;
    --ec-shadow-card:   0 4px 28px rgba(26,111,244,0.09);
    --ec-shadow-hover:  0 8px 36px rgba(26,111,244,0.18);
    --ec-shadow-cell:   0 2px 10px rgba(26,111,244,0.18);
}

/* ── Wrapper ────────────────────────────────────────────────── */
.ec-wrapper {
    display:        grid;
    grid-template-columns: 1fr 340px;
    gap:            24px;
    align-items:    start;
    max-width:      960px;
    margin:         32px auto;
    padding:        0 16px;
    font-family:    var(--ec-font);
    color:          var(--ec-text);
    box-sizing:     border-box;
}
.ec-wrapper *, .ec-wrapper *::before, .ec-wrapper *::after { box-sizing: inherit; }

/* ── Calendar column ────────────────────────────────────────── */
.ec-calendar-col {
    background:     var(--ec-surface);
    border-radius:  var(--ec-radius-lg);
    box-shadow:     var(--ec-shadow-card);
    overflow:       hidden;
}

/* ── Navigation ─────────────────────────────────────────────── */
.ec-nav {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    padding:        18px 20px 16px;
    background:     linear-gradient(135deg, var(--ec-blue), var(--ec-blue-dark));
}
.ec-nav-center {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            4px;
}
.ec-month-title {
    margin:  0;
    font-size:      1.1rem;
    font-weight:    800;
    color:          #fff;
    letter-spacing: 0.02em;
}
.ec-btn-today {
    background:     rgba(255,255,255,0.2);
    border:         1px solid rgba(255,255,255,0.3);
    color:          rgba(255,255,255,0.9);
    font-family:    var(--ec-font);
    font-size:      0.68rem;
    font-weight:    700;
    padding:        2px 10px;
    border-radius:  var(--ec-radius-pill);
    cursor:         pointer;
    letter-spacing: 0.04em;
    transition:     background 0.2s;
}
.ec-btn-today:hover { background: rgba(255,255,255,0.32); }

.ec-btn-nav {
    display:        flex;
    align-items:    center;
    justify-content: center;
    width:  36px; height: 36px;
    border: none;
    border-radius:  var(--ec-radius-pill);
    background:     rgba(255,255,255,0.18);
    color:  #fff;
    cursor: pointer;
    transition:     background 0.2s, transform 0.15s;
}
.ec-btn-nav:hover  { background: rgba(255,255,255,0.32); transform: scale(1.08); }
.ec-btn-nav:active { transform: scale(0.92); }

/* ── Day-of-week header ─────────────────────────────────────── */
.ec-grid-header {
    display:        grid;
    grid-template-columns: repeat(7,1fr);
    background:     var(--ec-blue-light);
    padding:        7px 12px 5px;
    gap:            4px;
}
.ec-grid-header span {
    text-align:     center;
    font-size:      0.71rem;
    font-weight:    700;
    color:          var(--ec-blue);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ec-grid-header .ec-weekend { color: var(--ec-weekend); }

/* ── Day grid ───────────────────────────────────────────────── */
.ec-grid {
    display:        grid;
    grid-template-columns: repeat(7,1fr);
    padding:        10px 10px 14px;
    gap:            5px;
    min-height:     290px;
}

/* ── Day cell ───────────────────────────────────────────────── */
.ec-cell {
    position:       relative;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: flex-start;
    padding:        8px 2px 5px;
    border-radius:  var(--ec-radius-sm);
    cursor:         pointer;
    user-select:    none;
    transition:     background 0.17s, box-shadow 0.17s, transform 0.14s;
    outline:        none;
    min-height:     54px;
}
.ec-cell:hover:not(.ec-empty) {
    background:     var(--ec-blue-light);
    transform:      translateY(-1px);
    box-shadow:     var(--ec-shadow-cell);
}
.ec-cell:focus-visible { box-shadow: 0 0 0 3px var(--ec-blue-glow); }
.ec-cell.ec-empty      { cursor: default; pointer-events: none; }

.ec-day-num {
    font-size:      0.88rem;
    font-weight:    600;
    line-height:    1;
    color:          var(--ec-text);
}
.ec-cell.ec-weekend .ec-day-num { color: var(--ec-weekend); }

/* Today */
.ec-cell.ec-today { background: var(--ec-amber-light); }
.ec-cell.ec-today .ec-day-num {
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    width:  28px; height: 28px;
    background:     var(--ec-amber);
    color:  #fff;
    border-radius:  var(--ec-radius-pill);
    font-weight:    800;
}

/* Selected */
.ec-cell.ec-selected {
    background:     var(--ec-blue);
    box-shadow:     var(--ec-shadow-hover);
    transform:      translateY(-2px);
}
.ec-cell.ec-selected .ec-day-num        { color: #fff; font-weight: 800; }
.ec-cell.ec-selected.ec-today .ec-day-num { background: rgba(255,255,255,0.25); }
.ec-cell.ec-selected .ec-dot           { background: rgba(255,255,255,0.85) !important; }

/* Dots */
.ec-dots { display: flex; gap: 3px; margin-top: 4px; }
.ec-dot  {
    display: block; width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--ec-blue);
    transition: transform 0.15s;
}
.ec-cell:hover .ec-dot { transform: scale(1.35); }

/* ── Animations ─────────────────────────────────────────────── */
@keyframes ec-in-l  { from{opacity:0;transform:translateX(26px)} to{opacity:1;transform:none} }
@keyframes ec-in-r  { from{opacity:0;transform:translateX(-26px)} to{opacity:1;transform:none} }
@keyframes ec-out-l { from{opacity:1;transform:none} to{opacity:0;transform:translateX(-26px)} }
@keyframes ec-out-r { from{opacity:1;transform:none} to{opacity:0;transform:translateX(26px)} }

.ec-grid.ec-slide-in-left   { animation: ec-in-l  0.32s cubic-bezier(.4,0,.2,1) both }
.ec-grid.ec-slide-in-right  { animation: ec-in-r  0.32s cubic-bezier(.4,0,.2,1) both }
.ec-grid.ec-slide-out-left  { animation: ec-out-l 0.22s ease both }
.ec-grid.ec-slide-out-right { animation: ec-out-r 0.22s ease both }

/* ── Panel column ───────────────────────────────────────────── */
.ec-panel-col {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    position:       sticky;
    top:            80px;
}
.ec-panel {
    background:     var(--ec-surface);
    border-radius:  var(--ec-radius-lg);
    box-shadow:     var(--ec-shadow-card);
    overflow:       hidden;
}
.ec-panel-header {
    display:        flex;
    align-items:    center;
    gap:            10px;
    padding:        16px 18px;
    background:     linear-gradient(135deg, var(--ec-blue), var(--ec-blue-dark));
}
.ec-panel-icon {
    display:        flex;
    align-items:    center;
    justify-content: center;
    width:  36px; height: 36px;
    background:     rgba(255,255,255,0.18);
    border-radius:  var(--ec-radius-sm);
    color:  #fff; flex-shrink: 0;
}
.ec-panel-title {
    margin: 0;
    font-size:      0.76rem;
    font-weight:    800;
    color:          #fff;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ec-panel-date-label {
    padding:        0 18px;
    font-size:      0.81rem;
    font-weight:    700;
    color:          var(--ec-blue);
    height:         0; overflow: hidden;
    transition:     height 0.25s, padding 0.25s, opacity 0.25s;
    opacity:        0;
}
.ec-panel-date-label.ec-panel-date--visible {
    height:         34px; padding: 9px 18px 0; opacity: 1;
}
.ec-panel-events {
    padding:        10px 12px 14px;
    max-height:     380px;
    overflow-y:     auto;
    scroll-behavior: smooth;
}
.ec-panel-events::-webkit-scrollbar       { width: 4px; }
.ec-panel-events::-webkit-scrollbar-track { background: transparent; }
.ec-panel-events::-webkit-scrollbar-thumb { background: var(--ec-border); border-radius: 4px; }

/* No event */
.ec-no-event {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    padding:        26px 16px;
    gap:            10px;
    color:          var(--ec-text-muted);
    text-align:     center;
}
.ec-no-event p { margin: 0; font-size: 0.87rem; font-weight: 500; }

/* Event card */
@keyframes ec-card-in { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

.ec-event-card {
    display:        flex;
    gap:            0;
    border-radius:  var(--ec-radius-md);
    border:         1px solid var(--ec-border);
    overflow:       hidden;
    margin-bottom:  9px;
    background:     var(--ec-surface);
    text-decoration: none;
    color:          inherit;
    transition:     box-shadow 0.2s, transform 0.2s;
    animation:      ec-card-in 0.28s cubic-bezier(.4,0,.2,1) both;
}
.ec-event-card:last-child { margin-bottom: 0; }
.ec-event-card:hover { box-shadow: var(--ec-shadow-card); transform: translateY(-2px); }

.ec-ev-accent { width: 4px; flex-shrink: 0; background: var(--cat-color, var(--ec-blue)); }
.ec-ev-body   { padding: 9px 10px 9px 10px; flex: 1; min-width: 0; }
.ec-ev-top    { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.ec-ev-arrow  { display: flex; align-items: center; padding: 0 10px; color: var(--ec-text-muted); opacity: 0.5; flex-shrink: 0; }
.ec-event-card:hover .ec-ev-arrow { opacity: 1; color: var(--ec-blue); }

.ec-ev-badge {
    font-size:      0.64rem; font-weight: 700;
    padding:        2px 7px;
    border-radius:  var(--ec-radius-pill);
    letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
}
.ec-ev-time, .ec-ev-loc {
    display:        inline-flex;
    align-items:    center;
    gap:            3px;
    font-size:      0.7rem;
    font-weight:    600;
    color:          var(--ec-text-muted);
}
.ec-ev-star { color: var(--ec-amber); font-size: 0.85rem; }
.ec-ev-title {
    margin: 0 0 3px;
    font-size:      0.86rem; font-weight: 700;
    color:          var(--ec-text);
    white-space:    nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ec-ev-desc {
    margin: 3px 0 0;
    font-size:      0.74rem; color: var(--ec-text-muted); line-height: 1.4;
    display:        -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:       hidden;
}
.ec-ev-loc { margin-top: 2px; display: flex; }

/* ── Upcoming sidebar ───────────────────────────────────────── */
.ec-upcoming {
    background:     var(--ec-surface);
    border-radius:  var(--ec-radius-lg);
    box-shadow:     var(--ec-shadow-card);
    padding:        14px 14px 16px;
}
.ec-upcoming-title {
    display:        flex;
    align-items:    center;
    gap:            6px;
    margin:         0 0 10px;
    font-size:      0.74rem;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color:          var(--ec-text-muted);
}
.ec-upcoming-item {
    display:        flex;
    align-items:    center;
    gap:            10px;
    padding:        7px 0;
    border-bottom:  1px solid var(--ec-border);
    text-decoration: none;
    color:          inherit;
    transition:     opacity 0.15s;
}
.ec-upcoming-item:last-child { border-bottom: none; }
.ec-upcoming-item:hover { opacity: 0.75; }
.ec-upcoming-date {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    width:  40px; height: 40px; flex-shrink: 0;
    border-radius:  var(--ec-radius-sm);
    border:         1px solid;
}
.ec-upcoming-day { font-size: 1rem; font-weight: 800; line-height: 1; }
.ec-upcoming-mon { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.8; }
.ec-upcoming-info { min-width: 0; }
.ec-upcoming-info strong { display: block; font-size: 0.8rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-upcoming-info span   { font-size: 0.7rem; color: var(--ec-text-muted); font-weight: 600; }
.ec-upcoming-empty { margin: 0; font-size: 0.8rem; color: var(--ec-text-muted); text-align: center; padding: 10px 0; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 720px) {
    .ec-wrapper { grid-template-columns: 1fr; gap: 16px; }
    .ec-panel-col { position: static; }
    .ec-grid { gap: 4px; padding: 8px; }
    .ec-cell { min-height: 46px; padding: 6px 2px 4px; }
    .ec-day-num { font-size: 0.82rem; }
}
@media (max-width: 400px) {
    .ec-cell { min-height: 38px; }
    .ec-day-num { font-size: 0.74rem; }
    .ec-nav { padding: 14px 12px; }
    .ec-month-title { font-size: 0.98rem; }
    .ec-dot { width: 4px; height: 4px; }
}

/* Thumbnail in event card */
.ec-event-card.has-thumb {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.ec-ev-thumb {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    margin: 10px 0 10px 10px;
}

.ec-ev-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Thumbnail in upcoming item */
.ec-upcoming-item.has-thumb {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ec-upcoming-thumb {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
}

.ec-upcoming-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive */
@media (max-width: 600px) {
    .ec-ev-thumb {
        width: 45px;
        height: 45px;
    }
    
    .ec-upcoming-thumb {
        width: 40px;
        height: 40px;
    }
}