/* Wrapper */
.acup-calendar-wrapper {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    max-width: 400px;
    /* Adjust as needed or let elementor control width */
    margin: 0 auto;
    font-family: 'Inter', sans-serif;
    /* Fallback */
    position: relative;
    user-select: none;
}

/* Header */
.acup-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.acup-calendar-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    /* Dark text */
    text-transform: uppercase;
}

.acup-calendar-header button {
    background: transparent;
    border: none;
    font-size: 1.2rem;
    color: #cb4040;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.acup-calendar-header button:hover {
    background-color: #cb4040;
    color: #fff;
}

/* Weekdays */
.acup-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 15px;
}

.acup-calendar-weekdays div {
    font-weight: 600;
    font-size: 0.9rem;
    color: #000;
}

/* Grid */
.acup-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    row-gap: 5px;
}

.acup-day {
    position: relative;
    padding: 5px 0;
    font-size: 1rem;
    color: #000;
    font-weight: 600;
    cursor: default;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.acup-day.empty {
    pointer-events: none;
}

/* Event Indicator */
.event-dot {
    width: 6px;
    height: 6px;
    background-color: #cb4040;
    /* Red dot */
    border-radius: 50%;
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
}

/* Hover Effect for Event Days */
.acup-day.has-event {
    cursor: pointer;
}

/* Tooltip */
.acup-tooltip {
    visibility: hidden;
    background-color: #fff;
    color: #333;
    text-align: center;
    padding: 10px;
    border-radius: 6px;
    position: absolute;
    z-index: 10;
    bottom: 80%;
    /* Position above */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    width: 150px;
    font-size: 0.85rem;
    pointer-events: none;
    /* Let clicks pass through if needed, but links need pointer events */
}

/* Make tooltip interactive so links work?? 
   Actually user said "Quan passem per sobre... link al post". 
   If it's on hover, users can't click the link easily if it disappears when moving mouse to it.
   But usually "tooltip" implies hover. 
   I will enable pointer events on the tooltip and ensure it stays visible when hovered.
*/

.acup-day:hover .acup-tooltip {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.acup-tooltip a {
    color: #333;
    text-decoration: none;
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.acup-tooltip a:hover {
    color: #cb4040;
    text-decoration: underline;
}

.acup-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

/* Greyed out / Previous month numbers style (if we wanted to show them, but current logic shows empty) */
/* The design shows grey numbers for next/prev month usually, but the screenshot just shows empty space for start, but numbers at the end?
   Wait, the screenshot shows:
   Row 1: Empty Empty 1 2 3 4 5
   ...
   Row 5: 27 28 29 30 31 Empty Empty
   
   My Logic matches this.
*/

/* Specific styling from image */
/* Selected day/Today styling? Image shows '7' with a grey circle background. */
/* I will add a .today class or .selected class logic if needed, but for now just the structure. 
   The image shows '7' with grey circle.
   '22' and '30' have red dots.
*/

/* Example of circle background for special days if needed */
.acup-day.highlight-circle {
    background-color: #e0e0e0;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    /* Centering fix if we change display */
    display: flex;
    /* Flex again because width/height constrains */
    padding: 0;
}