/* scope everything inside .ff-cal so it won't bleed */
.ff-cal { --pill: 37.57px; border-radius: 16px;}

.ff-cal__wrap, .ff-cal__mini { background: #fff; border-radius: 18px; padding: 16px 16px 20px; }
.ff-cal__header {
    display:flex; align-items:center; justify-content:space-between;
    background:rgba(240, 237, 226, 0.4); border-radius:20px; padding:4px 3px 2.5px 3px; margin-bottom:5px;
    letter-spacing: -0.32px;
    height: 41px;
}
.ff-cal__nav { border:0; background:transparent; font-size:24px; line-height:1; padding:4px 8px 4px 8px; cursor:pointer; }
.ff-cal__title { font-weight:600; letter-spacing:.2px; }
.ff-cal__week {
    display:grid; grid-template-columns:repeat(7,1fr); gap:4px; padding:6px 0px 14px 0; color:#000; font-weight:700;
}
.ff-cal__grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px;}
.ff-cal__cell { min-height:var(--pill); display:flex; align-items:center; justify-content:center;width:var(--pill);margin: 0 auto; }
.ff-cal__cell.is-out, .ff-cal__cell .bg-sand { background-color: rgba(240, 237, 226, 0.4); border-radius: 50%;}
.ff-cal__pill {
    width:var(--pill); height:var(--pill); border-radius:999px; display:flex; align-items:center; justify-content:center;
}
.ff-cal__num { color: white !important; font-weight: 600; }


.ff-cal__cell.is-out .ff-cal__num, .ff-cal__cell .bg-sand .ff-cal__num {
    color: rgba(0, 0, 0, 0.3) !important;
}
.ff-cal__nav.is-disabled {
    opacity: 0;
    pointer-events: none;
}
.ff-cal { position: relative; }

.ff-cal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    border-radius: inherit; /* if your calendar wrapper is rounded */
}

/* show overlay when loading */
.ff-cal.is-loading .ff-cal__overlay {
    opacity: 1;
    pointer-events: auto;
}

/* spinner */
.ff-cal__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(0,0,0,0.2);
    border-top-color: #000;
    border-radius: 50%;
    animation: ffcal-spin .8s linear infinite;
}

@keyframes ffcal-spin { to { transform: rotate(360deg); } }

/* optional: dim grid subtly when loading */
.ff-cal.is-loading .ff-cal__grid { filter: saturate(.6) brightness(.96); }