/* =========================================================================
   옵션변경 모달 스타일  ========================================================================= */
#optionChangeModal .modal-body {
    gap: var(--spacing-7);
}

#optionChangeModal .modal-body form {
    gap: 0;
}

.option-change-product-details {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-3) var(--spacing-5);
    flex-wrap: wrap;
}

#optionChangeModal .product-action-item {
    border-bottom: none;
}

.option-change-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

.option-change-extra-products:has(#selectedExtraProductsList:not(:empty)) {
    border-bottom: 1px solid var(--color-stroke);
}
.option-change-extra-products:empty {
    display: none;
}

/* 옵션변경 모달의 커스텀 셀렉트박스 - 메인 스타일과 동일하게 */
#optionChangeModal .custom-selectbox-wrapper {
    position: relative;
}

/* 옵션변경 모달에서도 메인 components.css 스타일 사용 */
#optionChangeModal .custom-selectbox-options {
    z-index: 999999;
    position: fixed;
    left: 0;
    top: 0;
    display: none;
    min-width: 140px;
    max-width: 312px;
    max-height: 296px;
    padding: var(--spacing-4);
    border-radius: 8px;
    border: 1px solid var(--color-stroke, #e8e8e8);
    background: var(--white);
    box-shadow: var(--shadow-option-list);
    overflow-y: auto;
}

#optionChangeModal .custom-selectbox-wrapper.open .custom-selectbox-options {
    display: block;
}

#optionChangeModal .custom-selectbox-option {
    padding: var(--spacing-5);
    border-radius: var(--radius-2);
    font-size: var(--text-body-lg);
    font-weight: 400;
    line-height: 1.5;
    transition: var(--transition);
    cursor: pointer;
}

#optionChangeModal .custom-selectbox-option:hover {
    background: var(--gray-100);
    color: var(--secondary, #1c56ff);
}

@media (max-width: 767px) {
    /* 모바일 바텀시트 스타일 */
    #optionChangeModal {
        top: unset;
        bottom: 0;
        align-items: flex-end;
        justify-content: flex-end;
        padding: 0;
    }
    
    #optionChangeModal .modal-dialog,
    #optionChangeModal .modal-dialog-centered {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        height: 100vh;
        margin: 0;
        transform: translateY(100%);
        transition: transform 0.3s ease-out;
    }
    
    /* 모달 애니메이션 */
    #optionChangeModal.show .modal-dialog {
        transform: translateY(0);
    }
    
    #optionChangeModal .modal-content {
        max-height: 90vh;
        height: fit-content;
        border-radius: var(--radius) var(--radius) 0 0;
        display: flex;
        flex-direction: column;
        transform: none;
    }
    
    #optionChangeModal .modal-header {
        flex-shrink: 0;
        padding: var(--spacing-6);
        border-bottom: 1px solid var(--color-stroke);
    }
    
    #optionChangeModal .modal-body {
        flex: 1;
        overflow-y: auto;
        padding: var(--spacing-6);
        -webkit-overflow-scrolling: touch;
    }
    
    #optionChangeModal .modal-footer {
        flex-shrink: 0;
        padding: var(--spacing-6);
        border-top: 1px solid var(--color-stroke);
    }
    
    #optionChangeModal .option-change-buttons {
        width: 100%;
        display: flex;
        gap: var(--spacing-3);
    }
    
    #optionChangeModal .option-change-buttons .btn {
        flex: 1;
    }
}

@media (min-width: 768px) {
    #optionChangeModal .option-change-buttons {
        display: flex;
        gap: var(--spacing-3);
    }
}