/* Studio Visuali — Google Calendar Widget v2.1 */

.vcal-root {
    /* ── Design tokens ── */
    --vcal-font:             inherit;
    --vcal-bg:               #ffffff;
    --vcal-radius:           12px;
    --vcal-border-color:     #e5e7eb;
    --vcal-border-width:     1px;

    /* Header */
    --vcal-header-bg:        #ffffff;
    --vcal-header-color:     #111827;
    --vcal-header-padding:   14px 18px;
    --vcal-title-size:       18px;
    --vcal-title-weight:     700;

    /* Nav buttons */
    --vcal-btn-bg:             #f3f4f6;
    --vcal-btn-color:          #374151;
    --vcal-btn-radius:         8px;
    --vcal-btn-hover-bg:       #e5e7eb;
    --vcal-btn-hover-color:    #374151;
    --vcal-today-bg:           #6c63ff;
    --vcal-today-color:        #ffffff;
    --vcal-today-hover-bg:     #5a52d5;
    --vcal-today-hover-color:  #ffffff;
    --vcal-arrow-size:         18px;
    --vcal-arrow-btn-w:        34px;

    /* Day headers */
    --vcal-dayhdr-bg:        #f9fafb;
    --vcal-dayhdr-color:     #6b7280;
    --vcal-dayhdr-size:      12px;
    --vcal-dayhdr-weight:    600;
    --vcal-dayhdr-sat-color: #9ca3af;
    --vcal-dayhdr-fri-color: #9ca3af;

    /* Cells */
    --vcal-cell-bg:          #ffffff;
    --vcal-cell-min-h:       72px;
    --vcal-cell-border:      #e5e7eb;
    --vcal-num-size:         13px;
    --vcal-num-color:        #374151;
    --vcal-num-other-color:  #d1d5db;
    --vcal-num-sat-color:    #9ca3af;
    --vcal-num-fri-color:    #9ca3af;
    --vcal-num-w:            26px;
    --vcal-other-opacity:    1;

    /* Today */
    --vcal-today-cell-bg:    #fffbeb;
    --vcal-today-num-bg:     #f59e0b;
    --vcal-today-num-color:  #ffffff;

    /* Weekend */
    --vcal-sat-bg:           #f9fafb;
    --vcal-fri-bg:           #f9fafb;

    /* Typography — font families */
    --vcal-title-font:          inherit;
    --vcal-title-transform:     none;
    --vcal-title-spacing:       normal;
    --vcal-dayhdr-font:         inherit;
    --vcal-dayhdr-transform:    none;
    --vcal-dayhdr-spacing:      0.3px;
    --vcal-num-font:            inherit;
    --vcal-num-transform:       none;
    --vcal-event-font:          inherit;
    --vcal-event-transform:     none;
    --vcal-event-spacing:       normal;

    /* Events */
    --vcal-event-radius:     4px;
    --vcal-event-size:       12px;
    --vcal-event-weight:     500;
    --vcal-event-h:          22px;
    --vcal-event-gap:        2px;
    --vcal-event-px:         7px;

    /* ── Base ── */
    direction:      rtl;
    font-family:    var(--vcal-font);
    background:     var(--vcal-bg);
    border-radius:  var(--vcal-radius);
    border:         var(--vcal-border-width) solid var(--vcal-border-color);
    overflow:       visible;
    width:          100%;
    min-height:     300px;
    box-sizing:     border-box;
    position:       relative;
}

/* ══ Header ════════════════════════════════════════════════════════════
   Layout (RTL): [› next]  [   title   ]  [today][‹ prev]
   First child = right side in RTL flex
   ════════════════════════════════════════════════════════════════════ */
.vcal-header {
    display:         flex;
    align-items:     center;
    padding:         var(--vcal-header-padding);
    background:      var(--vcal-header-bg);
    border-bottom:   var(--vcal-border-width) solid var(--vcal-border-color);
    gap:             8px;
    border-radius:   var(--vcal-radius) var(--vcal-radius) 0 0;
}

.vcal-title {
    flex:            1;
    text-align:      center;
    font-size:       var(--vcal-title-size);
    font-weight:     var(--vcal-title-weight);
    color:           var(--vcal-header-color);
    line-height:     1.2;
    font-family:     var(--vcal-title-font);
    text-transform:  var(--vcal-title-transform);
    letter-spacing:  var(--vcal-title-spacing);
}

/* Left zone: today + prev arrow */
.vcal-header-left {
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-shrink: 0;
}

/* ── Buttons ── */
.vcal-btn {
    cursor:        pointer;
    border:        none;
    font:          inherit;
    line-height:   1;
    border-radius: var(--vcal-btn-radius);
    transition:    background 0.15s, color 0.15s;
    white-space:   nowrap;
    flex-shrink:   0;
}

.vcal-btn-today {
    background:  var(--vcal-today-bg);
    color:       var(--vcal-today-color);
    font-size:   13px;
    font-weight: 600;
    padding:     7px 15px;
}
.vcal-btn-today:hover,
.vcal-btn-today:focus { background: var(--vcal-today-hover-bg); color: var(--vcal-today-hover-color); outline: none; }
.vcal-btn-today:active { opacity: 0.85; }

.vcal-btn-arrow {
    background:      var(--vcal-btn-bg);
    color:           var(--vcal-btn-color);
    width:           var(--vcal-arrow-btn-w);
    height:          var(--vcal-arrow-btn-w);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0;
}
.vcal-btn-arrow:hover,
.vcal-btn-arrow:focus { background: var(--vcal-btn-hover-bg); color: var(--vcal-btn-hover-color); outline: none; }
.vcal-btn-arrow:active { background: var(--vcal-btn-hover-bg); color: var(--vcal-btn-hover-color); opacity: 0.8; }

.vcal-btn-arrow svg {
    width:    var(--vcal-arrow-size);
    height:   var(--vcal-arrow-size);
    display:  block;
    flex-shrink: 0;
}

/* ══ Day headers ════════════════════════════════════════════════════════ */
.vcal-day-headers {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    direction:             rtl;
    background:            var(--vcal-dayhdr-bg);
    border-bottom:         var(--vcal-border-width) solid var(--vcal-border-color);
}

.vcal-day-head {
    padding:        8px 4px;
    text-align:     center;
    font-size:      var(--vcal-dayhdr-size);
    font-weight:    var(--vcal-dayhdr-weight);
    color:          var(--vcal-dayhdr-color);
    letter-spacing: var(--vcal-dayhdr-spacing);
    font-family:    var(--vcal-dayhdr-font);
    text-transform: var(--vcal-dayhdr-transform);
}
.vcal-day-head.is-sat { color: var(--vcal-dayhdr-sat-color); }
.vcal-day-head.is-fri { color: var(--vcal-dayhdr-fri-color); }

/* ══ Grid ═══════════════════════════════════════════════════════════════ */
.vcal-grid { display: flex; flex-direction: column; }

.vcal-week {
    border-bottom: var(--vcal-border-width) solid var(--vcal-cell-border);
}
.vcal-week:last-child { border-bottom: none; }

.vcal-week-dates {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    direction:             rtl;
}

.vcal-cell {
    background:   var(--vcal-cell-bg);
    min-height:   var(--vcal-cell-min-h);
    padding:      6px 6px 2px;
    box-sizing:   border-box;
    border-right: var(--vcal-border-width) solid var(--vcal-cell-border);
}
.vcal-cell:first-child { border-right: none; }
.vcal-cell.is-other { opacity: var(--vcal-other-opacity); }
.vcal-cell.is-today { background: var(--vcal-today-cell-bg); }
.vcal-cell.is-sat   { background: var(--vcal-sat-bg); }
.vcal-cell.is-fri   { background: var(--vcal-fri-bg); }

.vcal-num {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           var(--vcal-num-w);
    height:          var(--vcal-num-w);
    font-size:       var(--vcal-num-size);
    font-weight:     500;
    color:           var(--vcal-num-color);
    border-radius:   50%;
    line-height:     1;
    font-family:     var(--vcal-num-font);
    text-transform:  var(--vcal-num-transform);
}
.vcal-cell.is-other .vcal-num              { color: var(--vcal-num-other-color); }
.vcal-cell.is-sat:not(.is-today) .vcal-num { color: var(--vcal-num-sat-color); }
.vcal-cell.is-fri:not(.is-today) .vcal-num { color: var(--vcal-num-fri-color); }
.vcal-cell.is-today .vcal-num {
    background:  var(--vcal-today-num-bg);
    color:       var(--vcal-today-num-color);
    font-weight: 700;
}

/* ── Events row ── */
.vcal-week-events {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows:        calc(var(--vcal-event-h) + var(--vcal-event-gap));
    direction:             rtl;
    padding-bottom:        4px;
}

.vcal-event {
    grid-column:    var(--ev-col) / span var(--ev-span);
    grid-row:       calc(var(--ev-lane) + 1);
    height:         var(--vcal-event-h);
    line-height:    var(--vcal-event-h);
    margin-top:     var(--vcal-event-gap);
    margin-inline:  2px;
    padding-inline: var(--vcal-event-px);
    font-size:      var(--vcal-event-size);
    font-weight:    var(--vcal-event-weight);
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    cursor:         pointer;
    user-select:    none;
    border-radius:  0;
    box-sizing:     border-box;
    transition:     filter 0.1s;
    font-family:    var(--vcal-event-font);
    text-transform: var(--vcal-event-transform);
    letter-spacing: var(--vcal-event-spacing);
}
.vcal-event:hover { filter: brightness(0.92); }

/* RTL rounded ends */
.vcal-event.is-start {
    border-start-start-radius: var(--vcal-event-radius);
    border-end-start-radius:   var(--vcal-event-radius);
    margin-inline-start: 3px;
}
.vcal-event.is-end {
    border-start-end-radius: var(--vcal-event-radius);
    border-end-end-radius:   var(--vcal-event-radius);
    margin-inline-end: 3px;
}

/* ══ Popup ══════════════════════════════════════════════════════════════ */
.vcal-popup {
    position:      absolute; /* set inline */
    background:    #fff;
    border-radius: 10px;
    box-shadow:    0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
    min-width:     220px;
    max-width:     280px;
    overflow:      hidden;
    direction:     rtl;
    animation:     vcalPopIn 0.15s ease;
    pointer-events: all;
}

@keyframes vcalPopIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1);     }
}

.vcal-popup-stripe {
    height: 5px;
    width:  100%;
}

.vcal-popup-close {
    position:   absolute;
    top:        10px;
    inset-inline-end: 10px; /* respects RTL */
    width:      22px;
    height:     22px;
    border:     none;
    background: #f3f4f6;
    border-radius: 50%;
    font-size:  14px;
    color:      #6b7280;
    cursor:     pointer;
    display:    flex;
    align-items: center;
    justify-content: center;
    padding:    0;
    line-height: 1;
    transition: background 0.15s;
}
.vcal-popup-close:hover { background: #e5e7eb; color: #111827; }

.vcal-popup-title {
    font-size:   15px;
    font-weight: 700;
    color:       #111827;
    padding:     12px 16px 4px;
    padding-inline-end: 40px; /* room for close btn */
    line-height: 1.3;
}

.vcal-popup-dates {
    font-size:  12px;
    color:      #6b7280;
    padding:    0 16px 10px;
}

.vcal-popup-desc {
    font-size:    13px;
    color:        #374151;
    padding:      0 16px 10px;
    line-height:  1.5;
    border-top:   1px solid #f3f4f6;
    padding-top:  8px;
    white-space:  pre-wrap;
}

.vcal-popup-loc {
    font-size:  12px;
    color:      #6b7280;
    padding:    0 16px 12px;
}

/* ══ Loading ════════════════════════════════════════════════════════════ */
.vcal-loading {
    display:    none;
    text-align: center;
    padding:    20px;
    color:      #9ca3af;
    font-size:  14px;
}

/* ══ Editor placeholder ═════════════════════════════════════════════════ */
.vcal-placeholder {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    min-height:      200px;
    gap:             12px;
    color:           #9ca3af;
    background:      #f9fafb;
    border:          2px dashed #e5e7eb;
    border-radius:   var(--vcal-radius);
    font-size:       14px;
    padding:         24px;
}
.vcal-placeholder i { font-size: 40px; opacity: 0.4; }

/* ══ Mobile ═════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .vcal-header   { padding: 10px 12px; gap: 6px; }
    .vcal-title    { font-size: 15px; }
    .vcal-btn-today { font-size: 12px; padding: 6px 10px; }
    .vcal-day-head { font-size: 10px; padding: 6px 2px; }
    .vcal-cell     { min-height: 48px; padding: 4px 3px 1px; }
    .vcal-num      { width: 22px; height: 22px; font-size: 11px; }
    .vcal-event    { font-size: 10px; }
    .vcal-arrow-btn-w: { width: 28px; height: 28px; }
}