/* ============================================================
   CSS-Only Spotlight System
   ============================================================ */

/* Warning-styled modal content */
.modal-content.modal-warning {
    background-color: var(--bs-warning-bg-subtle) !important;
    color: var(--bs-warning-text-emphasis) !important;
    border: 1px solid var(--bs-warning-border-subtle) !important;
}

/* Spotlighted card - elevated with red border and glow */
.spot-card.spotlighted {
    position: relative !important;
    z-index: 2000 !important;
    outline: 2px solid var(--bs-danger) !important;
    box-shadow: 0 0 10px 10px rgba(var(--bs-danger-rgb), 0.65) !important;
}

/* Remove bottom margin from modal paragraphs */
.modal-body p:last-child {
    margin-bottom: 0 !important;
}

/* Offcanvas body as positioning context */
.offcanvas-body {
    position: relative;
    overflow: visible; /* Allow overlays to extend beyond if needed */
}

/* Blackout overlay - covers entire offcanvas body */
#blackout {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 999;
    display: none;
    justify-content: center;
    align-items: center;
}

/* ============================================================
   Card Overlay System (Embedded in Cards)
   ============================================================ */

/* Container for cards with overlays */
.spot-card {
    position: relative;
    overflow: visible; /* Allow overlay to extend beyond card */
}

/* The overlay itself - positioned absolutely within its card */
.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 100%;  /* At least as tall as the card */
    background: var(--bs-warning-bg-subtle);
    border: 1px solid var(--bs-warning);
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 2001; /* Above spotlighted cards */
}

/* Hide overlay by default */
.card-overlay.hidden {
    display: none;
}

.card-overlay p {
  margin-bottom: 0;  /* Remove the bottom margin */
}

#spot_card_3.spotlighted {
  pointer-events: none;        /* Disable clicking on the button */
}