/* ==========================================================================
   WORKFLOW SECTION
   Tabs + carousel used by includes/workflows/_workflow_render.php.

   Everything here is scoped to the workflow markup on purpose. The previous
   version of this file also carried .hero-title, .btn-primary, .btn-secondary,
   .accredited-wrapper and #features rules, which bled into unrelated sections;
   those have been removed.

   Screenshot sizing lives in the renderer's own <style> block, which locks the
   1829 x 1250 ratio with object-fit: contain so slides never jump or crop.
   ========================================================================== */

/* -------- Badge above the heading -------- */
.badge-experience {
    background-color: #e0f7ff;
    color: #2fb5d2;
    border-radius: 50px;
    padding: 8px 20px;
    font-weight: 500;
    display: inline-block;
    margin-bottom: 20px;
}

/* -------- Tab strip -------- */
.workflow-tabs {
    background: #e0f2f7;
    border-radius: 12px;
    padding: 5px !important;
    border: none;
}

.workflow-tabs .nav-link {
    color: #333;
    border: none;
    padding: 10px 25px;
    border-radius: 10px !important;
    font-weight: 500;
}

.workflow-tabs .nav-link.active {
    background-color: #00acee !important;
    color: #fff !important;
}

/* -------- Carousel shell -------- */
.carousel-container {
    position: relative;
    max-width: 1000px;
    margin: auto;
}

/* -------- Floating arrows -------- */
.custom-prev,
.custom-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
    border: none;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
    pointer-events: auto !important;
}

.custom-prev { left: -70px; }
.custom-next { right: -70px; }

.custom-prev:hover,
.custom-next:hover { background: #f8f9fa; }

/* -------- Indicator dots -------- */
#workflowTabContent .carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #00acee;
    background-color: transparent;
    opacity: 1;
}

#workflowTabContent .carousel-indicators .active {
    background-color: #00acee;
}

/* The screenshot must not swallow the arrow clicks. */
#workflowTabContent .carousel-item img {
    pointer-events: none;
}

/* ===================================================== Tablet */
@media (max-width: 991.98px) {
    .custom-prev { left: -20px; }
    .custom-next { right: -20px; }
}

/* ===================================================== Mobile */
@media (max-width: 767.98px) {
    .workflow-tabs .nav-link {
        padding: 8px 14px;
        font-size: .85rem;
    }

    .custom-prev,
    .custom-next {
        width: 36px;
        height: 36px;
    }

    .custom-prev { left: 5px; }
    .custom-next { right: 5px; }
}

@media (max-width: 480px) {
    .workflow-tabs .nav-link {
        padding: 7px 10px;
        font-size: .8rem;
    }
}