/* custom-see-availability-width.css */

#calendar-title {
    background: #b4d7f3 !important; /* Match theme color */
    color: white !important;
    font-weight: bold;
    padding: 15px;
    border-radius: 8px;
    display: block;
    text-align: center;
    width: 100%; /* Make it full width */
    box-sizing: border-box; /* Prevent overflow from padding */
    transition: background 0.3s ease;
}

#calendar-title:hover {
    background: #9fc9eb !important;
}

/* ----------------------------------------------------------------------
   "edit dates" pill — pinned to the far right of the See Dates bar.
   calendermain.css already puts `margin-left: auto` on #calendar-menu-icon,
   but it never did anything: #calendar-title is display:block, and auto
   margins only push in a flex row. Making the title a flex row would work,
   except it would also drag "See Dates" off-centre — so the pill is taken
   out of flow and anchored to the right edge instead, and the heading stays
   centred exactly where it is.
---------------------------------------------------------------------- */
#calendar-title {
    position: relative;   /* the anchor for the pill below */
}

#calendar-menu-icon {
    position: absolute;
    right: 15px;          /* matches #calendar-title's padding */
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;       /* the auto margin is moot now — don't let it fight */
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    padding: 5px 12px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 9999px;
    white-space: nowrap;  /* "edit dates" must not wrap to two lines */
    transition: background 0.2s ease, color 0.2s ease;
}

#calendar-menu-icon:hover {
    color: #2b7cb8;
    background: #ffffff;
}