/* mod_dtevent_topbar_coming — hover popup attached to the NATIVE SP Page Builder
   "Coming Event" button (.sppb-btn.coming-event-btn) in the top bar. */

/* Calendar icon on the native button (matches Angel Dashboard styling, just adds the icon) */
.sppb-btn.coming-event-btn::before {
    font-family: 'bootstrap-icons', sans-serif;
    content: '\f1e3'; /* bi-calendar-event */
    font-size: .95em;
    margin-right: 6px;
    vertical-align: -.05em;
}

/* The button wrapper keeps the popup in the DOM; the button itself is pinned
   position:fixed by JS (see tmpl/default.php) — open/close is JS-driven too. */
.sppb-button-wrapper.dte-tc-ready { position: static; }

/* Button appearance for BOTH the adopted native SPB button (.dte-tc-ready)
   and the module-owned fallback (.dte-tc-own): the wrapper is hoisted to
   <body> (so position:fixed survives transformed ancestors), which orphans
   the native button from SPB's per-addon CSS — so the pill must be fully
   self-styled here. Desktop = ghost pill matching the other dark-top-bar
   buttons; mobile gets a solid override below (it floats over page content,
   where a translucent white pill would be invisible). */
.sppb-button-wrapper.dte-tc-own { position: static; margin: 0; }
.dte-tc-ready .sppb-btn.coming-event-btn,
.dte-tc-own .sppb-btn.coming-event-btn {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
}
.dte-tc-ready .sppb-btn.coming-event-btn:hover,
.dte-tc-ready .sppb-btn.coming-event-btn:focus,
.dte-tc-own .sppb-btn.coming-event-btn:hover,
.dte-tc-own .sppb-btn.coming-event-btn:focus {
    background: rgba(255, 255, 255, .22);
    color: #fff;
    text-decoration: none;
}

/* Mobile: JS pins the button bottom-right OVER PAGE CONTENT (not the dark
   top bar) — the ghost pill would blend into the background there. Solid
   brand navy (#141e3e) reads over any content. Same 767px breakpoint the
   JS pinning uses. */
@media (max-width: 767px) {
    .dte-tc-ready .sppb-btn.coming-event-btn,
    .dte-tc-own .sppb-btn.coming-event-btn {
        background: #141e3e;
        border-color: #141e3e;
        color: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    }
    .dte-tc-ready .sppb-btn.coming-event-btn:hover,
    .dte-tc-ready .sppb-btn.coming-event-btn:focus,
    .dte-tc-own .sppb-btn.coming-event-btn:hover,
    .dte-tc-own .sppb-btn.coming-event-btn:focus {
        background: #1d2c55;
        border-color: #1d2c55;
        color: #fff;
    }
}

/* Popup: display + coordinates are set by JS from the button's bounding rect. */
.dte-tc-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    background: #fff;
    /* Square (90°) corners — the event image fills the top edge. */
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
    z-index: 10000;
    text-align: left;
}

/* Popup content */
.dte-tc-popup__cover { display: block; }
/* Square (1:1) event image — matches cards, detail banner and dropzone. */
.dte-tc-popup__cover img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; display: block; }
.dte-tc-popup__body { padding: 10px 14px 12px; }
.dte-tc-popup__title {
    display: block; font-weight: 700; font-size: 14px; color: #141e3e;
    text-decoration: none; line-height: 1.3; margin-bottom: 4px;
}
.dte-tc-popup__title:hover { text-decoration: underline; }
.dte-tc-popup__date { font-size: 12px; color: #2c3552; font-weight: 600; }
.dte-tc-popup__venue { font-size: 12px; color: #6b7280; margin-top: 3px; }