/* Secret Drop — Drop Dates shown blue on the read-only Availability calendar
   only, distinct from yellow (pending) / red (booked) / grey (host-blocked).
   The interactive booking-form calendar (sidebar/overlay) shows the same
   dates as plain unavailable/pending (no blue) — only the tooltip (further
   below) is shown there, on request.

   Homey colors every calendar day via the ::after pseudo-element of the
   <li> (see homey/css/main.css — .days li.day-booked:after,
   .days li.day-pending:after, .days li.day-available:after, etc.), never
   the <li> itself. The .day-secret-drop class is appended alongside the
   day's normal class (day-unavailable, or the reservation_start/only_checkout
   transition class on the check-in day) in homeyGenerateMonth(), so the
   shared shape/skew rules already apply — we only need to override the
   background-color, exactly like Homey's own day classes do. */
.availability-section .days li.day-secret-drop:after,
.availability-section .day-hours li.day-secret-drop:after {
    background-color: #73afff !important;
}
.availability-section .days li.day-secret-drop:nth-child(7n+1):after,
.availability-section .day-hours li.day-secret-drop:nth-child(7n+1):after {
    background-color: #73afff !important;
}
.availability-section .days li.day-secret-drop:first-child:after,
.availability-section .day-hours li.day-secret-drop:first-child:after {
    background-color: #73afff !important;
}

/* The check-in transition day carries BOTH day-secret-drop AND Homey's own
   reservation_start + only_checkout classes (see homey-child/style.css —
   .availability-section .days li.reservation_start.only_checkout:after,
   which sets the pink #fdd2d2 checkout color with !important). That rule
   has 4 classes vs. our 3, so it wins on specificity alone even though this
   stylesheet loads later. Match its exact selector plus day-secret-drop so
   the auction blue wins specifically on that combination. */
.availability-section .days li.reservation_start.only_checkout.day-secret-drop:after,
.availability-section .day-hours li.reservation_start.only_checkout.day-secret-drop:after {
    background-color: #73afff !important;
}

.availability-section .days li.day-secret-drop .day-number,
.availability-section .day-hours li.day-secret-drop .day-number {
    color: #ffffff !important;
    position: relative;
    z-index: 1;
}

/* Legend swatch (availability display only) — same blue, same markup
   pattern as Homey's own day-available/day-pending/day-booked legend
   entries (.availability-notes .day-available:before etc. in main.css). */
.availability-notes .day-secret-drop:before {
    color: #73afff !important;
}

/* homey/style.css sets `.availability-section .day-unavailable { background-color: #ecedef; }`
   directly on the <li> itself (not via :after) — that grey sits underneath
   our :after overlay and can show through at the skewed box's edges/corners.
   Override it directly for the secret-drop combination so the whole cell,
   not just the after-box, is blue. */
.availability-section .day-unavailable.day-secret-drop {
    background-color: #73afff !important;
}

/* Tooltip — pure CSS (no JS), shown on hover above the day cell, telling
   guests these dates are reserved for the blind-bidding auction. Content
   comes from the data-secret-drop-tip attribute set server-side in
   homeyGenerateMonth() alongside the day-secret-drop class.

   Scoped to .single-listing-calendar-wrap (the wrapper homeyGenerateMonth()
   always outputs, in every context) rather than .availability-section, so
   it shows in BOTH the read-only Availability display AND the interactive
   booking-form calendar in the sidebar/overlay widgets — independent of the
   color rules above, which stay availability-section-only. */
.single-listing-calendar-wrap .days li.day-secret-drop,
.single-listing-calendar-wrap .day-hours li.day-secret-drop {
    cursor: help;
}
/* .days li:last-child / .day-hours li:last-child get overflow:hidden from
   main.css — neutralize it for secret-drop days so the tooltip above isn't
   clipped when the day falls in the last column of a row. */
.single-listing-calendar-wrap .days li.day-secret-drop:last-child,
.single-listing-calendar-wrap .day-hours li.day-secret-drop:last-child {
    overflow: visible !important;
}
.single-listing-calendar-wrap .days li.day-secret-drop:before,
.single-listing-calendar-wrap .day-hours li.day-secret-drop:before {
    content: attr(data-secret-drop-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1f2430;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: normal;
    width: 160px;
    text-align: center;
    padding: 6px 10px;
    border-radius: 6px;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, visibility .15s ease;
    font-family: inherit;
}
.single-listing-calendar-wrap .days li.day-secret-drop:hover:before,
.single-listing-calendar-wrap .day-hours li.day-secret-drop:hover:before {
    opacity: 1;
    visibility: visible;
}