/*
 * DigiFabric transactional cart/checkout header.
 * Scope is intentionally limited to WooCommerce transaction pages.
 */

.df-transactional-header {
    display: none;
}

@media (max-width: 767px) {
    body.df-tch-page {
        --df-tch-primary: #263B72;
        --df-tch-accent: #FFB703;
        --df-tch-text: #16213f;
        --df-tch-muted: #7c879b;
        --df-tch-border: #edf0f5;
        --df-tch-bg: #ffffff;
        --df-tch-soft: #f7f8fb;
    }

    body.df-tch-page .top-header-banner,
    body.df-tch-page .modern-header,
    body.df-tch-page #navbar-primary-fixed,
    body.df-tch-page .bk_purchasing-process-wrapper,
    body.df-tch-page .bk_purchasing-process--navigation,
    body.df-tch-page .new-checkout-headers,
    body.df-tch-page #bakala_breadcrumbs,
    body.df-tch-page .mobile-bottom-nav {
        display: none !important;
    }

    body.df-tch-page .main-warp,
    body.df-tch-page .container-bakala.main-warp {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    body.df-tch-page .entry-content.content-box {
        margin-top: 0 !important;
    }

    body.df-tch-page .df-transactional-header {
        position: sticky;
        top: 0;
        z-index: 99999;
        display: block;
        width: 100%;
        color: var(--df-tch-text);
        direction: rtl;
        background: rgba(255, 255, 255, .98);
        border-bottom: 1px solid var(--df-tch-border);
        box-shadow: 0 8px 22px rgba(22, 33, 63, .06);
        backdrop-filter: saturate(130%) blur(10px);
        -webkit-backdrop-filter: saturate(130%) blur(10px);
    }

    body.df-tch-page .df-transactional-header.is-scrolled {
        box-shadow: 0 10px 24px rgba(22, 33, 63, .12);
    }

    body.df-tch-page .df-tch__bar {
        display: grid;
        grid-template-columns: minmax(76px, 1fr) auto minmax(44px, 1fr);
        align-items: center;
        min-height: 54px;
        padding: 8px 12px 6px;
        gap: 8px;
    }

    body.df-tch-page .df-tch__back,
    body.df-tch-page .df-tch__home {
        display: inline-flex;
        align-items: center;
        min-width: 0;
        color: var(--df-tch-primary);
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent;
    }

    body.df-tch-page .df-tch__back {
        justify-self: start;
        gap: 5px;
        max-width: 110px;
        font-size: 12px;
        font-weight: 800;
        line-height: 1.2;
    }

    body.df-tch-page .df-tch__back-icon {
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
        color: #fff;
        font-size: 24px;
        line-height: 1;
        border-radius: 999px;
        background: var(--df-tch-primary);
        transform: rotate(180deg);
    }

    body.df-tch-page .df-tch__back-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.df-tch-page .df-tch__title-wrap {
        justify-self: center;
        min-width: 0;
        text-align: center;
    }

    body.df-tch-page .df-tch__title {
        color: var(--df-tch-text);
        font-size: 15px;
        font-weight: 900;
        line-height: 1.45;
        white-space: nowrap;
    }

    body.df-tch-page .df-tch__step-label {
        margin-top: 1px;
        color: var(--df-tch-muted);
        font-size: 11px;
        font-weight: 700;
        line-height: 1.3;
        white-space: nowrap;
    }

    body.df-tch-page .df-tch__home {
        justify-self: end;
    }

    body.df-tch-page .df-tch__home-mark {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        color: #fff;
        direction: ltr;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0;
        border-radius: 11px;
        background: linear-gradient(135deg, var(--df-tch-primary), #34508f);
        box-shadow: 0 6px 16px rgba(38, 59, 114, .2);
    }

    body.df-tch-page .df-tch__steps {
        position: relative;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        margin: 0;
        padding: 0 18px 10px;
        list-style: none;
    }

    body.df-tch-page .df-tch__steps::before {
        content: "";
        position: absolute;
        right: 18%;
        left: 18%;
        top: 9px;
        height: 2px;
        background: #e7ebf2;
    }

    body.df-tch-page .df-tch__step {
        position: relative;
        z-index: 1;
        display: grid;
        justify-items: center;
        gap: 5px;
        min-width: 0;
        color: #a4adbd;
        font-size: 10px;
        font-weight: 800;
        line-height: 1.2;
        text-align: center;
    }

    body.df-tch-page .df-tch__step-dot {
        display: block;
        width: 18px;
        height: 18px;
        border: 2px solid #e7ebf2;
        border-radius: 999px;
        background: #fff;
    }

    body.df-tch-page .df-tch__step.is-active .df-tch__step-dot {
        border-color: var(--df-tch-primary);
        background: var(--df-tch-primary);
        box-shadow: 0 0 0 4px rgba(38, 59, 114, .08);
    }

    body.df-tch-page .df-tch__step.is-current {
        color: var(--df-tch-primary);
    }

    body.df-tch-page .df-tch__step.is-current .df-tch__step-dot::after {
        content: "";
        display: block;
        width: 6px;
        height: 6px;
        margin: 4px auto 0;
        border-radius: 999px;
        background: var(--df-tch-accent);
    }

    body.df-tch-page .df-tch__step-text {
        display: block;
        max-width: 92px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 360px) {
    body.df-tch-page .df-tch__bar {
        grid-template-columns: minmax(58px, 1fr) auto 36px;
        padding-right: 10px;
        padding-left: 10px;
    }

    body.df-tch-page .df-tch__back {
        max-width: 86px;
    }

    body.df-tch-page .df-tch__back-text {
        display: none;
    }

    body.df-tch-page .df-tch__title {
        font-size: 14px;
    }

    body.df-tch-page .df-tch__step-label {
        font-size: 10px;
    }
}