#events-calendar { display: grid; grid-template-rows: auto; border-radius:12px; overflow: hidden; font-family: "Quicksand", sans-serif; }
    .ec-header {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      background: var(--bg);
      padding: 0.5rem 0;
      text-align: center;
      border-bottom: 1px solid var(--today-bg);
    }
    .ec-header div { font-weight: 600; color: var(--day-header); }
    
    /* Footer styles */
    .ec-footer {
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg);
      padding: 0.5rem 0;
      text-align: center;
      border-top: 1px solid var(--today-bg);
    }
    
    .ec-footer img {
      height: 20px;
      margin-right: 5px;
    }
    
    .ec-footer a {
      color: var(--day-header);
      text-decoration: none;
      font-size: 0.8rem;
      display: flex;
      align-items: center;
    }
    
    .ec-footer a:hover {
      color: var(--highlight);
    }
    
    .ec-viewport { overflow: hidden; }
    .ec-body {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      grid-auto-rows: minmax(100px, auto);
      margin: 0;
      padding: 0;
      transform: translateY(0);
    }
    .ec-cell {
      border: 1px solid var(--today-bg);
      background: var(--cell-bg);
      padding: 4px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .ec-cell.today { background: var(--today-bg); box-shadow: inset 0 0 0 2px var(--highlight); }
    .ec-daynum { margin-left: auto; font-weight: 600; color: var(--date-number)}
    .evt {
      margin-top: 6px;
      padding: 4px 8px;
      background: var(--primary-event-bg);
      border-radius: 6px;
      color: var(--event-text);
      font-size: 0.75rem;
      line-height: 1.2;
      white-space: normal;
      word-break: break-word;
      cursor: pointer;
      transition: all 0.5s ease;
    }
    .evt:hover { background: var(--highlight); color: var(--highlight-text); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);}
    .ec-cell span.evt:nth-of-type(even) { background: var(--secondary-event-bg); }
    .ec-cell span.evt:nth-of-type(even):hover { background: var(--highlight); color: var(--highlight-text);}
    
    /* desktop */
    @media (min-width: 601px){
  .ec-cell.empty {
  position: relative;
}

/* Add the faint X */
.ec-cell.empty::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 40 40"><path fill="%23629062" d="M30.6903 14.0237C31.992 12.7219 31.992 10.6114 30.6903 9.30962C29.3885 8.00788 27.278 8.00788 25.9762 9.30962L19.9999 15.2859L14.0236 9.30962C12.7219 8.00788 10.6113 8.00788 9.30956 9.30962C8.00781 10.6114 8.00781 12.7219 9.30956 14.0237L15.2859 20L9.30956 25.9763C8.00781 27.278 8.00781 29.3886 9.30956 30.6903C10.6113 31.9921 12.7219 31.9921 14.0236 30.6903L19.9999 24.714L25.9762 30.6903C27.278 31.9921 29.3885 31.9921 30.6903 30.6903C31.992 29.3886 31.992 27.278 30.6903 25.9763L24.714 20L30.6903 14.0237Z"/></svg>')
    no-repeat center;
  background-size: 40px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

/* Tooltip base styles */
.no-events-tooltip {
  position: absolute;
  top: 5px;
  left: 8px;
  transform: translateY(-6px);
  background: var(--today-bg);
  color: var(--date-number);
  font-size: 0.7rem;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 10;
}

.ec-cell.empty:hover .no-events-tooltip {
  opacity: 1;
  transform: translateY(0);
}



@keyframes fadeSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-6px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}


    }

    /* Mobile styles - applied by media query */
    @media (max-width:600px) {
      .ec-header { display: none; }
      .ec-body { display: flex; flex-direction: column;}
      .ec-cell {
        display: block;
        width: 100%;
        margin-bottom: 1rem;
        border: none;
        background-color: var(--cell-bg);
        padding: 1rem;
        border-radius: 8px;
        box-sizing: border-box;
      }
      .ec-daynum {
        display: block;
        font-size: 1.1rem;
        font-weight: bold;
        color: var(--mobile-date-header);
        margin-bottom: 0.5rem;
      }
      .evt {
        display: block;
        margin: 0.25rem 0;
        font-size: 0.85rem;
        padding: 6px 10px;
        border-radius: 6px;
        transition: all 0.3s ease;

      }


      .ec-cell span.evt:nth-of-type(even) {
        background-color: var(--secondary-event-bg);
      }

      .next-event-label {
        font-weight: bold;
        margin: 8px 0 4px 8px;
        font-size: 0.95rem;
        color: #333;
      }

      .ec-cell.empty {
        display: none !important;
      }

      .no-events-tooltip{
        display: none !important;
      }
      
      /* Mobile footer styles */
      .ec-footer {
        padding: 0.75rem 0;
      }
    }

    /* Mobile styles - applied when toggle is active */
    .mobile-view-active .ec-header { display: none; }
    .mobile-view-active .ec-body { display: flex; flex-direction: column; }
    .mobile-view-active .ec-cell {
      display: block;
      width: 100%;
      margin-bottom: 1rem;
      border: none;
      background-color: var(--cell-bg);
      padding: 1rem;
      border-radius: 8px;
      box-sizing: border-box;
    }

    .mobile-view-active .ec-daynum {
      display: block;
      font-size: 1.1rem;
      font-weight: bold;
      color: var(--mobile-date-header);
      margin-bottom: 0.5rem;
    }
    .mobile-view-active .evt {
      display: block;
      margin: 0.25rem 0;
      font-size: 0.85rem;
      padding: 6px 10px;
      border-radius: 6px;
    }
    .mobile-view-active .ec-cell span.evt:nth-of-type(even) {
      background-color: var(--secondary-event-bg);
    }
    .mobile-view-active .next-event-label {
      font-weight: bold;
      margin: 8px 0 4px 8px;
      font-size: 0.95rem;
      color: #333;
    }
    .mobile-view-active .ec-cell.empty {
      display: none !important;
    }
    
    /* Mobile view active footer styles */
    .mobile-view-active .ec-footer {
      padding: 0.75rem 0;
    }

    /* Additional selector for when mobile view is forced by toggle on preview container */
    .mobile-view #events-calendar .ec-header { display: none; }
    .mobile-view #events-calendar .ec-body { display: flex; flex-direction: column; }
    .mobile-view #events-calendar .ec-cell {
      display: block;
      width: 100%;
      margin-bottom: 1rem;
      border: none;
      background-color: var(--cell-bg);
      padding: 1rem;
      border-radius: 8px;
      box-sizing: border-box;
    }
    .mobile-view #events-calendar .ec-daynum {
      display: block;
      font-size: 1.1rem;
      font-weight: bold;
      color: var(--mobile-date-header);
      margin-bottom: 0.5rem;
    }
    .mobile-view #events-calendar .evt {
      display: block;
      margin: 0.25rem 0;
      font-size: 0.85rem;
      padding: 6px 10px;
      border-radius: 6px;
    }
    .mobile-view #events-calendar .ec-cell span.evt:nth-of-type(even) {
      background-color: var(--secondary-event-bg);
    }
    .mobile-view #events-calendar .next-event-label {
      font-weight: bold;
      margin: 8px 0 4px 8px;
      font-size: 0.95rem;
      color: #333;
    }
    .mobile-view #events-calendar .ec-cell.empty {
      display: none !important;
    }


/* The class you add to your wrapper in the iframe when unavailable */
.calendar-wrapper--unavailable,
.calendar-wrapper--unavailable > * {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}