/**
 * bootstrap-replace.css
 *
 * Provides the visual styles for behaviours that Bootstrap JS
 * managed dynamically (tooltip positioning, carousel slide
 * transitions, collapse animation). These complement the existing
 * bootstrap.css — that file stays in place, only bootstrap.js
 * is being removed.
 */

/* ---------------------------------------------------------
   TOOLTIP
   Bootstrap JS creates these elements dynamically; the base
   visual styles live in bootstrap.css but positioning must
   be set here since we're building the element ourselves.
--------------------------------------------------------- */
.tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    font-size: 12px;
    line-height: 1.4;
    /* Bootstrap CSS sets opacity; kept here as fallback */
    filter: alpha(opacity=90);
    opacity: .9;
}
.tooltip.top    { margin-top:  -3px; padding: 5px 0; }
.tooltip.right  { margin-left:  3px; padding: 0 5px; }
.tooltip.bottom { margin-top:   3px; padding: 5px 0; }
.tooltip.left   { margin-left: -3px; padding: 0 5px; }

.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: 4px;
}

/* Directional arrows */
.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
.tooltip.top    .tooltip-arrow { bottom: 0;   left: 50%; margin-left: -5px; border-width: 5px 5px 0;         border-top-color:    #000; }
.tooltip.right  .tooltip-arrow { top:    50%; left:  0;  margin-top:  -5px; border-width: 5px 5px 5px 0;     border-right-color:  #000; }
.tooltip.bottom .tooltip-arrow { top:    0;   left: 50%; margin-left: -5px; border-width: 0   5px 5px;       border-bottom-color: #000; }
.tooltip.left   .tooltip-arrow { top:    50%; right: 0;  margin-top:  -5px; border-width: 5px 0   5px 5px;   border-left-color:   #000; }


/* ---------------------------------------------------------
   COLLAPSE
   Bootstrap CSS already defines .collapsing; this is a
   safety declaration in case it is stripped or overridden.
--------------------------------------------------------- */
.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition: height 0.35s ease;
         -o-transition: height 0.35s ease;
            transition: height 0.35s ease;
}


/* ---------------------------------------------------------
   CAROUSEL
   Bootstrap CSS defines these transitions. Included here as
   a safety net so slides animate correctly without bootstrap.js.
--------------------------------------------------------- */
.carousel-inner > .item {
    -webkit-transition: left 0.6s ease-in-out;
         -o-transition: left 0.6s ease-in-out;
            transition: left 0.6s ease-in-out;
}

/* Incoming slide positions */
.carousel-inner > .item.next,
.carousel-inner > .item.active.right { left:  100%; }

.carousel-inner > .item.prev,
.carousel-inner > .item.active.left  { left: -100%; }

/* Mid-transition: both slides move to centre */
.carousel-inner > .item.next.left,
.carousel-inner > .item.prev.right,
.carousel-inner > .item.active       { left: 0; }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .carousel-inner > .item {
        -webkit-transition: none;
             -o-transition: none;
                transition: none;
    }
    .collapsing {
        -webkit-transition: none;
             -o-transition: none;
                transition: none;
    }
}