/* =========================================================
   Step Tab Mobile Custom Dropdown
   ========================================================= */

/* Always hidden on desktop */
.step-tab-mobile-wrap {
    display: none;
}

.stepTab li.stepTabing p{font-size: 13px;}
.stepTab li.stepTabing.current{background: var(--e-global-color-secondary);}
.stepTab li.stepTabing.current .sidebar-bold-list{color: var(--e-global-color-primary);}
.stepTab li.stepTabing.current p {color: #fff8e1;}

@media (min-width: 768px) {
    .stepTab .stepTabing{ background: #f9f9f9; padding: 8px; border-radius: 10px 10px 0px 0px;}
    .stepTab .stepTabing.current { background: #fff8e1; }
    .stepTab .stepTabing.current .sidebar-bold-list{ font-weight: 600 !important; }
}

@media (max-width: 767px) {

    /* Hide desktop tab list */
    .stepTab {
        display: none;
    }

    /* Show mobile dropdown wrapper */
    .step-tab-mobile-wrap {
        display: block;
        position: relative;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    /* Selected / trigger button */
    .step-tab-mobile-selected {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 10px 40px 10px 14px;
        border: 1px solid #ccc;
        border-radius: 10px;
        background-color: #fff;
        cursor: pointer;
        position: relative;
        min-height: 48px;
    }

    /* Chevron arrow via pseudo-element */
    .step-tab-mobile-selected::after {
        content: '';
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%) rotate(0deg);
        width: 12px;
        height: 8px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: contain;
        transition: transform 0.2s ease;
    }

    .step-tab-mobile-selected.open::after {
        transform: translateY(-50%) rotate(180deg);
    }

    /* Title inside selected/item */
    .step-tab-mobile-selected .stm-label,
    .step-tab-mobile-item .stm-label {
        display: block;
        font-size: 15px;
        font-weight: 700;
        color: #222;
        line-height: 1.3;
    }

    /* Subtitle inside selected/item */
    .step-tab-mobile-selected .stm-subtitle,
    .step-tab-mobile-item .stm-subtitle {
        display: block;
        font-size: 12px;
        font-weight: 400;
        color: #666;
        margin: 2px 0 0;
        line-height: 1.3;
    }

    /* Dropdown list */
    .step-tab-mobile-list {
        display: none;
        list-style: none;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 999;
        border: 1px solid #ccc;
        border-top: none;
        border-radius: 0 0 4px 4px;
        background: #fff;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    .step-tab-mobile-list.open {
        display: block;
    }

    /* Each dropdown item */
    .step-tab-mobile-item {
        padding: 10px 14px;
        cursor: pointer;
        border-bottom: 1px solid #f0f0f0;
        transition: background 0.15s ease;
    }

    .step-tab-mobile-item:last-child {
        border-bottom: none;
    }

    .step-tab-mobile-item:hover {
        background-color: #f5f5f5;
    }

    .step-tab-mobile-item.active {
        background-color: #fff8e1;
    }

    .step-tab-mobile-item.active .stm-label {
        color: #006436;
    }

    .step-tab-mobile-wrap .step-tab-mobile-selected{background: #fff8e1;}
.step-tab-mobile-wrap .step-tab-mobile-selected .stm-label{color:var(--e-global-color-secondary);}
}

/* Additional CSS for visually disabling */
.addon-count-container.disabled {
    opacity: 0.5; /* Make it look visually disabled */
}

.addon-count-container.disabled .decrement,
.addon-count-container.disabled .increament {
    cursor: not-allowed; /* Change cursor to indicate it's disabled */
}

.disabled {
    pointer-events: none;
    opacity: 0.5;
}